Ajax

The "A" in Ajax stands for "Asynchronous", and the "X" stands for "XML", but I will use the term to describe any use of the XMLHttpRequest object (or the Microsoft equivalents).

Also, even though Internet Explorer (at least in older versions) doesn't use the term XMLHttpRequest, I will use that term for the equivalent ActiveX objects in IE since they are used the same way. (As of version 7, you can use the name XMLHttpRequest in Internet Explorer, also.) At this point it's probably not worth worrying about IE before version 7, unless you know that it's important for a particular web application to support old browsers.

Synchronous and asynchronous requests

Asynchronous requests are used a lot more commonly than synchronous requests, but I recommend that you use synchronous requests to keep things simple. If you get Assignment 5 finished using synchronous requests, then you might want to save a copy and then try asynchronous requests.

Using Ajax with local files

Modern JavaScript talks about loading data from the server. For Assignment 5, you'll be loading data from my server, but for Assignment 6 you will be using Ajax to load local files. That doesn't work in Chrome, so you'll need to use Firefox or Safari for Assignment 6. Also, when loading local files with Ajax, you won't get a response code of 200. You might get a response code of zero or some other value.

HTTP POST requests

Our textbook talks about using the POST method with XMLHttpRequest to send data to the server and store it there. That's a common use of XMLHttpRequest, but unfortunately it's not an option for us in this class because storing data on a server requires server-side scripting, which we do not study in this class. If you want to keep track of something like game high scores, you can use HTML5 local storage to store data in the browser. You'll use local storage for Assignment 5 and we will talk about it in more detail in Lesson 10.

Ajax cautions

The author of JavaScript: The Definitive Guide* (a textbook for this class in the past) explained several Ajax "cautions":
1) Lack of visual feedback that shows the application is waiting for data from the server.
2) Difficulties with bookmarks because a page's URL does not change when the content is changed by Ajax code
3) Scripts that use Ajax bypass the browser's history mechanism so that the Back button won't work as expected.

* page 498 of the fifth edition

Ajax Demo

This page shows four examples of JavaScript code that uses XMLHttpRequest to get data from a server.