This lecture presents a brief example-based summary of Ajax programming.
Asynchronous JavaScript and XML (Ajax) is a programming technique for developing dynamic and responsive Web applications using JavaScript. Some well-known applications that use Ajax include:
The main characteristics of Ajax applications are the following:
(XML or JSON or other) data is transferred between the client and
server using HTTP requests...
without the user (explicitly) initiating the requests,
and...
only part of the window is redrawn as a result of each
response.
Ajax implementations are based on:
XMLHttpRequest object defined in JavaScript
for (programmatically) sending HTTP
requests to the server and (asynchronously) handling HTTP responses.
XMLHttpRequest->open() and
send() calls.
Dozens, maybe hundreds, of Ajax tutorials exist on the Web; just search for "Ajax tutorial". Many of these emphasise XML rather than JSON (and use first principles).
This example illustrates immediate and asynchronous text responses.
This example illustrates safe and unsafe handling of JSON responses. JSON
is described below (and see json.org).
Basically, JSON is a format for structured data constructed from booleans,
numbers and strings, combined using indexed and associative arrays (arrays
and objects in JavaScript terminology), e.g., ["a", "b", {"c":
100, "d": []}]. JSON is become increasingly widely used for data transfer and
all modern languages have libraries for parsing and producing JSON strings.
This example illustrates handling of an XML document response.
In general, JSON is preferable for transferring values and XML is preferable for transferring documents. Increasingly, XML is becoming less important for Web applications. These assertions are controversial.
This example (zipped
archive) also uses Ajax to retrieve a JSON object representing a list
of lenders who match a given query. Here, for simplicity, the script
getLenders.php ignores the query and always returns the same
list of 4 lenders.
XMLHttpRequest class| onreadystatechange | contains a function of no arguments that is invoked when the server sends a response |
| readyState | integers from 0 to 4, indicating progress, where 4 means "complete" |
| status | 200 is OK; 404 if the page is not found |
| statusText | string describing the status |
| responseText | contains response data as a string |
| responseXml | contains response data as an XML file, DOM methods used to extract data |
| open(method, url [, async]) | method: type of request - GET or POST url: the location of the file, with a path async: true (asynchronous) or false (synchronous) optionally, a login and a password may be added to arguments |
| setRequestHeader(header, value) | sets request header |
| send(data) | data sent with POST command, null for a GET command |
| getAllResponseHeaders() | returns all response headers |
| getResponseHeader(header) | returns value of given response header |
| abort() | cancels the current request |
More detailed descriptions of the XMLHttpRequest class may be
found at:
Many frameworks (or libraries) have been implemented to support the development of Ajax applications. A list can be found at Wikipedia. Different libraries allow applications to be developed in different languages, not just JavaScript, but also Java, PHP, Python, .NET, etc. Some frameworks allow data to be transferred as JSON or plain text instead of XML. Two PHP libraries are xajax and Sajax. The Google Web Toolkit allows you to write Ajax applications in Java. jQuery is a very popular library for writing Ajax applications and JavaScript generally. Other popular libraries are Dojo, Prototype and Scriptaculous. Comparing these libraries is difficult.
We introduce jQuery in the next lecture.