Beyond old school AJAX

In day-to-day AJAX programming I rarely see AJAX in its original "old school" incarnation. Strictly speaking, AJAX stands for Asynchronous Java and XML - but in today's practice the XML part is definitely getting more rare. In this article I describe a few AJAX patterns I've come across: Original AJAX, AJAX with JSON, AJAX with HTML, and AJAX with dynamic javascript.

Original AJAX

In the beginning, your web page would request additional data from the server and the server would respond with data encoded as XML. Your web page's javascript would then parse the xml and update the pages through the Document Object Model (DOM). Needless to say, this process was error prone and not light-weight. Parsing XML in your javascript isn't any fun, and explicitly manipulating the DOM keeps you in front of your javascript debugger longer than needed.

AJAX with JSON

In this method, the server returns JSON instead of XML. JSON is a much simpler data format than XML. Its easier to write and easier to read, but like Original AJAX you still have to update the DOM yourself. Individual programmer's solutions tend to be ad-hoc and consistency declines.

AJAX with HTML

In this method the server returns HTML instead of a data format such as XML or JSON. This method is easy enough for the novice programmer and is a worthy simplification. No more encoding and decoding data and performing ad-hoc operations on the DOM. With this method, the server generates the HTML with the data and the returned HTML replaces a portion of your page.

Server side generated HTML means that the dynamic action happens server side and your javascript remains blissfully simple - client side javascript only has to load in the HTML. But with simplification comes less power and flexibility. Your updates are limited to simple and one-at-a-time HTML substitutions. For example you wouldn't be able to update a shopping cart's price total in the upper-left corner and also add a line item in the main part of the page.

AJAX with dynamic javascript

This method is my personal favorite and makes more sense when you consider a hard-to-uncover limitation of "AJAX with HTML". Imagine you've been dynamically updating your page with "AJAX with HTML", and you decide to inject some HTML that also happens to contain some javascript. You're likely to get quite frustrated when you realize that your HTML was injected into the DOM, but the javascript inside your injected HTML was NOT executed by the browser. You've learned how much easier it is to generate the HTML server side, and now you want the javascript thats generated server side to also work.

Welcome to the "AJAX with dynamic javascript" solution. In this method you don't generate XML, JSON, or HTML server side. In this method you generate Javascript code. Again, no more encoding and decoding data - you simply use your server side scripting language to create dynamic javascript. This makes it easy to modify multiple elements on your page in one AJAX response. You have virtually the same freedom of Original AJAX but without its data encoding burden.

Learn some more

To learn more about the first three methods you can check out this: The AJAX response: XML, HTML, or JSON?. To learn more about the 4th method, you might consider diving deeper into Rails RJS templates - Rails RJS Templates

Posted by Jeffrey Hicks at 07:17 PM  Permalink

This is a public forum. CMP Media and its affiliates are not responsible for and do not control what is posted herein. CMP Media makes no warranties or guarantees concerning any advice dispensed by its staff members or readers.

Community standards in this comment area do not permit hate language, excessive profanity, or other patently offensive language. Please be aware that all information posted to this comment area becomes the property of CMP Media LLC and may be edited and republished in print or electronic format as outlined in CMP Media's Terms of Service.

Important Note: This comment area is NOT intended for commercial messages or solicitations of business.