Indicating Background Loads
Many AJAX applications use the asynchronous nature of the XMLHttpRequest object to download data from the web server in the background and update parts of the web page based on the downloaded content. These operations often are triggered by the user with one of the following actions:
- Clicking an interactive element. For example, when you click a major category heading in the Frequently Asked Questions application, the question headers in that category are downloaded.
- Entering a value that needs to be saved. This happens when saving photo captions in Picasa, for instance.
In both cases, if an output element will receive the results of the download, I highly recommend placing a ... loading ... indicator in that element while the download is taking place, to inform the user that the request has been received and is being processed. If the results of the web request are not displayed (for example, the web request was used solely to save an input value on the server), it’s best to display the indicator (for example, a SPAN element with ... loading ... text) next to the input field that was changed. Last but not least, if the output element already has content, it might be advisable to retain that content during the web request, overlaying it only with an absolutely positioned opaque DIV element, as described in "Build Modal Dialogs into your Web Application."
A simple loading indicator has been added to the getContentFromURI function in my AJAX library. To implement it, replace the content of the target element (the element that will receive the downloaded content) with the following HTML markup:
<img src=’smallLoading.gif’>Loading, please wait
Furthermore, the loading CSS class is added to the target element to allow you to implement desired formatting changes that appear only when the indicator is displayed. You can test this functionality in the updated Frequently Asked Question page; it’s used whenever you open a new category to download the headers of its questions, as well as when the answer is loaded following a click on a question.