Detailed explanation of Ajax usage steps-JS Tutorial-php.cn

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

What is ajax?

ajax (asynchronousjavascriptxml) 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"); }

Copy after login

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 becausepost requesthas 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();

Copy after login

post example

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

Copy after login

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");

Copy after login

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();

Copy after login

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;

Copy after login

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 thestringdata 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;

Copy after login

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 + "
"; } document.getElementById("demo").innerHTML = txt;

Copy after login

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.

Copy after login

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!