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 obtainresponseText
Response data in string form
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Copy the code
To obtainresponseXML
Response 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