AJAX is a technique for updating parts of a web page without having to reload the entire page.

AJAX is a technique for creating fast, dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that part of a web page can be updated without reloading the entire page.

Traditional web pages (without AJAX) have to reload the entire page if they need to update their content.

The instance

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // This. ResponseText is the desired data
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name; }}; xmlhttp.open("GET"."/try/ajax/json_demo.txt".true);
xmlhttp.send();
Copy the code

Code flow:

The first step is to create the XMLHttpRequest object

var xmlhttp = new XMLHttpRequest();
Copy the code

Step 2 onReadyStatechange event

The onReadyStatechange event is emitted whenever readyState changes. The readyState property holds XMLHttpRequest state information.

Onreadystatechang this function is called whenever the readyState property changes. ReadyState Holds the state of XMLHttpRequest. It goes from 0 to 4. 0: the request is not initialized 1: the server connection is established 2: the request is received 3: the request is being processed 4: the request is completed and the response is ready Status 200: "OK" 404: the page is not foundCopy the code

Step 3 The server responds

Get the response from the server in different data formats through the responseText or responseXML property of the XMLHttpRequest object

To obtainresponseTextResponse data in string form

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Copy the code

To obtainresponseXMLResponse data in XML form

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0; i<x.length; i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;
Copy the code

Step 4 Send the request to the server

Open (method, URL,async) parameters: method: type of request; GET or POST URL: file location on the server async: true (asynchronous) or false (synchronous) xmlhttp.send();Copy the code

To exclude browser cached results from the GET method, add a unique ID to the URL

xmlhttp.open("GET"."demo_get.asp? t=" + Math.random(),true);
xmlhttp.send();
Copy the code

If you need to POST data in the POST method as you would in an HTML form, use setRequestHeader() to add the HTTP header. Then specify the data you want to send in the send() method:

xmlhttp.open("POST","ajax_test.asp",true); //setRequestHeader(header,value) Xmlhttp. setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");Copy the code

The case with POST

It is not possible to send large amounts of data to the server using cache files (updating files or databases on the server) (POST has no data limit). POST is more stable and reliable than GET when sending user input containing unknown charactersCopy the code

The server side

After the front-end sends a request with parameters, the server can pass

1. Asp/PHP file will write data in the ASP file, do not call the server, do not contain SQL statements, return the data in the file 2. The database file invokes the database through SQL statements and returns database data. 3.XML file The server page is actually an XML file from which the front-end can extract node elements to obtain dataCopy the code