- Request and Response
- The Ready State
- Request Status
- ResponseText and ResponseXML
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
ResponseText and ResponseXML
The response can come in many different forms, such as XML, plain text, (X)HTML, or JavaScript Object Notation (JSON). Depending on the data format that you receive, there are two different ways to handle it: with responseText or with responseXML. The responseText method is used for all formats that are not based on XML. It returns an exact representation of the response as a string. Plain text, (X)HTML, and JSON are all formats that use responseText. Using this method on plain text or HTML is trivial:
if(ajax.checkReadyState(’body’, ’loading...’, ’loading...’, ’loading...’) == "OK")
{
document.getElementById(’body’).innerHTML = ajax.request.responseText;
}
It doesn’t get much simpler than that! Once the response has completed loading, we just call the AJAX object, retrieve its value with responseText, and add it to the page.
Dealing with a JSON response is a little trickier than plain text or (X)HTML. Following is an example of a JSON file that we’ll parse:
{ ’header’ : ’How to Handle the Ajax Response’,
’description’ : ’An in-depth explanation of how to handle the Ajax response.’,
’sourceUrl’ : ’http://www.krishadlock.com/clients/informit/AjaxResponse/AjaxResponse.zip’}
The data is separated with a colon into two sections: the tag name and value. Additional data is separated with commas into a new name/value pair. Now that we know what the JSON looks like, this is how we parse it as a response:
if(ajax.checkReadyState(’body’, ’loading...’, ’loading...’, ’loading...’) == "OK")
{
eval("var response = ("+ajax.request.responseText+")");
document.getElementById(’body’).innerHTML = "<b>" + response.header + "</b><br/>"
+ response.description + "<br/><br/>"
+ "<a href=’" + response.sourceUrl + "’>Download the source files</a>";
}
The JSON data first needs be evaluated by JavaScript, with a simple eval() procedure. Once the data is evaluated and the response object is created, we can simply call elements by name to get their corresponding values.
Not only is responseText good for adding content to the page; it’s useful when debugging your AJAX requests. For instance, you may not be ready to parse the data because you don’t know what all of the tags are, in the XML or JSON file. This would be a great way to examine the data to prepare for parsing. Once you know all the tag names to target, all you have to do is write the code.
The responseXML method is fairly simple to use, but, like the JSON format, XML requires data parsing. The first thing we have to do is target the root node of the XML response:
var response = ajax.request.responseXML.documentElement;
Next, we get all the elements by tag name and target their values:
var header = response.getElementsByTagName(’header’)[0].firstChild.data; var description = response.getElementsByTagName(’description’)[0].firstChild.data; var sourceUrl = response.getElementsByTagName(’sourceUrl’)[0].firstChild.data;
Finally, we display the response in the corresponding div tag:
document.getElementById(’body’).innerHTML = "<b>" + header + "</b><br/>"
+ description + "<br/><br/>"
+ "<a href=’" + sourceUrl + "’>Download the source files</a>";
The benefit of using JSON over XML with JavaScript is speed; by nature, JSON requires a lot less parsing code than XML, which ultimately makes JSON faster when parsing large amounts of data. The downside is that XML has much greater support and more server-side development options. The choice depends on the situation and purpose of the request.
The AJAX response is an important part of the AJAX communication. This is where you have to take care of the ready state, the error handling and loading status, and ultimately the display. With this information, you should be able to give more emphasis to the response and provide more information about the page to the user as she interacts with it.
For more information on Web design, visit our Web Design Reference Guide or sign up for our Web Design Newsletter.