Using the Http Framework to Avoid Caching
Browsers like Microsoft Internet Explorer cache the data you read from a server, which means that you often see the same data over and over when you try to download a URL. That’s a problem if the data from that URL has changed, as when a database has been modified and is sending you new data, but Internet Explorer displays the old, cached data. That’s only a problem with the GET method; the POST method shouldn’t be cached.
As discussed in Chapter 4, you can add the date to a URL to make Internet Explorer avoid caching data read from the server, and the Http framework does that for you.
| On the Web | You can get the Http framework for free at http://adamv.com/dev/javascript/http_request. Just download request.js and put it to work. |
Here’s an example called testHttp.html. This example downloads the following text from the server in a file named request.txt:
This text was downloaded with the Http framework.
You start, as before, with a button tied to a function-named useRequest in this case-and a <div> element in which to display the downloaded text:
<form> <input type = "button" value = "Display the text" onclick = "useRequest()"> </form> <div > <p>The fetched data will go here.</p> </div>
You’ll need the request.js library, so start by including that:
<html> <head> <title>Testing the Http Ajax framework</title> <script language="JavaScript" src="/books/1/252/1/html/2/request.js"></script> . . .
You can use the Http.get method in the useRequest function to connect to the server. Like some of the other frameworks in this chapter, the Http framework uses named parameters, so you set the URL to access request.txt like this:
<head> <title>Testing the Http Ajax framework</title> <script language="JavaScript" src="/books/1/252/1/html/2/request.js"></script> <script language = "javascript"> function useRequest() { Http.get({'url':'request.txt', . . . } </script> </head> You can set caching level to “no cache” to avoid caching in browsers like Internet Explorer:
<head> <title>Testing the Http Ajax framework</title> <script language="JavaScript" src="/books/1/252/1/html/2/request.js"></script> <script language = "javascript"> function useRequest() { Http.get({'url':'request.txt', 'cache':Http.Cache.GetNoCache, . . . } </script> </head> Following are the caching options:
-
Http.Cache.Get: Executes a normal request and does not add the result to the local cache. In Internet Explorer, requesting the same URL using GET multiple times causes Internet Explorer to cache the result internally.
-
Http.Cache.GetCache: Executes a request and caches the result if successful. If the requested URL’s response is already cached locally, do not execute the server request.
-
Http.Cache.GetNoCache: Executes a request and adds a time-based variable to the query string to force Internet Explorer not to cache the result. The result is not placed in the local cache.
-
Http.Cache.FromCache: Calls the supplied callback on the locally cached version if the requested URL’s response has already been cached.
Finally, you set the callback function like this:
<head> <title>Testing the Http Ajax framework</title> <script language="JavaScript" src="/books/1/252/1/html/2/request.js"></script> <script language = "javascript"> function useRequest() { Http.get({'url':'request.txt', 'cache':Http.Cache.GetNoCache, 'callback':callback}); } </script> </head> The other named parameter you can use with Http.get is method, which lets you set the HTTP method for accessing the server. You can set that parameter to GET or POST.
When you’re using the Http framework, the callback function is called with the XMLHttpRequest object. All you need to do is to use that object’s responseText property to retrieve the fetched text like this:
<head> <title>Testing the Http Ajax framework</title> <script language="JavaScript" src="/books/1/252/1/html/2/request.js"></script> <script language = "javascript"> function useRequest() { Http. 'cache':Http 'callback':callback}); } function callback(XMLHttpRquestObject) { document.getElementById("targetDiv").innerHTML = XMLHttpRquestObject.responseText; } </script> </head> And you’re done. You can see this non-caching page at work in Figure 6.8.
Figure 6.8: Downloading text with the Http Ajax framework
