Introducing JSON
page 6 of 9
by Bilal Haidar
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 48057/ 80

How to consume JSON on the client side

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.


View Entire Article

User Comments

Title: www   
Name: ww
Date: 2012-12-17 2:41:58 AM
Comment:
www
Title: Argument for Gun Control   
Name: Rick
Date: 2012-12-14 10:19:16 PM
Comment:
Time to take the guns away from the crazies
Title: demo   
Name: vishal
Date: 2012-11-30 7:20:06 AM
Comment:
i am new user....
Title: jason verification   
Name: madhan
Date: 2012-09-13 3:14:23 AM
Comment:
I need to check the jason
Title: fsgfds   
Name: sdfg
Date: 2012-08-15 3:06:30 PM
Comment:
fsdg
Title: dsavsd   
Name: vsdv
Date: 2012-07-10 7:14:56 AM
Comment:
lknvlksndv
Title: m,.,   
Name: ,m.,m.
Date: 2012-06-13 12:30:17 AM
Comment:
,m.,m.
Title: Re: Thanks   
Name: Bilal Haidar
Date: 2012-06-12 9:03:50 AM
Comment:
Most welcome Salman :)
Title: Thanks   
Name: Salman ansari
Date: 2012-06-12 8:59:06 AM
Comment:
Thankyou very much......very useful to me on learning stage of JSON
Title: answer to the query from DHEERAJ   
Name: isha
Date: 2011-05-06 2:05:06 AM
Comment:
cut and paste the 2 lines of code ie.
var postRequest = new HttpRequest();
postRequest.failureCallback = requestFailed; inside the function getemployeedetails on the default.js page in the beginning. Apllication runs fine then. thank you
Title: answer to the query from DHEERAJ   
Name: isha
Date: 2011-05-06 2:03:11 AM
Comment:
the query that dheeraj has asked, i faced the same. it is not the issue of IE7. if u check the Default.js page, there u will find 2 lines of code ie.
var postRequest = new HttpRequest();
postRequest.failureCallback = requestFailed;
written above the function getEmployeedetails().
please cut and paste these 2 lines inside this function in the beginning. the application runs fine then. thank you for this amazing application for beginners in JSON/JQUERY
Title: Best Tutorial   
Name: Yogesh Nandre
Date: 2011-01-20 2:35:00 AM
Comment:
Best due to very easy to learn for new one...
Title: Thank You   
Name: Suresh
Date: 2010-12-06 6:26:19 AM
Comment:
Very nice stuff
Title: Json   
Name: Wilmer Ferreira
Date: 2010-09-06 4:16:52 PM
Comment:
In Visual Studio 2010 exits the System.Runtime.Serialization.Json namespace
Title: JSON   
Name: Reshma
Date: 2010-09-06 3:52:38 AM
Comment:
This article gives me very useful and functionality information about json..
Title: JSON   
Name: Vikas
Date: 2010-05-19 12:22:22 AM
Comment:
This article provides me with the great help on what i needed the most
Title: JSON   
Name: Leela
Date: 2010-03-16 12:47:50 AM
Comment:
This article is very useful.
I am a beginner in .NET and i find many useful things ..)
Thankyou
Title: QUERY   
Name: DHIRAJ
Date: 2009-11-30 1:24:26 AM
Comment:
THERE IS SOME ERROR IN THIS ARTICLE. IF WE SELECT ANY NAME FROM DROPDOWNLIST IT DISPLAYS THE RECORD BUT IF WE SELECT ANOTHER NAME FROM DROPDOWNLIST IT DOES NOT DISPLAYS ANY RECORD.

Plz let me know on my email id:
dhiraj.pandey@nagsoft.com,dhirajkumarpandey@ymail.com
Waiting for ur reply on urgent basis....
Title: Re: IE7 issue   
Name: Martin
Date: 2008-04-04 2:10:49 AM
Comment:
Ok, but what can I do to make it work in IE7 ? I tryed to set postRequest = null; in the GetEmployeeDetails() method but then it turns back with an error ?
Title: Re:   
Name: Bilal Haidar [MVP]
Date: 2008-04-04 2:04:17 AM
Comment:
This is not a problem in the code! I once asked about that and they said it is an IE issue!! Didn't check later what they have done to solve it!

Thanks
Title: IE7 issue   
Name: Martin
Date: 2008-04-04 1:42:19 AM
Comment:
Hi,

I just downloaded the demo app and tested it in IE7 and when i select an "employee" from the dropdown list it shows up as expected, but when I try to choose another one from the dropdown nothing happens, is there an bug in the code ?
Title: Re:   
Name: Bilal Haidar [MVP]
Date: 2007-05-19 2:41:45 AM
Comment:
Yes it is :)

Regards
Title: Where is Jason?   
Name: AbsCoder
Date: 2007-05-18 6:16:26 PM
Comment:
Thanks for the article; good stuff. In the article you make mention twice of "great JSON DLL that is called Jason.NET". Perhaps, I'm dense, but I can't seem to locate said DLL. Do you mean Newtonsoft's Json.NET library? Again, thanks for your contribution to the community!






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-06-14 3:49:02 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search