RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Integrating AJAX Clients and RESTful Web Services : Page 2

The integration of AJAX clients and RESTful web services results in powerful yet straightforward service-oriented web applications.

AJAX and RESTful Integration Data Formats: Text, XML, or JSON
The simplest and most common format for data exchange probably still is plain, delimited text. JavaScript, just like Java or C#, has strong support for text parsing. So when results from RESTful web services are served as delimited text, you can easily parse, interpret, and dynamically inject them into online content through JavaScript. The XMLHttpRequest object supports text as a results output from a call to a URL, so you can extract plain text results without any special manipulation:

// 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[3];

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 addition, an AJAX application running on a browser platform that supports DOM (Document Object Model) for JavaScript can natively and easily consume XML-formatted messages and navigate through the content.

In the example below, an XML message with shipping information:

	   <status>in transit</status>

is parsed by JavaScript and navigated utilizing DOM objects:

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")[0].firstChild.nodeValue; 

The two concerns related to using XML for data exchange between AJAX front ends and RESTful web services are:

  1. Overhead associated with XML's tagged markup nature
  2. 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.

JSON (JavaScript Object Notation) is a text-based representation for JavaScript data objects. It is a lightweight alternative to XML and has become the format many JavaScript developers favor.

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.

On the front end of the AJAX application, JSON service responses can be easily parsed, evaluated, and assigned to textual variables using JavaScript's eval() function:

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.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date