AJAX Hacks the HACK3. Use a standalone file to get HTTP request

Ajax|request AJAX Hacks HACK3. Use a standalone file to get HTTP request

This section describes the code that initializes the request object from other code and uses it as a separate Javascrip file.

When an AJAX application is large, it is necessary to clarify the function of each part. Therefore, the management of the XMLHttpRequest object code as a stand-alone JS file to save, if a page to use it, it loaded into the recent, it is no doubt easier to manage. When the code needs to be modified, just modify the file.

Hack all Request-object-related code in the Http_request.js file, and any page that uses xmlhttpreques can be transferred to the file in the following code:

Here is the code for the file, with a total of 71 lines of comments:

var request = null;

/* Wrapper function for constructing a Request object.

Parameters:

Reqtype:http request type Get or POST.

URL: Server URL

Asynch: Whether to send an asynchronous request.

Resphandle: The function that handles the response.

If there is a fifth parameter, that is the post data.

function HttpRequest (reqtype,url,asynch,resphandle) {

Mozilla browser

if (window. XMLHttpRequest) {

Request = new XMLHttpRequest ();

If the request type is post,

The fifth parameter is the data for the post

if (Reqtype.tolowercase ()!= "POST" {

Initreq (Reqtype, Url,asynch,resphandle);

} else {

Post's data

var args = arguments[4];

if (args!= null && args.length > 0) {

Initreq (Reqtype,url,asynch,resphandle,args);

}

}

else if (window. ActiveXObject) {

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

if (! Request) {

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

}

if (request) {

If the request type is post,

The fifth parameter is the data for the post

if (Reqtype.tolowercase ()!= "POST" {

Initreq (Reqtype,url,asynch,resphandle);

} else {

var args = arguments[4];

if (args!= null && args.length > 0) {

Initreq (Reqtype,url,asynch,resphandle,args);

}

}

} else {

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

"Of this application ' s features!";}

} else {

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

"Of this application ' s features!";}

}

/* Initialize A Request object is already constructed * *

function Initreq (reqtype,url,bool,resphandle) {

try{

/* Set the function to process the response * *

Request.onreadystatechange=resphandle;

Request.open (Reqtype,url,bool);

If the request type is post,

The fifth parameter is the data for the post

if (reqtype.tolowercase () = = "POST" {

Request.setrequestheader ("Content-type",

"Application/x-www-form-urlencoded; Charset=utf-8 ";

Request.send (Arguments[4]);

} else {

Request.send (NULL);

}

} catch (ERRV) {

Alert

"The application cannot contact" +

"The server at the moment." +

"Please try again in a few seconds.\n" +

"Error Detail:" +errv.message);

}

}

The application calls the HttpRequest () function (4 or 5 parameters (POST)) through this code. There are many such examples in other hack:

var _url = "Http://www.parkerriver.com/s/sender";

var _data= "First=bruce&last=perry&middle=w";

HttpRequest ("POST", _url,true,handleresponse,_data);

The annotation describes the meaning of each parameter in detail, and the last parameter represents the data that is sent with the POST request.

Attention

The post HTTP request contains the post data in the request header information. And get is in the form of name/values in the URL.

If the code does not use post, the client code uses only the first 4 parameters. The fourth parameter can also be the name of the function declared in the client code (that is, other response processing functions that appear outside the Http_request.js file), or a literal function. The next option is to define a function in a function call, although it makes the code ugly and difficult to read. However, it is advisable to use such a method when HTTP response processing is short and simple, for example:

var _url = "Http://www.parkerriver.com/s/sender";

A debugging set-up

HttpRequest ("POST", _url,true,function () {alert (request.responsetext);});

HttpRequest () can throw the same browser detection and set the Xmlhttpreques,initreq () function for IE to handle the second step of setting the Request object: Specify the onreadystatechange handler function, call Open (), and The Send () method creates an HTTP request. The code uses the Try/catch statement to handle the associated exception or error. For example, if an error occurs when the code calls the Open method, the Try/catch statement catches the error and pops up the window.

Finally, with the introduction of Web pages to http_request.js, the request variable can be used as a global variable in any file.

Request must be a reserved variable name because it appears in local variables to interfere with the request as a global variable, such as the following code:

function Handleresponse () {

Supercedes the imported request variable

var request = null;

try{

if (request.readystate 4) {if (Request.status 200) {...

Give the reader a clearer idea of how to get the request object, and use it more flexibly as a standalone file.

<