Ajax reconstruction steps and Ajax reconstruction steps

Ajax reconstruction steps and Ajax reconstruction steps

Ajax Refactoring can be roughly divided into the following three steps.

1. Create a separate JS file named AjaxRequest. js, and write the code required to refactor Ajax in the file.
The Code is as follows:
Var net = new Object (); // defines a global variable.
// Compile the constructor
Net. AjaxRequest = function (url, onload, onerror, method, params)
{
This. req = null;
This. onload = onload;
This. onerror = (onerror )? Onerror: this. defaultError;
This. loadDate (url, method, params );
}
// Compile the method used to initialize the XMLHttpRequest object, specify the processing function, and finally send the HTTP request
Net. AjaxRequest. prototype. loadDate = function (url, method, params)
{
If (! Method) // set the default REQUEST method TO GET
{
Method = "GET ";
}
If (window. XMLHttpRequest)
{// Non-IE browser
This. req = newXMLHttpRequest (); // create an XMLHttpRequest object
}
Elseif (window. ActiveXObject)
{// IE browser
Try
{
This. req = new ActiveXObject ("Microsoft. XMLHTTP"); // create an XMLHttpRequest object
}
Catch (e)
{
Try
{
This. req = new ActiveXObject ("Msxml2.XMLHTTP"); // create an XMLHttpRequest object
}
Catch (e)
{
}
}
}
If (this. req)
{
Try
{
Varloader = this;
This. req. onreadystatechange = function ()
{
Net. AjaxRequest. onReadyState. call (loader );
}
This. req. open (method, url, true); // create a call to the server
If (method = "POST ")
{// If the submission method is POST
This. req. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); // you can specify the request Content Type.
This. req. setRequestHeader ("x-requested-with", "ajax"); // set the request sender
}
This. req. send (params); // send the request
}
Catch (err)
{
This. onerror. call (this); // call the error handling function
}
}
}
 
// Refactor the callback function
Net. AjaxRequest. onReadyState = function ()
{
Var req = this. req;
Var ready = req. readyState; // get the Request status
If (ready = 4)
{// Request completed
If (req. status = 200)
{// Request successful
This. onload. call (this );
}
Else
{
This. onerror. call (this); // call the error handling function
}
}
}
// Refactor the default error handling function
Net. AjaxRequest. prototype. defaultError = function ()
{
Alert ("error data \ n callback status:" + this. req. readyState + "\ n status:" + this. req. status );
}
2. Apply the following statements on the page where Ajax is to be applied, including the JS File Created in step 1.
<Script language = "javascript" src = "AjaxRequest. js"> </script>
 
3. Compile the error handling method on the page where Ajax is applied, and instantiate the Ajax object method and callback function.
The Code is as follows:
<Script language = "javascript">
***************** *********************/
Function onerror ()
{
Alert ("Your operation is incorrect !");
}
/***************** Method for instantiating an Ajax object **************** *************/
Function getInfo ()
{
Var loader = newnet. AjaxRequest ("getInfo. jsp? Nocache = "+ new Date (). getTime (), deal_getInfo, onerror," GET ");
}
/************************ Callback function ************* *************************/
Function deal_getInfo ()
{
Document. getElementById ("showInfo"). innerHTML = this. req. responseText;
}
</Script>