Remote Scripting with AJAX, Part 1
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?
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
The Internet Explorer XMLHttpRequest API is available for download.
You can also download the Mozilla documentation.
An Example Remote Scripting Application
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:
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.
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.