AJAX with JSON
(Page 1 of 4 )
In my previous article I discussed some of the basics of JSON, the JavaScript Object Notation. It is an object literal notation well suited for data exchange. The object and arrays of JSON are very similar to real world data representation in many programming languages and this makes it a natural competitor with the more ubiquitous XML.
Add to this the fact that it carries the same message in a smaller size and you will realize the impact it will have on transporting the data. As far as structure and usage are concerned both have similar characteristics, including the response to XMLHttpRequest which has made AJAX so popular. This article will demonstrate retrieving JSON text using AJAX and retrieving values by evaluating the returned text.
Retrieving XML using AJAX
Here is the summary and results from the article XML Responses and AJAX. Herein an AJAX call is made to the URL to get the contents of the webstudents.xml which is shown here.
<wclass>
<!--My students who took web programming class with me-->
<student id="1">
<name>Linda Jones</name>
<legacySkill>Access, VB5.0</legacySkill>
</student>
<student id="2">
<name>Adam Davidson</name>
<legacySkill>Cobol, MainFrame</legacySkill>
</student>
<student id="3">
<name>Charles Boyer</name>
<legacySkill>HTML, Photoshop</legacySkill>
</student>
</wclass>
The AJAX call was made using the following code. This is just vanilla AJAX without the use of any other libraries.
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var xhr = false;
function getPage (url) {
xhr = false;
//this is the Microsoft browser compatible instantiation
//of XmlHttpRequest
xhr = new ActiveXObject("Msxml2.XMLHTTP");
if (!xhr) {
alert ('XMLHttp failed to instantiate');
return false;
}
xhr.onreadystatechange = statusCheck;
xhr.open ('GET', url, true);
xhr.send (null);
}
function statusCheck() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//alert(xhr.responseText);
// document.getElementById("x1").innerHTML=xhr.responseText;
document.getElementById("x1").innerHTML= xhr.responseXML.
getElementsByTagName('student')[0].firstChild.xml
//responseXML document's firstChild and lastChild
document.getElementById("x2").innerHTML= xhr.responseXML.
documentElement.firstChild.nodeName
document.getElementById("x3").innerHTML= xhr.responseXML.
documentElement.lastChild.nodeName
//responseXML's firstChild and lastChild
document.getElementById("x4").innerHTML= xhr.responseXML.
firstChild.nodeName
document.getElementById("x5").innerHTML=xhr.responseXML.
lastChild.nodeName
//documentElement's Children property, second child
document.getElementById("x6").innerHTML= xhr.responseXML.
documentElement.childNodes.item(3).text
document.getElementById("x7").innerHTML= xhr.responseXML.
documentElement.childNodes.item(3).attributes[0].name
document.getElementById("x8").innerHTML= xhr.responseXML.
documentElement.childNodes.item(3).attributes[0].value
//accessing student nodes as a collection
var nodes=xhr.responseXML.getElementsByTagName
("student");
document.getElementById(9).innerHTML=nodes.length;
for (i=0; i<nodes.length; i++)
{
document.getElementById(10+i).innerHTML=
nodes.item(i).text;
}
alert (xhr.responseXML.xml)
} else {
alert ('The request could not be fulfilled.');
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT id=button2 onclick=
"getPage ('http://xphtek/TestXMLHttp/WebClass.xml')" type=button
value="Get the XML Document" name=button2>
<P> </P>
<div id=x1></div><div id=x2></div>
<div id=x3></div><div id=x4></div>
<div id=x5></div><div id=x6></div>
<div id=x7></div><div id=x8></div>
<div id=9></div><div id=10></div>
<div id=11></div><div id=12></div>
<div id=13></div>
</BODY>
</HTML>
Once the document is retrieved it is processed using the XMLDOM API and the ECMA script. The ECMA script retrieves the DOM elements and inserts them into the <div/> elements of the HTML page. In the next section we will see how it is done using the JSON subset.
Next: Retrieving JSON Text using AJAX >>
More JavaScript Articles
More By Jayaram Krishnaswamy
/ 8 
