Beginning Web Development, Silverlight, and ASP.NET AJAX

CHAPTER 11 ■ AJAX APPLICATIONS AND EMPOWERING THE WEB USER EXPERIENCE 271
Figure 11-7. Viewing several pictures from the server with tags
Writing the Forward-Caching Ajax Client
The principle behind the forward-caching Ajax client is very straightforward. You keep
track of the ID of the current image and provide buttons that allow you to add and
remove 1 from this ID. You then construct a URL to the image server, passing it the new
ID and getting the response. Then you download the images that are 1 and 2 more than
this value, as well as those that are 1 and 2 less than this value. When you call the URL
and download the images, the browser will cache them.
For example, if the current image is 100, and you move forward to 101, the page will
construct a URL call to the server asking for 101. If this has already been called, the
results will be cached, and the image loaded from the cache. It will also construct calls
to 102, 103, 100, and 99, and put the responses in the browser cache.
To do this, you need to use a slightly different technique from what you did in the
simple example. You’ll use two XMLHttpRequest objects: one with a callback that renders
the image, and one that doesn’t use a callback, but just gets the image and caches it.
Add a new HTML page to your application and call it AJAXPictureClient.htm. Change
the body of the application to contain a in which the image will be displayed, and
two buttons—one for moving forward and one for moving backward. Here’s the complete
markup, including the JavaScript event-handler function calls that handle loading the
page and clicking the buttons: