The X in AJAX stands for XML, so in this part if the tutorial, we will examine XML handling in AJAX. In the previous part, we covered basics of DOM manipulation, so now we will use some of that knowledge to process data from the server, since XML processing using basically the same API as DOM processing.
Web servers can send respond in a variety of forms, but for inter-application communication and data exchange, two most common formats are XML and JSON. We will cover JSON in upcoming chapter. Typically, client will examine the response, pull requested data from it and use it to update GUI or perform some other action. We will create small sample for this. You can find source code in attached archive.
First, we need to create the response from server, and then create servlet that will serve this data to client. To keep things simple, we will send a list of web sites and their URLs, as shown in code snippet below:
Amazon
http://www.amazon.com
Google
http://www.google.com
Ebay
http://www.ebay.com
Now, we will create the servlet to serve this data, we will map it to “/ajaxxml” Url in deployment descriptor. In servlet, we first set content type to XML, and then write the response. Below is servlet's source code.
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// set correct content type
response.setContentType("text/xml");
PrintWriter out = response.getWriter();
try {
out.println("
");
out.println("
");
out.println("
");
out.println("
Amazon
");
out.println("
http://www.amazon.com
");
out.println("
");
out.println("
");
out.println("
Google
");
out.println("
http://www.google.com
");
out.println("
");
out.println("
");
out.println("
Ebay
");
out.println("
http://www.ebay.com
");
out.println("
");
out.println("
");
} finally {
out.close();
}
}
Finally, we need to create the page with script to send AJAX request and process the response. We will create page called xmlpage.html. This page contains single button, which will request data from server when clicked, and display results in table form. Complete source code can be found in attached archive, but we will focus only on callback method here, since that is where XML processing is implemented.
function xmlCallback(){
if(request.readyState == 4){
if(request.status == 200){
// get response header
var data = request.responseXML.documentElement.getElementsByTagName("website");
var txt = "
Site
URL
";
for(i = 0;i ";
name = data[i].getElementsByTagName("name");
txt += "
" + name[0].firstChild.nodeValue + "
";
url = data[i].getElementsByTagName("url");
txt += "
" + url[0].firstChild.nodeValue + "
";
txt += "";
}
txt += "
";
document.getElementById("webSiteList").innerHTML = txt;
}
}
}
The first few lines are just a regular callback code, like the one we used previously in the tutorial. We get XML data using responseXML field of XmlHttpRequest object. We then use DOM methods getElementsByTagName() to extract “name” and “url” tags from content. Variable txt serves as a placeholder for building HTML table that will display fetched data. Finally, we set value of txt variable to be the HTML content of tag with ID “webSiteList”, which is defined on page.
This simple example shows how easy it is to process XML data with AJAX applications. Support for it is already built into JavaScript and XmlHttpRequest, and can be used fairly straightforward. In the next part, we will examine use of JSON, another popular data format.
[You can download the sample Web App here.][1]
[1]: http://beyondrelational.com/modules/12/tutorials/686/downloads/17763/ajax-sample-web-app-part-7.aspx