Working with Ajax and Head Requests

Up to this point, you’ve used the GET and POST HTTP methods to interact with the server, but there are other methods as well, such as the HEAD method, which retrieves data about documents on a server. You can make a HEAD request just by using "HEAD" as the HTTP method to interact with the server.

Getting all head data

Take a look at the example Figure 4.10, which is making a HEAD request for the file data.txt on the server. You can see a wealth of information returned from the server in the figure.

Figure 4.10: A HEAD request

Here’s the data returned from this HEAD request on data.txt:

 Server: Microsoft-IIS/5.1 Date: Tue, 08 Aug 2006 17:21:43 GMT Content-Type: text/plain Accept-Ranges: bytes Last-Modified: Thu, 28 Jul 2006 16:29:44 GMT ETag: "94125909193c51:9c9" Content-Length: 38

As you can see, a HEAD request gives you data about the server as well as about the document you’re accessing.

This example, head.html, works by sending a HEAD request this way:

 function getData(dataSource, divID) {   var XMLHttpRequestObject = false;   if (window.XMLHttpRequest) {     XMLHttpRequestObject = new XMLHttpRequest();   } else if (window.ActiveXObject) {     XMLHttpRequestObject = new      ActiveXObject("Microsoft.XMLHTTP");   }    if(XMLHttpRequestObject) {      XMLHttpRequestObject.open("HEAD", dataSource);     XMLHttpRequestObject.onreadystatechange = function()     {       if (XMLHttpRequestObject.readyState == 4 &&         XMLHttpRequestObject.status == 200) {           .           .           .       }     }     XMLHttpRequestObject.send(null);   } }

To retrieve the HEAD data, you use the XMLHttpRequest object’s getAllResponseHeaders method like this:

 function getData(dataSource, divID) {   var XMLHttpRequestObject = false;   if (window.XMLHttpRequest) {     XMLHttpRequestObject = new XMLHttpRequest();   } else if (window.ActiveXObject) {     XMLHttpRequestObject = new      ActiveXObject("Microsoft.XMLHTTP");   }   if(XMLHttpRequestObject) {     var obj = document.getElementById(divID);     XMLHttpRequestObject.open("HEAD", dataSource);     XMLHttpRequestObject.onreadystatechange = function()     {       if (XMLHttpRequestObject.readyState == 4 &&         XMLHttpRequestObject.status == 200) {           obj.innerHTML =             XMLHttpRequestObject.getAllResponseHeaders();       }     }     XMLHttpRequestObject.send(null);   } }

And that’s all you need. Now the HEAD information is displayed in the Web page.

Getting specific head data

The getAllResponseHeaders method is a good one for getting all response headers, and there’s also a method for getting just the particular response header you’re interested in, getResponseHeader. For example, you might want to find the date a file, such as data.txt, was last modified. And you can do that with the Last-Modified header.

Take a look at headdate.html in Figure 4.11, which gets the Last-Modified header for data.txt.

Figure 4.11: Getting specific HEAD data

This example simply gets the HEAD data for the data.txt file and then uses getResponseHeader method to get the Last-Modified data:

 function getData(dataSource, divID) {   if(XMLHttpRequestObject) {     var obj = document.getElementById(divID);     XMLHttpRequestObject.open("HEAD", dataSource);     XMLHttpRequestObject.onreadystatechange = function()     {       if (XMLHttpRequestObject.readyState == 4 &&         XMLHttpRequestObject.status == 200) {           obj.innerHTML =              "The file data.txt was last modified on " +              XMLHttpRequestObject.getResponseHeader(                 "Last-Modified");       }     }       XMLHttpRequestObject.send(null);     }   }

You can see the results in Figure 4.11.