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">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>AJAX Demo</title>
        <script>
        function loadAjaxReponseJSON()
        {
        var xmlHTTPRequest;
        var txtToBeWritten,record,i;
        if (window.XMLHttpRequest)
          {// Validation for Internet Explorer 7 and upo, Firefox, Chrome, etc 
          xmlHTTPRequest=new XMLHttpRequest();
          }
        else
          {// Web browser is Internet Explorer 5 or 6 
          xmlHTTPRequest=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlHTTPRequest.onreadystatechange=function()
          {
          if (xmlHTTPRequest.readyState==4 && xmlHTTPRequest.status==200)
            {
            var jsonResponse = JSON.parse(xmlHTTPRequest.responseText);
            txtToBeWritten="";
            for (i=0;i<jsonResponse.records.record.length;i++)
              {
              txtToBeWritten = txtToBeWritten + jsonResponse.records.record[i].title + "<br>";
              }
            document.getElementById("AjaxResponseJSONHere").innerHTML=txtToBeWritten;
            }
          }
        xmlHTTPRequest.open("GET","AjaxJSONResponse.json",true);
        xmlHTTPRequest.send();
        }
        </script>
    </head>
    <body>
        <form id="form1">
            <br/>
            <h1>AJAX DEMO: JSON<h1>
            <h2>
            Display record titles:
            <input type="button" id="submit" value="Click Me!" onclick="loadAjaxReponseJSON()"/>
            <div id="AjaxResponseJSONHere">
            </div>
            </h2>
        </form>
    </body>
</html>

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

Wideskills