Four steps for using Ajax and four steps for using Ajax

Four steps for using Ajax and four steps for using Ajax

What Is ajax?

Ajax (Asynchronous javascript xml) can refresh local webpage data rather than reload the entire webpage.

How to Use ajax?

Step 1,Create an xmlhttprequest object. var xmlhttp = new XMLHttpRequest (); the XMLHttpRequest object is used to exchange data with the server.

Var xhttp; if (window. XMLHttpRequest) {// modern mainstream browsers xhttp = new XMLHttpRequest ();} else {// target browsers, such as IE5 or IE6xhttp = new ActiveXObject ("Microsoft. XMLHTTP ");}

Step 2Use the open () and send () Methods of the xmlhttprequest object to send resource requests to the server.

Xmlhttp. open (method, url, async) methods include get and post. URLs are mainly file or resource paths. The async parameter is true (asynchronous) or false (synchronous)

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 request be used?

(1) update a file or database.

(2) send a large amount of data to the server because the post request has no character restrictions.

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

The post form data must use the setRequestHeader method of the xmlhttprequest object to add an 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 when the server is preparing to respond, the onreadystatechange function will be executed.

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

If asyn is set to false, you do not need to write the onreadystatechange function. Write the Execution Code directly after sending.

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

Step 3Use the responseText or responseXML attribute of the xmlhttprequest object to obtain the server 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.

Example:

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

The XML data returned by the server must be converted using an XML object.

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; 

Step 4Onreadystatechange function. When sending a request to the server, we need to use the onreadystatechange function to respond to the server and execute some functions. The onreadystatechange function is triggered every time the readyState of the xmlhttprequest object changes.

The onreadystatechange attribute stores a function that is automatically called when the readyState changes.

ReadyState attribute. The state of the XMLHttpRequest object. Changes from 0 to 4. 0 indicate that the request is not initialized. 1 indicates that the server connection is successful. 2. The server receives the request. 3. The server processes the request, 4. The request is complete and the response is ready.
Status attribute. 200 indicates a successful response, and 404 indicates that the page does not exist.

In the onreadystatechange event, when the server responds to preparation, the server responds to preparation when readyState = 4 and status = 200.

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 () ;}// call a function as a parameter <! 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 section describes the four steps to use Ajax. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!