The X in AJAX Is For XML Right?

AJAX is generally accepted as asynchronous Javascript and XML. It is documented as such on Wikipedia. Although I've found that XML isn't the best choice in transmitting data with Javascript. I'll show you why. Lets look at my previous AJAX example. Here we sent just the text of the customer's name and then send back their address. We aren't even using XML. This is fine for this simple example, but what if you wanted to send and receive more complex objects? What if you wanted to send a list of first and last names and receive back all of the customer's information like birth date, color, sex, etc... You could make a delimited list. I shouldn't have to tell you why this is not a good idea, but if you need convincing read the Advantages of XML section of the Visual Basic® .NET Developer's Guide to ASP .NET, XML and ADO.NET.

XML does seem to be the logical choice and it's the X in AJAX! So if we have a list of objects that have a first name and a last name how do we get these to XML? In C# you can use the XmlSerializer and serialize your object into XML. Can you do this in Javascript? no. JavaScript doesn't have the extensive group of helper libraries like .NET has. So we have to serialize the object ourselves. Here are some examples: toXML and XmlSerializer. Ok so we can do some copy and paste and now we can send our list of first and last names to the web server.

Now when we get our response we will get more XML. We can use the XmlSerializer to deserialize the objects into Javascript objects, but that requires a schema. Instead we can use the XmlHttpRequest's responseXML property to get a document object that we can traverse to get our object.

              var xml=ajaxRequest.responseXML;
              var xmlArray=xml.getElementsByTagName("CustomerInfo");
              var customers=[];
              for (var i=0;i<xmlArray.length;i++) {
                var customer={};
                var ciNode=xmlArray[i];
                for (var j=0;j<ciNode.childNodes.length;j++)
                  customer[ciNode.childNodes[j].nodeName]=ciNode.childNodes[j].text;
                customer[i]=customer;
              }

This requires us to use DOM to move through the nodes and extract the data we are interested in and create an array of hash tables that represent our customers. XML is requires processing power to traverse through and is quite bulky running down the wire, but what else can we do? JSON!

JSON

As stated on JSON's website JSON is a subset of the object literal notation of JavaScript. What does that mean well it means that you can use the JavaScript interpreter to create objects from JSON. Why is that important? Because this means that using JSON will make your AJAX calls fast, small and most importantly very transparent to use. Take a look at the JSONized version of the above example:

  var customers=eval('('+ajaxRequest.responseText+')');

One line! It doesn't get much better then that. There has to be a downside right? Well it's really not that bad. If you want to send JSON strings to the web server you need to download the JSON library. just use the JSON.stringify on your object to send to the web server and you are all set. Now what about the web server side? If you are using .NET I like to use JSON.NET. You can also look at Scott Hanselman's Blog on a few other JSON serializers.

Summary

XML is not the right fit for JavaScript. I think we need to wipe our hands of AJAX and start web 3.0 with JavaScript with asynchronous notation transport, JANT!