XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.

advertisement

Remote Scripting with AJAX, Part 1

Remote Scripting with AJAX, Part 1

August 19, 2005

Editor's note: The content for this article was excerpted from Cameron's originally published article, which was posted on SitePoint's website last month. SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals, and is a distribution partner with O'Reilly Media.

This two-part series of articles covers remote scripting using the AJAX XMLHttpRequest protocol. Part one walks through an example application that demonstrates how to implement the protocol, while part two will show how to create a usable interface.

To begin, download the code archive, which contains all of the files you'll need to create the working examples presented here and for the upcoming second part of this series.

What Is Remote Scripting?

Essentially, remote scripting allows client-side JavaScript to request data from a server without having to refresh the web page. That's it. Everything else that goes into making a seamless web application draws upon the established methods of manipulating the Document Object Model.

However, remote scripting and seamless applications bring with them a host of problems from the desktop application design realm, making those same issues possible on the Web. It's your duty to ensure that your remote scripting interfaces address those issues, and give your users the best possible experience they can get.

Remote Scripting Using XMLHttpRequest

Although XMLHttpRequest is not a public standard, most modern browsers implement it consistently, and it's well on its way to becoming a de facto standard for JavaScript data retrieval. Internet Explorer 5 for Windows, Mozilla 1.0, Safari 1.2 and the upcoming version 8.0 of Opera all introduce XMLHttpRequest as an available object.

The Internet Explorer XMLHttpRequest API is available for download.

You can also download the Mozilla documentation.

If you require support for browsers that are older than these, methods using iframes provide a viable solution; however, coding for these browsers will also limit your ability to utilize standard JavaScript DOM methods. This article will focus on the more contemporary XMLHttpRequest method.

An Example Remote Scripting Application

In order to demonstrate how to use the XMLHttpRequest protocol inside of a remote scripting application, I've created a simple, one-page example. It assumes that JavaScript and XMLHttpRequest are available in order to make the code more readable, but in any real-world application, you should always check that XMLHttpRequest is available and have a fallback (i.e., normal form submission) where it is not.

The example application will allow the user to send a free ecard to a friend's email address. To do this, the user has first to enter a receipt number, which they received when they purchased goods previously, and which has since been stored in the database of ExampleCo. Then, the user must complete the remaining fields before the ecard is sent, entering the recipient's email address, the message, and the graphic image that will be used for the card:

Figure 1
Figure 1. Click for full-size image

Remote scripting is used for three actions in this example, to:

  • Minimize the waiting time for validation of the receipt number.
  • Automate the entry of retrieved data into the form once a receipt number has been validated.
  • Re-write the contents of the page once the ecard has been sent successfully.

Along with these actions, the example contains JavaScript, which validates the other form fields before submission, and allows the user to select an ecard graphic.

The example has been created in two separate versions. In this article, the first of these versions will demonstrate the implementation of the XMLHttpRequest protocol inside of an application, but it contains several less-than-desirable usability problems. These problems are tackled in the second example coming up in part two, which aims to highlight some of the issues that can be encountered as you move from a page-based application model towards a more dynamic and interactive environment.

Pages: 1, 2, 3

Next Pagearrow