Ajax with JSON ...

AJAX - Asynchronous Javascript and XML is known to IE as ActiveX XMLHTTP object and to the other browsers as XMLHTTPRequest. Ajax uses JavaScript on the page to send requests to a Web server for data. Those requests are HTTP requests just like the one the browser used to retrieve the page. This XMLHttpRequest object can be used to retrieve any kind of data, not just XML. JavaScript can use XMLHttpRequest to retrieve even a plain text file from a Web server and display its contents within a form.

* If it is a plain text, you can access the text by examining the XMLHttpRequest object’s responsetext property.

* If it’s an XML, the XMLHttpRequest object runs an XML parser on the returned document and builds a DOM tree in memory representing the document, and makes that available in the responseXML property.

We know that JSON is just a string of text and not an object in and of itself. So, to make it useful, it has to be converted into a JSON object.

Save the below code in JSON.txt

Ex:

var objResult = {"Results":
{”Teachers” : [
{"firstname": "aaa" ,
"lastname" : "h" ,
"email" : "sdfsf@sd.com" ,
"Phone" : 234234234},
{"firstname": "bbb" ,
"lastname" : "t" ,
"email" : "sdfsf@sd.com" ,
"Phone" : 435345345},
{"firstname": "ccc",
"lastname" : "e" ,
"email" : "sdfsf@sd.com" ,
"Phone" : 564564564},
{"firstname": "ddd" ,
"lastname" : "t" ,
"email" : "sdfsf@sd.com" ,
"Phone" : 343465645}
]
}

}

By using the XMLHttpRequest object, you can retrieve the JSON files from within your AJAX-based application. Hope you know how to create an xmlhttp object for all browsers, I’m moving on to the next step of retrieving the JSON data.

xmlhttp.open(”GET”, “JSON.txt”, true);
xmlhttp.onreadystatechange = callback;
xmlhttp.send(null);

The javascript object which is created on the client side is sent via GET or POST method by assiging the JSON string to a variable. The URL-encoded JSON string to the server as part of the HTTP Request. It can also be sent as raw text using the POST method.

function callback()
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
eval(xmlhttp.responseText);
var showResult = “”;
for (var i=0; i < objResults.Results.Teachers.length; i++)
{
showResult += objResults.Results.Teachers[i].firstname+ ” ” +
objResults.Results.Teachers[i].lastname + “<br>”;
}
//To display the result in a div
var teacherdiv= document.getElementById(”teacherdiv”);
teacherdiv.innerHTML = showResult;
}
}
}

eval(xmlhttp.responseText);

eval() invokes the JavaScript compiler. Since JSON is the subset of Javascript, any Javascript compiler is a JSON decoder. It willcorrectly parse the text and produce an object structure. eval() converts the JSON text into JavaScript Object. It tells the Javascript to treat the elements as Name/value Pair. Here, the JSON response comes from the same server. So, there eval() itself is safe to use. If the respose comes from a different server, the parseJSON() should be used.

The next 3 lines of code is to Iterate through the Teachers object array. After parsing each property into a string, the result is displayed in a div.



JSON on the Server Side:

The JSON data can be sent to the server as a name/value pair via GET method. Now, we have a stringified object. To make use of that in the server side, you have to decode the incoming JSON string and convert the result to an object using a JSON parser for the language of your choice.

After doing your server side coding by keeping the response ready, again create an object to store the response data to send the JSON data back to the client. Convert that object to a string and send the string back to the client as a response body. In .NET,

Response.Write(jsonData);

After getting the response from the server side, convert the incoming JSON string into an object again using Javascript JSON parser and proceed whatever you wish to do with that data.

JSON is faster to parse and more easier than XML. JSON being a lightweight data interchange format makes server side class’ objects easily parseable by client side code to show output on browser.

Hope I have given a clear gist of JSON which would have helped you to start developing your web app with JSON. So, be ready to use JSON for your next web2.0 application.

source: pavithra.wordpress

 View Full Story.