Ajax Hacks-hack9 Deep understanding of HTTP Response

Ajax|response Ajax Hacks-hack9 Deep understanding of HTTP Response

HTTP response headers are descriptive information that conforms to the HTTP 1.1 protocol specification, and the Web server sends accurate pages or data to the requesting end. If you have already used the XMLHttpRequest object-editing process (discussed earlier in this chapter), you should know that the Request.status property is the response status code returned from the server. It is an important value for detecting the status of an HTTP response.

The load state value includes 200 (successful request), 404 (The requested URL does not exist, or the page does not exist) 500 (server internal error).

However, you would also like to see more of the response header information for other preferred requests, such as the type of Web server software (server request header) associated with the response, or the Content type of the response (Content-type). This hack requests the user to enter a URL. When the user clicks a section outside the input box, the browser displays the response header information for that URL. As an AJAX application, the page does not appear refreshed.

The Request object method returns only a subset of the available response headers, including Content-type, Date, Server, and Content-length.

The HTML code is as follows:

"Http://www.w3.org/tr/1999/rec-html401–19991224/strict.dtd" >

Find out the HTTP response headers when you ' get ' a Web page

Javascript:void%200>

Enter a URL:



::p ress tab when finished editing the

Field::

Figure 1-13 shows the page in the Safari browser.

Figure 1-13. Scoping the response

The program uses Http://www.parkerriver.com/s/sender?name=guest to populate the text.

When the user enters the URL and clicks the TAB key, or clicks outside the input box, the onblur event of the input box is fired. The event handler function is Getallheaders, which passes the user input Rul into the request object. The request object sends requests to this URL and returns the response headers to the Web page.

The following code is a file hack7.js. After the code is displayed, it explains how to display the server response header information. The rest can refer to other hack in this chapter.

var request;

var urlfragment= "Http://www.parkerriver.com/s/sender?name=guest";

function getallheaders (URL) {

HttpRequest ("Get", url,true);

}

function for XMLHttpRequest onreadystatechange event handler function Handleresponse () {try{if (request.readystate = 4 {if (request.status = *) {/* All headers received as a single string */var headers = request.getallresponseheaders () ; var div = document.getElementById ("Msgdisplay"; div.classname= "header"; div.innerhtml= "

"+headers+"

"; } else {//request.status is 503 if the application isn ' t available;//500 if the application has a bug alert (request.status ); Alert ("A problem occurred with communicating between" + "the XMLHttpRequest object and the server program.";}} End outer if} catch (Err) {alert ("It does isn't appear that the server is" + "available for this application.) Please "+" try again very soon. \\nError: "+err.message);

}

}

/* Initialize A Request object is already constructed * *

function Initreq (reqtype,url,bool) {

try{

/* Specify the function that would handle the HTTP response * *

Request.onreadystatechange=handleresponse;

Request.open (Reqtype,url,bool);

Request.send (NULL);

} catch (ERRV) {

Alert

"The application cannot contacts the server at the moment." +

"Please try again in a few seconds");

}

}

/* Wrapper function for constructing a request object.

Parameters:

Reqtype:the HTTP request type, such as Get or POST.

Url:the URL of the server program.

Asynch:whether to send the request asynchronously or not. */

function HttpRequest (reqtype,url,asynch) {

mozilla-based Browsers

if (window. XMLHttpRequest) {

Request = new XMLHttpRequest ();

else if (window. ActiveXObject) {

Request=new ActiveXObject ("msxml2.xmlhttp");

if (! Request) {

Request=new ActiveXObject ("Microsoft.XMLHTTP");

}

}

The request could still be null if neither ActiveXObject

Initialization succeeded

if (request) {

Initreq (Reqtype,url,asynch);

} else {

Alert ("Your browser does not permit the use of" +

"Of this application ' s features!";

}

}

An interesting part of this is the Handleresponse function. This function calls the getAllResponseHeaders method of the Request object, which returns all the available response header information, in preformatted string. Developers prefer to return these values as JSON format instead of returning as a single string.

You can also use the Request.getresponseheader method to get a header message. For example, Request.getresponseheader ("Content-type") can get the Content type of the response header:

The code then gets the div element and displays the header information in it:

if (request.status = * * All headers received as a single string/var headers = request.getallresponseheaders (); v Ar div = document.getElementById ("Msgdisplay"; div.classname= "header"; div.innerhtml= "

"+headers+"

"; } ...

To provide a CSS format for displaying the information, the code sets the div's classname attribute, which has been predefined, with the following code:

div.header{Border:thin solid black; padding:10%;

Font-size:0.9em; Background-color:yellow}

span.message {font-size:0.8em;}

In this way, the code dynamically connects a div to a particular CSS class, which is defined separately. This strategy helps DOM programmers describe the distinction. The innerHTML attribute of the last Div is set into the return header value inside.

<