Encapsulate basic Ajax requests and Ajax requests

Encapsulate basic Ajax requests and Ajax requests

I. Description

The Ajax request can update the page locally without refreshing the entire page that you are currently browsing. This gives you a better user experience.

The method for implementing Ajax requests can send request information to the server through JavaScript code, and the client browser receives the response

To partially refresh the page. In this implementation process, the XMLHttpRequest object is the core of Ajax.

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

$. Post (), $. ajax (), and so on) to implement Ajax requests. However, for the purpose of learning, it is necessary to know and understand what is actually necessary.

You can implement basic Ajax requests through JS Code and encapsulate their operations. The encapsulated Ajax request is actually centered around

XMLHttpRequst object attributes and methods are implemented.

II. Implementation of Ajax requests

A. Create the XMLHttpRequest object xmlrequest;

B. open the xmlrequest. open (...);

C. Set the JavaScript function called when the status changes;

The code for the status readyState attribute is as follows:

0: indicates the status that is not initialized. An XMLHttpRequest object has been created but has not been initialized.

1: indicates the connection status. The open method has been called and the request is ready to be sent.

2: indicates the sending status. The send method has been called to send the request, but no response has been obtained.

3: indicates the receiving status. The HTTP response header information has been received and the response body content is being received.

4: indicates the loaded status. At this time, the response content has been completely received d. send the request xmlrequest. send ().

Iii. Ajax implementation code

// The encapsulated ajax request parameter: method: Request method, which is generally "POST" or "GET" url: The request URL path onsuccess: this parameter is a method, this method executes function ajax (method, url, onsuccess) {var xmlrequest = window. XMLHttpRequest? // Create object new XMLHttpRequest (): new ActiveXObject ('Microsoft. XMLHTTP '); xmlrequest. open (method, url, true); // open the xmlrequest request. onreadystatechange = function () {// sets the method called when the status changes if (xmlrequest. readyState = 4) {if (xmlrequest. status = 200) {onsuccess (xmlrequest. responseText); // The request is successful. The onsuccess method is usually} // to implement the partial page refresh function else {alert ("request error:" + xmlrequest. status) ;}}; xmlrequest. send (); // send request}

Such a basic ajax Request Code is encapsulated. To make it easier to use this encapsulated method, we can write this method into

In the ajax. js file, to use this method, you only need to add:

<Script src = "js/ajax. js"/* src is the path of 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 );

});

 

Appendix: To be continued ......