First published by IBM developerWorks at http://www.ibm.com/developerWorks. Visit ibm.com/ developerWorks for more tutorials on open standard technologies, IBM products, and more.

Ajax and XML: Five common Ajax patterns
Helpful Ajax design patterns you can use today

Level: Intermediate

Jack D Herrington (jherr@pobox.com), Senior Software Engineer, Leverage Software Inc.

06 Mar 2007
Asynchronous JavaScript + XML (Ajax) was certainly the technology buzzword of 2006 and looksb to do just as well or better in 2007. But what does it really mean for your application? And which common architectural patterns are used widely in Ajax applications? Discover five common Ajax design patterns that you can use as a basis for your own work.

Sure, Ajax is the Web 2.0 buzzword that everyone wants associated with their site. But what does it really mean? And how are engineers integrating it into their sites at an architectural level. In this article, I cover the basics of Ajax and show some Ajax design patterns that have become proven best practice with Web 2.0 development.

To start, Ajax is just a buzzword that covers a set of technologies, including Dynamic HTML (DHTML) and the XMLHTTPRequest object. DHTML is a combination of three elements: Hypertext Markup Language (HTML), JavaScript code, and Cascading Style Sheets (CSS). Using JavaScript code on a Web page, you can change the page dynamically to add, remove, or change the content.

That’s the dynamic portion of DHTML. JavaScript code uses the XMLHTTPRequest object to request data from the server after the page has been loaded.

The combination of these two elements — requesting data from the server on the fly and changing the page to use the data — is the essence of what’s called Ajax and the dynamic nature of Web 2.0 sites.

But that doesn’t really tell you how these features are used in the real world and how you should use them on your site. For that, you need a set of simple design patterns. If you are unfamiliar with that term, it comes from the excellent book of the same name (see Resources). That book provided a set of implementation patterns for the common tasks that confront engineers. The book provided not just best practices for how to design systems but also a terminology that engineers can use to talk about their code.

This article presents five common Ajax design patterns. They vary in using HTML, XML, and JavaScript code to get data from the server. I start with the simplest pattern, which is to update your page with new HTML from the server.

Pattern 1. Replacing HTML segments
Perhaps the most common Ajax task is to request updated HTML from the server and update a