Ajax provides a way to update the contents of a web page with data from a server without reloading the page. Using Ajax, JavaScript code can receive data from the server in the background without affecting the user interface of the browser. Ajax also provides a way for JavaScript code to send data to a server, but in this class we will only look at receiving data.

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, including synchronous requests and requests that use JSON (or some other data format) instead of XML.

Mozilla has a good introduction to Ajax at this web site:

There's also an Ajax tutorial on w3schools.com:

Synchronous and asynchronous requests

Asynchronous requests are used much more commonly than synchronous requests, but you might want to use synchronous requests at first 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.

To make a synchronous request rather than an asynchronous request, pass false as the third parameter to the open method and don't set the onreadystatechange property. The send method will not return until the request is complete.

The disadvantage of using synchronous requests is that the user interface will be locked up until the request is completed and the user will not be able to do anything.

Using Ajax with local files

Ajax is usually used to load data from a 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. By default that doesn't work in Chrome (or Safari), so you'll need to use Firefox for Assignment 6 or change the settings for another browser. 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

Many web applications use the POST method with XMLHttpRequest to send data to a server and store it there. Unfortunately that'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.