AJAX and RESTful Integration Data Formats: Text, XML, or JSON
// parse the server response held in responseText
// and split the comma separated values into array values
var values = httpRequester.responseText.split(",");
//pick third value and insert into (X)HTML element messageBody using DOM
document.getElementById('messageBody').value = values;
For those uncomfortable with using plain text as a data interchange format, note that most of the well-known web service APIs such as Google's as well as AJAX frameworks readily consume or produce service invocation results as plain text. So although plain text may not be your first choice, it offers the benefit of AJAX natively consuming web services that produce plain text results.
XML, often called the lingua franca of information exchange, is an unwritten standard for a majority of information-integration services. RESTful web services, especially the Hi-REST version (see my first article on RESTful web services for an explanation of Hi-REST), use XML as the standard format for service input and output.
In order to simplify matters, RESTful web services (unlike SOAP web services) do not mandate XML results or inputs to be enveloped with special protocol-specific headers and message wrappers. This feature drastically simplifies the operations on the client by removing the need to preprocess the message headers and exposing the context of the message directly to the client's parser.
In the example below, an XML message with shipping information:
var xmlInfo = httpRequester.responseXML;
//get tracking_no using DOM. It is a single element, so go for text value of the first node
var trackingNo = xmlInfo.getElementByTagName("tracking_no").firstChild.nodeValue;
The two concerns related to using XML for data exchange between AJAX front ends and RESTful web services are:
- Overhead associated with XML's tagged markup nature
- Computational cost associated with parsing and tree navigation
To mitigate these concerns, keep your XML lean (if you can control it). Verbose or unnecessarily wrapped XML messages almost certainly will degrade the performance of an AJAX application on the browser.
This is how the shipment information in the XML message from the previous section would look if represented by JSON:
Curly braces delineate the structure of the objects, and key value pairs represent the object properties along with their states/values.
From a RESTful web services perspective, JSON simply is another text format with its own delineation rules. It requires no additional effort to produce service results in a JSON-compliant way. Furthermore, most versions of popular server-side languages such as Java and Ruby have native or third-party libraries readily available to facilitate conversion between JSON and language-specific data constructs.
var shipmentData = eval('('+httpRequester.responseText+')');
//access tracking number by dereferencing the value using the 'dot' notation
var tracking_no = shipmentData.shipment.tracking_no;
If you're interested in learning more about integrating an AJAX front end with JSON-based services, read the DevX article "Speed Up Your AJAX-based Apps with JSON" by Alessandro Lacava.