Are you interested in learning web development but unsure of where to begin? Do you find it difficult to remember all the many web development tools, frameworks, and languages? Look nowhere else! You're covered by our remarks on web development.
The main ideas and tools used in web development, ...
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
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller arshshops24. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $20.49. You're not tied to anything after your purchase.
