Ajax Basic use of the four steps, easy to understand

Ajax (Asynchronous JavaScript XML) refreshes the local page data rather than reloading the entire page. Next through this article to introduce you to the use of Ajax four steps, very good, interested friends to see it

What is Ajax?

Ajax (Asynchronous JavaScript XML) refreshes the local page data rather than reloading the entire 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.

12345678

varxhttp;if (window.XMLHttpRequest) {//现代主流浏览器xhttp = new XMLHttpRequest();} else {// 针对浏览器，比如IE5或IE6xhttp = newActiveXObject("Microsoft.XMLHTTP");}

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

Xmlhttp.open (Method,url,async) method includes get and post,url are primarily paths to files or resources, the async parameter is true (for async), or False (for synchronization)

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

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

When can a post send request be used?

(1) When updating a file or database.

(2) Send a large amount of data to the server because the POST request has no character limit.

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

Get Example:

123	xhttp.open ( " GET " "Ajax_info.txt" true xhttp.open ( "GET" Code class= "JS string" > "index.html" true Code class= "JS Plain"); xhttp.open ( "GET" Code class= "JS string" > "demo_get.asp?t=" + math.random (), true

Post Example

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

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

Post form examples

123	xhttp.open("POST", "ajax_test.aspx", true);xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhttp.send("fname=Henry&lname=Ford");

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

1234567

xhttp.onreadystatechange = function() {if(xhttp.readyState == 4 && xhttp.status == 200) {document.getElementById("demo").innerHTML = xhttp.responseText;}};xhttp.open("GET", "index.aspx", true);xhttp.send();

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

123	xhttp.open("GET", "index.aspx", false);xhttp.send();document.getElementById("demo").innerHTML = xhttp.responseText;

The third step is to get the server's response using the ResponseText or Responsexml property of the XMLHttpRequest object.

Use the ResponseText property to get the string data for the server response, using the Responsexml property to get the XML data for the server response.

Examples are as follows:

1	document.getElementById("demo").innerHTML = xhttp.responseText;

The XML data that the server responds to needs to be transformed using an XML object.

Example:

1234567

xmldoc = xhttp.responsexml; txt = x = Xmldoc.getelementsbytagname ( "ARTIST" for (i = 0; i < x.length; i++) { txt + = X[i].childnodes[0].nodevalue + "<br>" } document.getelementbyid ( " Demo "

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

The onReadyStateChange property stores a function that is automatically called when readystate changes.

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

In the onReadyStateChange event, server response readiness occurs when the server responds to Readystate==4 and status==200.

Example:

123456789101112131415161718192021222324252627282930313233343536

function loadDoc() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (xhttp.readyState == 4 && xhttp.status == 200) {document.getElementById("demo").innerHTML = xhttp.responseText;}};xhttp.open("GET", "ajax_info.txt", true);xhttp.send();} //函数作为参数调用<!DOCTYPE html><body><p id="demo">Let AJAX change this text.</p><button type="button"onclick="loadDoc(‘index.aspx‘, myFunction)">Change Content</button><script>function loadDoc(url, cfunc) {var xhttp;xhttp=new XMLHttpRequest();xhttp.onreadystatechange = function() {if (xhttp.readyState == 4 && xhttp.status == 200) {cfunc(xhttp);}};xhttp.open("GET", url, true);xhttp.send();}function myFunction(xhttp) {document.getElementById("demo").innerHTML = xhttp.responseText;}</script></body>

The above mentioned is the use of Ajax four steps

Ajax Basic use of the four steps, easy to understand