AJAX In Action [36]
An HTTP request is mostly composed of headers, with the body possibly containing some data or parameters. The response typically contains the HTML
markup for the returning page. A useful utility for Mozilla browsers called LiveHTTPHeaders (see the Resources section at the end of this chapter and appendix A) lets us watch the headers from requests and responses as the browser works. Let’s fetch the Google home page and see what happens under the hood. The first request that we send contains the following headers:
GET / HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0
(Windows; U; Windows NT 5.0; en-US; rv:1.7)
Gecko/20040803 Firefox/0.9.3
Accept: text/xml,application/xml,
application/xhtml+xml,text/html;q=0.9,
text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie: PREF=ID=cabd38877dc0b6a1:TM=1116601572
:LM=1116601572:S=GD3SsQk3v0adtSBP
The first line tells us which HTTP method we are using. Most web developers are familiar with GET, which is used to fetch documents, and POST, used to submit Licensed to jonathan zheng 60 CHAPTER 2 First steps with Ajax HTML forms. The World Wide Web Consortium (W3C) spec includes a few other common methods, including HEAD, which fetches the headers only for a file; PUT, for uploading documents to the server; and DELETE, for removing documents. Subsequent headers do a lot of negotiation, with the client telling the server what content types, character sets, and so on it can understand. Because I’ve visited Google before, it also sends a cookie, a short message telling Google who I am. The response headers, shown here, also contain quite a lot of information: HTTP/1.x 302 Found Location: http://www.google.co.uk/cxfer?c=PREF%3D: TM%3D1116601572:S%3DzFxPsBpXhZzknVMF&prev=/ Set-Cookie: PREF=ID=cabd38877dc0b6a1:CR=1:TM=1116601572: LM=1116943140:S=fRfhD-u49xp9UE18; expires=Sun, 17-Jan-2038 19:14:07 GMT; path=/; domain=.google.com Content-Type: text/html Server: GWS/2.1 Transfer-Encoding: chunked Content-Encoding: gzip Date: Tue, 24 May 2005 17:59:00 GMT Cache-Control: private, x-gzip-ok="" The first line indicates the status of the response. A 302 response indicates a redirection to a different page. In addition, another cookie is passed back for this session. The content type of the response (aka MIME type) is also declared. A further request is made on the strength of the redirect instruction, resulting in a second response with the following headers: HTTP/1.x 200 OK Cache-Control: private Content-Type: text/html Content-Encoding: gzip Server: GWS/2.1 Content-Length: 1196 Date: Tue, 24 May 2005 17:59:00 GMT Status code 200 indicates success, and the Google home page will be attached to the body of this response for display. The content-type header tells the browser that it is html. Our sendRequest() method is constructed so that the second and third parameters, which we probably won’t need most of the time, are optional, defaulting to using POST to retrieve the resource with no parameters passed in the request body. The code in this listing sets the request in motion and will return control to us immediately, while the network and the server take their own sweet time. Licensed to jonathan zheng Loading data asynchronously using XML technologies 61 This is good for responsiveness, but how do we find out when the request has completed? 2.5.4 Using callback functions to monitor the request The second part of the equation for handling asynchronous communications is setting up a reentry point in your code for picking up the results of the call once it has finished. This is generally implemented by assigning a callback function, that is, a piece of code that will be invoked when