BTC640/ProcessingAjax

Lecture

Ajax is simply a way to make asynchronous (non-blocking) requests over the internet. Normally to make a request to a server you need to "go" to a URL, perhaps with some parameters. This is the traditional flow:

1. The user clicks on a button or a link.
2. The browser creates a URL for that action and queries the server for it.
3. The server sends back a new page.
4. The browser leaves the old page and displays the new page.

All web applications were built on this model originally. The problem is that reloading the page is expensive (both in bandwidth and time) and depending on what you're trying to do the user experience can be unacceptable. Just try to imagine Google Maps if you had to reload the page for every pan or zoom request.

Two sort-of-solutions for this problem before Ajax were frames and later iframes. Frames amost everybody hated (for various reasons). Iframes are better in many ways but they have some problems: a reload of the iframe is required to change its content, and the iframe itself has a fixed size.

Modern websites just use Ajax to create dynamic pages. An example of a flow with Ajax is:

1. The user clicks on a button or a link.
2. The request is handled 100% in JavaScript code, where:
   1. An XMLHttpRequest object is created
   2. A callback function is associated with that object
   3. A URL is created for the request (same as in the traditional flow but you have to do it yourself)
   4. The request for that page is sent to the server asynchronously (in the background), the user cannot see anything happening at this point.
   5. When the response is received from the server the callback function is called automatically.
   6. The callback function modifies a part of the page dynamically using DOM access methods.