JAVASCRIPT

AJAX with JSON

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.

Author Info:

By: Jayaram Krishnaswamy

Poor Best

Rating:

/ 20

March 12, 2007

TABLE OF CONTENTS:

<HTML>
<HEAD>
<TITLE>AJAX with JSON</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) {  

//document.write(xhr.responseText);
alert("Status OK");

var jsonT = eval('('+ xhr.responseText +')');

 document.write ("jsonT.wclass.length= " + jsonT.wclass.length);
document.write("<br/>");
document.write("jsonT.wclass[0].name"+ jsonT.wclass[0].name);
}  }
}
</script>
</head>
<BODY> 
<INPUT type="button" id=button2 
onclick="getPage ('http://localhost/JSONWebStudents.txt')"  
value="Get JSON" />
</BODY> 
</HTML>

The response from the server xhr with its responseText property is evaluated using the JavaScript eval() function which evaluates whatever is given as its argument. It converts the JSON Text to a JSON object (jsonT). With the object in the hand it is easy to recover the values using the dot notation as shown in the two document.write() statements that follow the eval(). The resulting display when the above file is browsed is shown in the next picture. It will be helpful to read the earlier tutorial JSON Basics.