What is Ajax

What is Ajax
Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technique that creates interactive Web applications.
AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.
Traditional Web pages (without AJAX) if you need to update your content, you must reload the entire page surface.
Traditional mode: Wait-response-wait
Advantage:
1: Use JavaScript to make requests to the server and handle the response without blocking the user! Core Object XMLHttpRequest. With this object, your JavaScript can be used without overloading the page.
Exchange data with the Web server.
2:ajax uses asynchronous data transfer (HTTP requests) between the browser and the Web server, which allows the Web page to request a small amount of information from the server, rather than the entire page.
Execution process:
1, create XMLHttpRequest object (need to consider the browser compatibility issues)
var xhr = function Getxmlhttpobject () {
var objxmlhttp = null;
if (window. XMLHttpRequest) {
objXmlHttp = new XMLHttpRequest ();
} else if (window. ActiveXObject) {
objXmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
return objxmlhttp;
}
2. Use the XMLHttpRequest object to open a connection (specify the connection mode and the connection address and whether to synchronize)
Xhr.open ("POST", "URL", true);
3. Set the requested header (the requested type and the requested encoding format)
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
4. Set callback function
Ajax Status Code (READYSTATE):
0-(uninitialized) has not yet called the Send () method
1-(load) called the Send () method, sending the request
2-(loading complete) the Send () method executes and has received the full response content
3-(interactive) parsing response content
4-(complete) The response content resolution is complete and can be invoked on the client
Xhr.onreadystatechange=function () {
If ReadyState is 4, the response has been fully received.
if (xhr.readystate==4) {
If a result status code of 200 is obtained, the service side returns normally
if (xhr.status==200) {
var Txt=xhr.responsetext;
document.getElementById ("Err"). Innerhtml=txt;
}
}
}
5. Send Request
Call the Send method of the XMLHttpRequest object to implement data delivery.
Xhr.send ("name=" +name);
Full code:
var xhr = Getxmlhttpobject ();
Xhr.open ("Get", "./users.json", true);
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xhr.send ();
Xhr.onreadystatechange = function () {
If ReadyState is 4, the response has been fully received.
if (xhr.readystate = = 4) {
If a result status code of 200 is obtained, the service side returns normally
if (Xhr.status = = 200) {
var txt = xhr.responsetext;
Console.log (TXT);
}
}
}
function Getxmlhttpobject () {
var objxmlhttp = null;
if (window. XMLHttpRequest) {
objXmlHttp = new XMLHttpRequest ();
} else if (window. ActiveXObject) {
objXmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
return objxmlhttp;
}

What is Ajax