Simple custom Ajax class for Ajax callback

Source: Internet
Author: User
Every time Ajax callback is implemented, an XMLHTTPRequest object needs to be obtained, and then a callback function is written to determine the readystate and status in the callback function, which is cumbersome, so I thought of an API to include the Ajax implementation. When calling it, I only need to input parameters to the API, which is very simple.

Although there are many open-source ajaxrequest objects on the network, including jquery, prototype, extjs, and so on, you can write an object that meets your needs and call it in the way you are used, I personally think it is very good. As a result, I have deepened my understanding of the Ajax mechanism. Therefore, it is recommended that you write it by yourself .... 1. Write your own object Ajax and save the file myajax. js as a class library. // JScript File

// Ajax request Function
// Author: Wu baoyou
// Get call method: (1) instantiate var AJ = new Ajax (); (2) Call the get function AJ. get (URL, callback) (3) write the callback function callback (xhr) {xhr. responsetext}
// Post call method: (1) instantiate var AJ = new Ajax (); (2) Call the post function AJ. post (URL, content, callback) (3) write the callback function callback (xhr) {xhr. responsetext}

Function Ajax () // Ajax object
{
Function getxhr () // gets the XMLHTTPRequest object
{
VaR request = false;
Try
{
Request = new XMLHttpRequest ();
}
Catch (trymicrosoft)
{
Try
{
Request = new activexobject ("msxml2.xmlhttp ");
}
Catch (othermicrosoft)
{
Try
{
Request = new activexobject ("Microsoft. XMLHTTP ");
}
Catch (failed)
{
Request = false;
}
}
}
Return request;
}

This. Get = function (Openurl, successfun) // get method of the Ajax object, send a request in get mode, Openurl is the requested page, and successfun is the function for successful callback execution
{
VaR request = getxhr ();
Request. Open ("get", Openurl, true );
// Request. onreadystatechange = function ()
//{
// If (request. readystate = 4)
//{
// If (request. Status = 200)
//{
// Successfun (request );
//}
//}
//};
Request. onreadystatechange = update;
Function Update ()
{
If (request. readystate = 4)
{
If (request. Status = 200)
{
Successfun (request );
}
}
}
Request. Send (null );
}

This. Post = function (Openurl, sendcontent, successfun) // the POST method of the Ajax object. The post method is used to send a request. Openurl is the requested page, and successfun is the function for successful callback execution.
{
VaR request = getxhr ();
Request. Open ("Post", Openurl, true );
Request. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded"); // tell the server that the message is text
Request. onreadystatechange = update;
Function Update ()
{
If (request. readystate = 4)
{
If (request. Status = 200)
{
Successfun (request );
}
}
}
Request. Send (sendcontent );
}
} II. Call the class library myajax. JS1 to create an HTML document. The Body Tag code is as follows: <Body>
<Input type = "text" id = "txt1"/>
<Input type = "button" id = "btn1" value = "get button" onclick = "callback_get ()"/>
<Input type = "text" id = "txt2"/>
<Input type = "button" id = "btn2" value = "post button" onclick = "callback_post ()"/>
</Body> 2. The JS file is as follows: <SCRIPT type = "text/JavaScript" src = "myajax. js"> </SCRIPT> <! -- Introduce the JS file where the class library is located -->
<SCRIPT type = "text/JavaScript">
Function callback_get () // implement get callback
{
VaR AJ = new Ajax (); // instantiate an object
VaR txtval = Document. getelementbyid ("txt1"). value; // obtain the text value
VaR url = "AJ. aspx? Arg = "+ escape (txtval); // transmits data to the specified URL
AJ. Get (URL, update); // call the get function in the class library, indicating that the URL is opened and the callback function is Update

Function Update (OBJ) // callback function implementation. Here, the OBJ value is actually an XMLHTTPRequest object, which can be seen from the class library. You can specify OBJ as a parameter of any name, such as AAA.
{
Alert (obj. responsetext );
}
}

Function callback_post () // implement callback in post Mode
{
VaR AJ = new Ajax ();
VaR txtval = Document. getelementbyid ("txt2"). value;
VaR sendcont = "argument =" + txtval;
VaR url = "AJ. aspx? Time = "+ new date (); // This is a habit of writing in post. It is best to pass a timestamp to the server to avoid the callback data being cached on the server.
AJ. Post (URL, sendcont, update); // call the post function in the class library, indicating that the URL is opened, the transmitted content is sendcont, And the callback function is update.

Function Update (OBJ) // callback function implementation, same as the get Method
{
Alert (obj. responsetext );
}
}
</SCRIPT> 3. Compiled and correctly called, indicating that a simple Ajax class library is implemented.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.