Trademarks: Page 6 of 6

String

As mentioned before, an XMLHttpRequest could receive plain text as a response: a word, a letter, a complete sence, and text with special encoding. To access this response you have to use a property called: responseText.

This method would be used for receiving short fragments of information or as we will see next, JSON objects.

JSON

JSON stands for JavaScript Object Notation which is a data interchange format. It is now widely adopted as a way to handle responses from server, since it is a simple encoding that allows human and machines to read it easily.

In our tutorial, as I briefly mentioned before, a JSON response is actually a text response, so you should use the responseText property to access it. Once you have it available, you could use multiple JSON libraries to parse it, and perform any operation needed based on the information received.

For more information about JSON, you could visit: http://www.json.org/

AJAX Response Text Example

Let’s create a simple AJAX example now, with what we have seen so far.

First let’s create a folder called Ajax inside the ROOT folder of the Apache Tomcat, and create a new html document that we will use for testing our Ajax development. I have called SimpleAjaxDemo.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 loadAjaxReponseText()

              {

              var xmlHTTPRequest;

              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.open("GET","AjaxTextResponse.txt",false);

              xmlHTTPRequest.send();

              document.getElementById("AjaxResponseTextHere").innerHTML=xmlHTTPRequest.responseText;

              }

              </script> 

       </head>

       <body>

              <form id="form1">

                     <h1>AJAX Demo </h1>

                     <br/>

                     <h2>ResponseText:

                     <br/>

                     Please click on the button:

                     <input type="button" id="submit" value="Click Me!" onclick="loadAjaxReponseText()"/>

                     <div id="AjaxResponseTextHere">

                     </div>

                     </h2>

              </form>

       </body>

</html>

 

Now, let’s create a new file that will contain the AJAX response, this file should be called: AjaxTextResponse.txt.

Ajax Text Response

 

Once we have these two files, let’s open a web browser and go to the following URL: http://localhost:8080/Ajax/SimpleAjaxDemo.html

You should see a page like this:

 

 

If you click on the Click Me! button, the magic of AJAX is displayed. A new line should be shown displaying the response we define in the AjaxTextResponse.txt file:

 

Like us on Facebook

Wideskills