Web Programming/Development Course Notes

AJAX




Chapter 18. AJAX: Asynchronous
JavaScript and XML
Table of Contents

Objectives ..................................................................................................................................................... 1
18.1 Introduction ..................................................................................................................................... 1
18.2 Initialisation .................................................................................................................................... 2
18.3 Synchronous example ..................................................................................................................... 2
18.4 A more detailed example ................................................................................................................ 4
18.5 Getting data from a server ............................................................................................................... 5
18.6 Sending data to a server .................................................................................................................. 8
18.7 Performing asynchronous communication .................................................................................... 10
18.8 Advantages and disadvantages of AJAX based Web pages .......................................................... 13



Objectives
At the end of this unit you will be able to:
• Make HTTP requests using AJAX;
• Use XML HttpRequest objets;
• Get data to and from the server using AJAX;
• Perform asynchronous communication using AJAX.



18.1 Introduction
With the growth of Web applications, websites have been trying to make user interaction similar to that found in
desktop applications. The largest push is towards making Web interfaces more dynamic: if data changes, say a new
email arrives in your inbox in GMAIL, the Web page should update and display the new email without reloading
the whole page. The page should always be available to the user and always responsive to their input. While the
DOM allows for such dynamic updates to occur, AJAX is an important group of technologies that allows a Web
page to request more information from the server (such as an updated list of email in an inbox) without having
to reload the whole page. Together, AJAX and the DOM can be used to create dynamic Web pages, and this chapter
will introduce you to how that can be done.

AJAX stands for Asynchronous JavaScript and XML. It allows a Web page to make a request to a Web
server for information using standard HTTP, but without reloading the page, and without automatically displaying
the information returned from the server. These requests are all made programmatically, using JavaScript, and
data communication is often done using XML, as JavaScript can easily parse this data. After receiving the data from
the server, the JavaScript script can use the returned data however it wishes. The requests can also be made in a
such a way that the JavaScript code does not have to wait for a reply from the server. Instead, the JavaScript code is
notified when the page has finished receiving the information. In this way, the script can continue to perform useful
actions while the data downloads from the server – this makes the communication asynchronous to any action that
the Web page is performing.

It is important to realise that AJAX itself refers to a group of related technologies, not all of which are
standardised, and not all of which need to be used at once. For instance, it can often be more convenient to
communicate with the server using plain text rather than XML, and these communications need not occur
asynchronously. Various other technologies are often employed in addition to those making up the AJAX

1

, AJAX
name itself. The original article that defined the term AJAX lists the following technologies:

• XHTML and CSS, which defines what is being displayed and how it is displayed.

• The Document Object Model, which allows us to programmatically alter the content and how it is
displayed.

• XML and XSLT, which is used to transfer data between the server and Web browser (using XML),
and to manipulate that data (using XSLT).

• XMLHttpRequest, which is the object used to communicate with the Web server over HTTP. This
object provides the asynchronous communication abilities.

• JavaScript, which is the programming language implemented in most Web browsers, and is used to
bring together all the other technologies listed above.
Most of these technologies are discussed elsewhere in these notes. The rest of this chapter will examine how
XMLHttpRequest can be used to communicate with the Web server.


18.2 Initialisation
The first step to making an HTTP request using AJAX is to create an instance of one of the
XMLHttpFunction function objects. There are two different objects that can be used, depending on the
browser: Mozilla based browsers – such as Firefox – and Safari (used on OS X) both use XMLHttpRequest()
objects. Internet Explorer, on the other hand, uses ActiveXObject(). An object can easily be created using the
following code:

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest =
new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}


The methods and properties associated with both of these objects are identical: the major difference between them
is how they are initialised. During these notes we will speak of XMLHttpRequest to mean both the Mozilla / Safari
XMLHttpRequest objects, and Microsofts XMLHTTP ActiveX object, unless stated otherwise.


18.3 Synchronous example
This simple example will show you to use XML HttpRequest objects to request a file using JavaScript. In the same
directory, create two files: one called sync-file.html, and the other called text.txt. The text.txt can contain any
small amount of text that you like; we suggest using, Hello, world! This is the file that you will be requesting using
the XMLHttpRequest object. Make sure that the files are in the same directory, as most browsers have security
restrictions that will stop XMLHttpRequest objects from being able to access files outside of the directory that the
HTML file making the request is in.

Add the following HTML to sync-file.html:


<html>
<head>
<title>This is a title</title>

</head>
<body>
<script type="text/javascript">

function create_request() { var httpRequest;
if (window.XMLHttpRequest) { httpRequest = new
2