|
Acknowledgment:
AJAX, an acronym for Asynchronous JavaScript and XML, is very hot in the growing universe of Web development. While this new technology offers some great capabilities, it also sparks some unquestionable debate over issues with the Back button. Kris Hadlock explains how to use AJAX in a real-world situation and how you can assess its value in a project. By the time you finish reading this article, you'll know what AJAX is as well as where, why, and how to use it.
AJAX, an acronym for Asynchronous JavaScript and XML, is the latest
technology buzzword. Asynchronous means that you can make a request to
a server via
Hypertext Transfer Protocol
(HTTP) and continue to process other data while waiting for the response. This
means, for example, that you can make calls to a server-side script to retrieve
data from a database as XML, send data to a server-side script to be stored in a
database, or simply load an XML file to populate pages of your Web site without
refreshing the page. However, along with all of the benefits, AJAX sparks some
unquestionable debate over issues with the Back button. This article will help
you to determine when AJAX is a good solution for developing your users'
experiences.
I'm assuming that you have a basic understanding of the JavaScript and
XML part of the acronym. Although you can request any type of text file with
AJAX, I'll focus strictly on XML. I'll explain how to use AJAX in a
real-world situation and how you can assess its value in a project. By the time
you finish reading this article, you'll know what AJAX is as well as where,
why, and how to use it. You're going to learn how to create the object,
make the request, and customize the response, while maintaining good practices
that provide an intuitive user experience.
I've created a
sample project
for this article (you can
download
the source code). The sample is a simple request that loads an XML file
containing page content and parses the data to display it in an HTML page.
Common Properties and Methods
Tables 1 and 2 provide an overview of the properties and methods supported by
Windows Internet Explorer 5, Mozilla, Netscape 7, Safari 1.2, and Opera.
Table 1 Properties
|
Property
|
Description
|
|
onreadystatechange
|
Event handler that fires when the state of the request object changes.
|
|
readyState
|
Returns values that indicate the current state of the object.
|
|
responseText
|
String version of the response from the server.
|
|
responseXML
|
DOM-compatible document object of the response from the server.
|
|
status
|
Status code of the response from the server.
|
|
statusText
|
Status message returned as a string.
|
Table 2 Methods
|
Method
|
Description
|
|
Abort()
|
Cancels the current HTTP request.
|
|
getAllResponseHeaders()
|
Retrieves the values of all the HTTP headers.
|
|
getResponseHeader("headerLabel")
|
Retrieves the value of an HTTP header from the response body.
|
|
open("method", "URL"[,
asyncFlag[, "userName"[,
"password"]]])
|
Initializes an MSXML2.XMLHTTP request, specifying the method, URL, and
authentication information for the request.
|
|
send(content)
|
Sends an HTTP request to the server and receives a response.
|
|
setRequestHeader("label", "value")
|
Specifies the name of an HTTP header.
|
Where To Start
First, you'll need to create the XML file that we will later request and
parse as page content. The file that you're requesting must reside on the
same server as the finished project.
Next, create the HTML file that will make the request. The request will
happen when the page loads by using the onload method in the body tag. The file
will then need a div tag with an ID so that we can target it when we're
ready to display the content. When you've done all this, the body of your
page should look like this:
<body onload="makeRequest('xml/content.xml');">
<div id="copy"></div>
</body>
Creating the Request Object
To create the request object, you must check whether the browser uses the
XMLHttpRequest or the ActiveXObject. The primary difference between the objects
is the browsers that use them. Windows IE 5 and above use the ActiveX object;
Mozilla, Netscape 7, Opera, and Safari 1.2 and above use the XMLHttpRequest
object. Another difference is the way in which you create the objects: Opera,
Mozilla, Netscape, and Safari allow you to simply call the objects'
constructor, but Windows IE requires the name of the object to be passed to the
ActiveX constructor. Following is an example of how to write the code to
determine which object to use and how to create it:
if(window.XMLHttpRequest)
{
request = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request = new ActiveXObject("MSXML2.XMLHTTP");
}
Making the Request
Now that your request object has been created, you're ready to make a
request to the server. Create a reference for an event handler to listen for
onreadystatechange. The event handler method will then react when the state
changes. We'll write this method as soon as we finish writing the request.
Open the connection to GET or POST a custom URL, which in this case is the
content.xml, and set a Boolean defining whether you want the call to be
asynchronous.
It's time to send the request. In the example, I use null because
we're using GET; to use POST, you would send a query string with this
method:
request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send(null);
Custom Loading and Error Handling Messages
The event handler that you created for the onreadystatechange method is the
place to focus on loading and error handling. This is the time to start thinking
of the users and provide feedback about the status of the content with which
they're interacting. In the example, I provide feedback for all the loading
status codes and some basic feedback for the error handling status codes that
occur most frequently. To indicate the current state of the request object, the
readyState property includes the values shown in the following table.
|
Value
|
Description
|
|
0
|
Uninitialized. The object is not initialized with data.
|
|
1
|
Loading. The object is loading its data.
|
|
2
|
Loaded. The object has finished loading its data.
|
|
3
|
Interactive. The user can interact with the object even though it's not
fully loaded.
|
|
4
|
Complete. The object is completely initialized.
|
The W3C has quite a long list of the
HTTP status code definitions.
I chose two status codes:
- 200: The request has succeeded.
- 404: In case the server hasn't found anything matching the requested
file.
Finally, I check for any other status codes that would produce an error and
provide a general error message. Following is an example of the code that you
could use to handle these situations. Notice that I'm targeting the div ID
that we created in the body of the HTML file and applying the loading and/or
error messages to it with the innerHTML method, which sets the HTML between the
start and end tags of the div object:
if(obj.readyState == 0)
{
document.getElementById('copy').innerHTML="Sending Request...";
}
if(obj.readyState == 1)
{
document.getElementById('copy').innerHTML="Loading Response...";
}
if(obj.readyState == 2)
{
document.getElementById('copy').innerHTML="Response Loaded...";
}
if(obj.readyState == 3)
{
document.getElementById('copy').innerHTML="Response Ready...";
}
if(obj.readyState == 4)
{
if(obj.status == 200)
{
return true;
}
else if(obj.status == 404)
{
// Add a custom message or redirect the user to another page
document.getElementById('copy').innerHTML="File not found";
}
else
{
document.getElementById('copy').innerHTML="There was a problem retrieving the XML.";
}
}
When the status code is equal to 200, meaning that the request has succeeded,
the response is ready to be parsed.
Parsing the Response
The real work begins when you're ready to parse the response from the
request object. This is where you actually start working with the data that you
requested. For testing purposes during development, the responseText and
responseXML properties can be used to display the raw data from the response. To
begin accessing nodes in the XML response, start with the request object that
you created, target the responseXML property to retrieve (you guessed it) the
XML from the response. Target the documentElement, which retrieves a reference
to the root node of the XML response.
var response = request.responseXML.documentElement;
Now that you have a reference to the root node of the response, you can use
getElementsByTagName() to retrieve childNodes by their node names. The following
line locates a childNode with a nodeName of header:
response.getElementsByTagName('header')[0].firstChild.data;
Using firstChild.data allows you to access the text within the element:
response.getElementsByTagName('header')[0].firstChild.data;
Here's a complete example of how to write the code:
var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;
Assessing Your Needs
Now that you know the basics of how to use AJAX, deciding whether to use it
on a project will certainly be the next step. The most important thing to keep
in mind is that you can't use the Back button when you're not
refreshing the page. Focus on smaller sections of your project that could
benefit from using this type of interaction. For instance, you could build a
form that queries a script every time a user enters an input field, or even
types a letter in order to provide real-time validation. You could build a
drag-and-drop page that sends data to a script on the release of an item and
saves the state of the page to a database. The reasons for using AJAX definitely
exist and are beneficial not only to the development experience but to users; it
all depends on the situation and execution.
There are also ways to work around the issues with the Back button, such as
with Google Gmail, which now provides an undo for steps that you make without
refreshing the page. Many more creative examples are sure to surface, which will
benefit users by providing developers with ways to create unique, real-time
experiences.
Conclusion
Although AJAX allows us to build new and improved ways of interacting with a
Web page, as developers we need to remember that the product is not about the
technologies; it's about the users and how they interact with the product.
Without the users, the projects we build would have no purpose. With that
principle in mind, we can assess what technologies to use and when to use them
in order to create an application that's beneficial to all who use it.
|
