Beginning Web Development, Silverlight, and ASP.NET AJAX

CHAPTER 11 ■ AJAX APPLICATIONS AND EMPOWERING THE WEB USER EXPERIENCE 273
}
ajaxRequest.onreadystatechange=DisplayPic;
ajaxRequest.send();
This is a simple Ajax function, constructing a URL to the GetPicture service using
the value that was passed into it. It performs an HTTP-GET to that URL, and specifies
DisplayPic as the callback function for state changes.
The DisplayPic function then checks for readyState being 4 (i.e., download complete),
and loads the with an tag pointing to the same URL. As the image
has already been downloaded, it will be instantly pulled from the cache. Note that the
browser looks at the URI of a resource and determines if the current version is cached.
If it is, it loads it from the cache; if it isn’t, it downloads it.
function DisplayPic()
{
var divPic = document.getElementById("pic");
if(ajaxRequest.readyState == 4)
{
divPic.innerHTML = "";
}
GetPic(currentPic+1);
GetPic(currentPic+2);
GetPic(currentPic-1);
GetPic(currentPic-2);
}
In addition to this, it also calls the GetPic function, which kicks in the second Ajax
function. This simply downloads (but doesn’t display) the graphics. It calls this function
four times, for currentPic+1, currentPic+2, currentPic-1, and currentPic-2. Many of these
images will already be cached, so the call will be quick. This function could probably be a
little smarter, but for the sake of simplicity, the brute-force method is used here.
The GetPic function is a standard Ajax call, but no callback is needed, as the image
will not be rendered.
function GetPic(thisPic)
{
}
theCachedURL = "GetPicture.aspxpicid=" + thisPic;
cachedAjaxRequest.open("GET", theCachedURL);
cachedAjaxRequest.send();