The use of Ajax four steps _ajax related

What is Ajax?

Ajax (Asynchronous JavaScript XML) is able to refresh local Web page data instead of reloading the entire Web page.

How do I use Ajax?

The first step is to create the XMLHttpRequest object, var xmlhttp =new XMLHttpRequest (); The XMLHttpRequest object is used to exchange data with the server.

var xhttp;
if (window. XMLHttpRequest) {
//modern mainstream browser
xhttp = new XMLHttpRequest ();
} else {
//for browsers, such as IE5 or IE6
xhttp = new ActiveXObject ("Microsoft.XMLHTTP");
}

The second step is to send a resource request to the server using the XMLHttpRequest object's open () and send () methods.

Xmlhttp.open (Method,url,async) method includes the path of Get and Post,url primarily a file or resource, async parameter is True (on behalf of Asynchrony), or False (for synchronization)

Xhttp.send (); Use the Get method to send the request to the server.

Xhttp.send (string); Use the Post method to send the request to the server.

When will post send requests be available?

(1) When updating a file or database.

(2) Sending large amounts of data to the server because the POST request has no character restrictions.

(3) Sending the encrypted data entered by the user.

Get Example:

Xhttp.open ("Get", "Ajax_info.txt", true);
Xhttp.open ("Get", "index.html", true);

Post Example

Xhttp.open ("POST", "demo_post.asp", true);
Xhttp.send ();

Post form data requires an HTTP header to be added using the setRequestHeader method of the XMLHttpRequest object.

Post form Example

Xhttp.open ("POST", "ajax_test.aspx", true);
Xhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");

Async=true executes the onreadystatechange function when the server prepares a response.

Xhttp.onreadystatechange = function () {
if (xhttp.readystate = 4 && xhttp.status =) {
Document.gete Lementbyid ("Demo"). InnerHTML = Xhttp.responsetext;
}
;
Xhttp.open ("Get", "index.aspx", true);

Asyn=false will not need to write the onreadystatechange function, write the execution code directly behind the send.

Xhttp.open ("Get", "index.aspx", false);
Xhttp.send ();

The third step is to obtain a response from the server using the ResponseText or Responsexml property of the XMLHttpRequest object.

Using the ResponseText property to get string data for the server response, use the Responsexml property to get the XML data for the server response.

Examples are as follows:

The server responds to XML data that needs to be converted using XML objects.

Example:

xmldoc = Xhttp.responsexml;
txt = "";
x = Xmldoc.getelementsbytagname ("ARTIST");
for (i = 0; i < x.length i++) {
txt + + x[i].childnodes[0].nodevalue + ' <br> ';
}

The Fourth step , onreadystatechange function, when sending a request to the server, we want the server response to perform some functions requires the use of the onreadystatechange function, The onreadystatechange function is triggered every time a change in the readystate of a XMLHttpRequest object occurs.

The onReadyStateChange property stores a function that is automatically invoked when a readystate change occurs.

The ReadyState property, XMLHttpRequest the state of the object, changes from 0 to 4, 0 represents the request not initialized, 1 succeeds on the server connection, 2 requests are received by the server, 3 processes requests, 4 requests complete and the response is ready.
Status property, 200 indicates a successful response, and 404 indicates that the page does not exist.

In the onReadyStateChange event, the server responds when the response is ready, and the server responds when readystate==4 and status==200 are ready.

Example:

 function Loaddoc () {var xhttp = new XMLHttpRequest (); xhttp.onreadystatechange = function () {if (xhttp.readystate = = 4 && xhttp.status =) {document.getElementById ("demo"). InnerHTML = Xhttp.respons
EText;
}
};
Xhttp.open ("Get", "Ajax_info.txt", true);
Xhttp.send (); }//function called as parameter <! DOCTYPE html>  
 

The above is a small set to introduce the use of Ajax four steps, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!