08 - AJAX and JSON Example

Let’s create a new document in the Ajax folder to return our data in JSON format: AjaxJSONResponse.json.

  "records": {
    "record": [
        "from": "John Doe",
        "to": "Everyone",
        "title": "Keep this record",
        "description": "This is the first of many XML records"
        "from": "Gabriel J",
        "to": "Jhon Doe",
        "title": "Important message",
        "description": "Please read this message"
        "from": "John Doe",
        "to": "Gabriel J",
        "title": "Re: Important message",
        "description": "Yes, I have read it!"

If you look closely, you should see that this is a similar representation as the XML we had in our previous example, in fact, it’s the same information but in a different notation.

So let’s create a copy of our XMLAjaxDemo.html and create a new one called: JSONAjaxDemo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>AJAX Demo</title>
        function loadAjaxReponseJSON()
        var xmlHTTPRequest;
        var txtToBeWritten,record,i;
        if (window.XMLHttpRequest)
          {// Validation for Internet Explorer 7 and upo, Firefox, Chrome, etc 
          xmlHTTPRequest=new XMLHttpRequest();
          {// Web browser is Internet Explorer 5 or 6 
          xmlHTTPRequest=new ActiveXObject("Microsoft.XMLHTTP");
          if (xmlHTTPRequest.readyState==4 && xmlHTTPRequest.status==200)
            var jsonResponse = JSON.parse(xmlHTTPRequest.responseText);
            for (i=0;i<jsonResponse.records.record.length;i++)
              txtToBeWritten = txtToBeWritten + jsonResponse.records.record[i].title + "<br>";
        <form id="form1">
            <h1>AJAX DEMO: JSON<h1>
            Display record titles:
            <input type="button" id="submit" value="Click Me!" onclick="loadAjaxReponseJSON()"/>
            <div id="AjaxResponseJSONHere">

Now let’s go over some of the differences:

- we use the responseText property instead the responseXML property. JSON is an object representation in a string.

- Instead of using DOM functions to access the content of the response, we can use json object as a regular object and access each property.

Let’s open the following web page: http://localhost:8080/Ajax/JSONAjaxDemo.html

Once we click on the Click Me! button, you will see the same result as our previous demo and the record’s title should be displayed.

Like us on Facebook