You have already seen how the server can generate a response
in a JSON string object format. Now it is time to know how to consume the JSON
string object on the client side that is how to parse the JSON string object
into a real JSON object to be accessed as a normal object you would access in
an Object Oriented Programming Language.
I will demonstrate to you an ajaxified example that will
send an asynchronous request to the server and then processes the response from
the server, assuming that the server will respond by formatting the data in a
JSON fashion.
Listing 9
function ReadyStateChangeHandler()
{
if (xmlHttpRequest.readyState == 4)
// Completed {
if (xmlHttpRequest.status == 200)
// Response OK {
// Process data
var jsonStringObj = xmlHttpRequest.responseText;
// Parse the JSON string object to a real JSON object
var jsonObj = jsonStringObj.parseJSON();
// display some data
alert("Person ID: " + jsonObj.ID.toJSONString());
}
else
{
alert("Error: HTTP " + xmlHttpRequest.status + " " +
xmlHttpRequest.statusText);
}
}
}The above JavaScript function is usually used to fire when a
response is ready from the server. Assume that xmlHttpRequest is a valid
instance of the XMLHttpRequest object that has been used to send an
asynchronous request to the server, the code first checks if the readystate of
the xmlHttpRequest object is 4; a value of 4 means that the request has
completed.
Once we are sure the request has completed, we check if the
response status from the server is OK. OK means that there was no problem in
processing the request and a valid response has been generated by the server.
The status of the response has the value of 200 and the description of that
status is OK.
If the above two steps were completed successfully, then the
code can safely process the response from the server. Assuming the response
from the server is formatted in a JSON string object, the code first grasps the
response text by using the XMLHttpRequest property called responseText. Once
the text is available, the code parses the response text using the parseJSON()
function. This function will convert any well-formatted JSON string object into
a JSON object.
Once we have a valid JSON object, we access the object
properties the same way we access any C# or VB.NET object, by simply specifying
the object name, a “.” and the name of the property.
Yahoo!! That is it!! The code alerts the ID of the Person
object that was generated on the server in both Listings 7 and 8.
Wait a moment, did you ask yourself where did the parseJSON()
and toJSONString() methods come from? Well, those are two major functions among
other useful functions that have been prepared by the JSON team. The JSON team
prepared a JavaScript utility file named json.js that you need to include into
your pages if you are going to use any of those methods. It is recommended to
use the methods since they can make your life easier when it comes to
processing JSON string objects, arrays and other JSON data types on the client
side.
To download the JavaScript utility file, follow this link: http://www.json.org/js.html. On this
page you can find an extensive examination of all the available methods ready
for you to use out of that great and helpful utility file.
