Encapsulates a basic AJAX request

I. Description

Ajax requests are able to update the page locally without re-refreshing the entire page that is currently being browsed, making the user experience even better.

The method of implementing the AJAX request can send the request information to the server via JavaScript code, and the client browser receives a return

Back to the AJAX data, a partial refresh of the page. In this implementation process, the XMLHttpRequest object is the core of Ajax.

Although jquery has encapsulated Ajax requests nicely, we can easily use the methods provided by the jquery Library ($.get (),

$.post (), $.ajax (), etc.) to implement the AJAX request, but in the purpose of learning, to know it, and know why, it is necessary

Go through the JS code to implement the basic AJAX request, and encapsulate its operation. I'm going to encapsulate the AJAX request is actually around

The Xmlhttprequst object properties and methods are implemented.

Second, the implementation of the AJAX request process

A. Create XMLHttpRequest object xmlrequest;

B. Open the request Xmlrequest.open (...);

C. Set the JavaScript function that is called when the state changes;

The Status ReadyState property code is as follows:

0: Represents the uninitialized state. A XMLHttpRequest object was created, but not yet initialized

1: Represents the connection status. The open method has been called and is ready to send the request

2: Represents the Send status. The Send method has been called to make a request but has not yet been responded to

3: Represents the receiving state. Header information has been received for HTTP response, receiving response body content

4: Represents the loaded state. The response is now fully received D. Send request Xmlrequest.send ().

Third, AJAX implementation code

Encapsulated Ajax Request Parameters: Method: The request approach, typically: "POST" or "GET" url: The URL path of the request onsuccess: This parameter is a method that executes function Ajax after the request succeeds (Method,url, onsuccess) {    var xmlrequest = window. XMLHttpRequest?         Create Object                         new XMLHttpRequest (): New ActiveXObject (' microsoft.xmlhttp ');    Xmlrequest.open (method, URL, true);              Open Request    Xmlrequest.onreadystatechange = function () {    //Set the method to be called when the state is changed        if (xmlrequest.readystate = = 4) {            if (Xmlrequest.status = =) {                onsuccess (xmlrequest.responsetext);//Successful request, onsuccess method is generally            }                                   // To implement the local refresh feature of the page            else {                alert ("The request has an error:" + Xmlrequest.status);}}    ;    Xmlrequest.send ();       Send Request}

The encapsulation of such a basic AJAX request code is done, in order to make it easier to use this encapsulated method, we can write this method to a

Ajax.js file, so when you want to use this method, just add:

<script src= "Js/ajax.js"/*SRC is the path to the JS file */type= "Text/javascript" language= "JavaScript" ></script>

You can call the Ajax () method, for example:

Ajax ("POST", "/home/index", function (ResText) {

Alert ("Ajax Request data:" +restext);

});

Attached: Not to be continued ...

Encapsulates a basic AJAX request