In-depth understanding of the four steps of ajax data request

In front-end work, ajax is often used. In fact, many people only know that ajax is an asynchronous request and don’t know how to use it. Next, I will explain to you the four major steps of using Ajax. Friends who need it can just for reference.

What is ajax?

ajax (asynchronous javascript xml) can refresh partial web page data instead of reloading the entire web page.

How to use ajax?

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

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

The second step, use the open() and send() methods of the xmlhttprequest object to send resource requests to the server.

xmlhttp.open(method,url,async) method includes get and post, url is mainly the path of a file or resource, and the async parameter is true (representing asynchronous) or false (representing synchronous)
xhttp. send(); Use the get method to send a request to the server.
xhttp.send(string);Use the post method to send a request to the server.

When can post request be used?

(1) When updating a file or database.
(2) Send a large amount of data to the server because there is no character limit for post requests.
(3) Send the encrypted data entered by the user.

get example:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.open("GET", "index.html", true);
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send();

post example:

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

post form data needs to be added using the setRequestHeader method of the xmlhttprequest object HTTP header.

post form example

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

async=true The onreadystatechange function will be executed when the server is ready to respond.

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, there is no need to write the onreadystatechange function, and the execution code is written directly after send.

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

The third step, use the responseText or responseXML attribute of the xmlhttprequest object to obtain the server's response.

Use the responseText attribute to get the string data of the server response, and use the responseXML attribute to get the XML data of the server response.
Examples are as follows:

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

The XML data responded by the server 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>";
}
document.getElementById("demo").innerHTML = txt;

The fourth step, onreadystatechange function, when sending a request to the server, if we want the server to respond and perform some functions, we need to use the onreadystatechange function, every time Any change in the readyState of the xmlhttprequest object will trigger the onreadystatechange function.

The onreadystatechange attribute stores a function that is automatically called when readyState changes.
readyState attribute, the state of the XMLHttpRequest object, changes from 0 to 4, 0 means the request has not been initialized, 1 means the server connection is successful, 2 the request was received by the server, 3 the request is processed, 4 the request is completed and the response is ready.
Status attribute, 200 means successful response, 404 means the page does not exist.

In the onreadystatechange event, the server response is ready. When readyState==4 and status==200, the server response is ready.
Example:

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();
} 
//函数作为参数调用



Let AJAX change this text.
Change Content

<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(&quot;demo&quot;).innerHTML = xhttp.responseText;
}
</script>

The above are the four steps of using Ajax.

The above is the detailed content of In-depth understanding of the four steps of ajax data request. For more information, please follow other related articles on the PHP Chinese website!