Laith Zraikat

I Innovate, Therefore I Am.

AJAJ (Asynchronous JavaScript and JSON)

JSON (JavaScript Object Notation) is gaining wide appeal as an alternative to XML for transporting data objects between applications. In fact a JSON is closer than XML to transporting true data objects because it is more object oriented and can be mapped more easily to object oriented systems. Being a subset of JavaScript, JSON can be understood by any C-based programming language, and is almost language independent.

With XML you had to serialize the object on the server, send to the client, and then de-serialize on the client to get the object –that’s if you were using SOAP. Without using SOAP, you will have to write more code to parse the incoming XML. With JSON, all you have to do is send the text from the server, compile it on the client and you end up with an object.

Example:

Suppose we wanted to send a message from the server to the browser using asynchronous callback, we have the option of sending it as XML or JSON (and of course we can always use plain text)

XML:
<Messages><Msg><Type>1</Type><Text>Hello JSON!</Text></Msg></Messages>

JSON:
{"Msg": [{"Type": "1", "Text": "Hello JSON!"}]}

To parse the Data and display the message, you'll have to use a different approach for each:

XML: We have to parse the XML as text, and even then it remains text as we go through it.

Asynchronous callback code.....
.
.
var ResponseXML = myHTTPRequest.responseXML();
var Messages = ResponseXML.getElementsByTagName("MSG");
var MessageText;
var MsgType;
for(var i=0; i< Messages.length; i++) {
MsgType = Messages [i].getElementsByTagName("Type")[0].childNodes[0].nodeValue;
MessageText = Messages [i].getElementsByTagName("Text")[0].childNodes[0].nodeValue;
document.write(MsgType +','+ MessageText);
}

JSON: Simply run the text through the compiler. After that, you're dealing with an object not text.

Asynchronous callback code.....
.
.

var ResponseText = myHTTPRequest.responseText();
var Messages = eval( '(' + ResponseText + ')' );
var MessageText;
var MsgType;
for(var i=0; i< Messages.MSG.length; i++) {
MessageText = Messages.MSG[i].Text;
MsgType = Messages.MSG[i].Type;
document.write(MsgType +','+ MessageText);
}

Notice that the JSON form is shorter in terms of amount of text sent to the browser and simpler in terms of the code needed to extract the data. Using JSON in this manner also happens to be much faster because instead of parsing text –which we know is a very intensive process- in the case of XML, we are simply compiling it using the eval function which is extremely fast.

However, there are security issues associated with using JSON, namely, the risk of cross-site-scripting. If an attacker sends malicious code as JSON, this code will be activated once it is compiled on the client and can potentially be used to hijack a user's session for example.

What I like about JSON is its simplicity. You can transport an entire data table or even a dataset as text, and convert it into a true data object in one step. It is very promising and threatens to overthrow the X in AJAX.



Add a Comment