Detailed explanation of Ajax usage steps

This time I will bring you a detailed explanation of the steps to use Ajax. What are the precautions when using Ajax? The following is a practical case, let’s take a look.

What is ajax?

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

How to use ajax?

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

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 synchronization)

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 post request has no character limit.

(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 use the setRequestHeader method of the xmlhttprequest object to add an HTTP head.

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.

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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of how to handle WebService cross-domain issues

Detailed explanation of the use of Ajax() to interact with the background

The above is the detailed content of Detailed explanation of Ajax usage steps. For more information, please follow other related articles on the PHP Chinese website!