Creating a contacts application with part 1

In this tutorial, we’ll look at a new approach to building Web applications called AJAX. What’s so great about AJAX? Basically, you can create applications that don’t require users to continually reload Web pages. The AJAX approach isn’t suitable for every application but it can really enhance the user experience in simple applications.

The tutorial is split into two parts. In part 1, we’ll cover some of the theory behind AJAX and look at its advantages compared with server-side applications. You’ll see how we can work with XML content in the Web browser using JavaScript. We’ll cover:

• Understanding AJAX?
• Using the XMLHttpRequest object

In part 2, we’ll create a very simple AJAX address book application that takes its content from a series of XML documents. The application will display a list of contacts from an XML document. When the user clicks a contact name, we’ll load the details from another XML document and display them WITHOUT refreshing the page in the browser.

The application will use several different technologies. First, we’ll use JavaScript with the XMLHttpRequest object to load the content into our application. We’ll style the content with CSS and we’ll generate XHTML from the XML documents using XSLT (Extensible Stylesheet Language Transformations) stylesheets. If you’re not familiar with XSLT, it transforms a source XML document into a results document. In our case, we’ll use it to create XHTML from an XML document.

If you have a good understanding of the technologies involved in AJAX, you may want to skip part 1 and move straight to part two. However, stick around if you want a refresher or are new to the area. We’ll start with some of the theory behind AJAX.