Dynamic Webpages with JSON

A JSON-based design approach lacks AJAX's cross-domain restrictions

Making asynchronous HTTP requests from Webpages is an effective technique in bringing seemingly static pages to life. Asynchronous JavaScript and XML (AJAX) has become a popular technology in creating richer and more dynamic Web clients, and is often used to incorporate desktop features in the browser. However, the usual XMLHttpRequest-based AJAX clients suffer from the limitation of only being able to communicate to the server from where they are downloaded. This becomes problematic for deployment environments that span multiple domains. In addition, developers end up writing browser-specific code since each of the main browsers implements this XML request object differently.

In this article, we describe an approach based on JavaScript Object Notation (JSON) that, in the spirit of Web 2.0, makes it easy to build mashup applications without the cross-domain and cross-browser limitations of AJAX. We discuss why the JSON-based approach is elegant in adding asynchronous features to Webpages and also mention some server-side utilities that can be used to generate JSON data.

Web 2.0

The way people interact on the Web has changed drastically. Many Web applications currently being developed are open, collaborative, and in perpetual beta. Characteristics like these define "Web 2.0," with one of its more important characteristics being a rich browser client—one that resembles traditional desktop applications. Client-side technologies like JavaScript, which were relegated to doing menial client-side tricks/validations, have come to prominence and are playing an important role in delivering a richer experience to Web users. It seems the industry has found a new respect for JavaScript, and the AJAX technology has played a significant role in making this happen.

AJAX

There are several good resources on the Web about AJAX, but for the sake of completeness and setting the stage, we describe the technology briefly here: AJAX is a Web development technique for creating interactive Web applications. The intent is to make Webpages more responsive by exchanging small amounts of data with the server behind the scenes, so the entire Webpage does not have to reload each time the user makes a change. Thus, the Webpage's interactivity, speed, and usability are increased. This technology has been effectively used in numerous showcase applications on the Web, with Google Maps being a prime example.

While using AJAX to develop an application that required the delivery of asynchronous features to Webpages across multiple domains, we ran into a limitation that led us to research alternative methods for delivering the promise of AJAX. We found an approach that addresses the cross-domain issues, helps with the cross-browser compatibility issues, and delivers some additional benefits as well.

Cross-domain issues with AJAX

Our project involved adding dynamic features to Webpages that were delivered by servers in different domains. An example of such a service that may need to work across domains is an employee directory service that can asynchronously be invoked from Webpages on a company's intranet and Internet domains. Our idea was to use a consolidated services model, which would be unintrusive for the owners of the Webpages. Additional complexity arose because the Webpages were delivered by different technological platforms. Thus, our approach had to work with Webpages generated by a combination of dynamic and static technologies.

JavaScript-based AJAX seemed a good approach until we hit the limitation of AJAX clients only being able to communicate to the server from where they are downloaded, thus adhering to the "same origin policy." Since we wanted to have the AJAX service running on a server in one domain and invoked using JavaScript from Webpages served in different domains, this limitation prompted us to look elsewhere. We ultimately found that a JSON-based approach employs a clever technique to asynchronously bring dynamic features to Webpages that span multiple domains.

Figure 1. Click on thumbnail to view full-sized image.

In fact, there are two considerable drawbacks with using the standard AJAX solution. First, it creates a cross-domain issue that would limit how content is disseminated using your AJAX solution. In Figure 1, the pages are served from different domains, and the arrow in blue depicts how the AJAX-generated content can be downloaded only from the domain that the page was originally downloaded from. Second, since the browsers implement the XMLHttpRequest object differently, the JavaScript code must be coded to work in different browsers.

1 2 Page 1
Page 1 of 2