Ajax principle summary with simple examples and its advantages

Time:2021-6-11

I have used Ajax n for many times in my work, and I have read some books about it. I know it, but I haven’t summarized and sorted out the related things. I failed!

We can sum it up as follows:

[name]

AJAX is short for asynchronous JavaScript and XML (and DHTML, etc.).
For details, please go to Ajax: a new approach to web applications

[principle]

To be simple, we can use the XMLHttpRequest object to send an asynchronous request to the server, obtain the returned data, and use JavaScript and DOM to operate the elements in the page, so as to achieve the purpose of changing the content of the page.
The XMLHttpRequest object is the key because it supports asynchronous requests. XMLHttpRequest is completely used to make a request to the server. It contains the following methods and properties:
method:
Abort() causes the current request to be cancelled
Getallresponseheaders() returns a string containing the name and value of the response header
Getresponseheader (name) returns the value of the specified response header
Open (method, URL, async, username, password) to set the requested method and target URL. The request can be declared synchronous (optional), or the user name and password can be provided based on the window’s request (optional)
Send (content) initiates a request with the specified content (optional)
SetRequest header (name, value) uses the specified name and value to set a request header
Properties:
Onreadystatechange specifies the event handler to use when the state of the request changes
ReadyState is an integer value indicating the status of the request as follows:
0 – uninitialized
1 – loading
2 – loaded
3 – interaction
4 – complete
The content returned by responseText in the response
Responsexml if the content is XML, an XML DOM is created based on the content
Status the response status code returned from the server. For example: 200 indicates success, 404 indicates not found, refer to HTTP specification
The status text message returned by the statustext response
For other introduction of this object, please move to: overview of XMLHttpRequest

[technology included]

·Representation based on XHTML and CSS standards;
·The document object model is used for dynamic display and interaction;
·Use XMLHttpRequest to communicate with the server asynchronously;
·Use JavaScript to bind everything;
·Using XML and XSLT; Exchange and manipulate data.
The above technologies are some widely used technologies, which are relatively old technologies. AJAX is a combination of these technologies.

[simple example]

Copy codeThe code is as follows:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script type=”text/javascript”>
function ajax() {
var xmlHttp;
//Judge by object, not by browser
if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();// Mozilla browser
}else if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject(“Msxmlx2.XMLHTTP”); // Ie old version
}catch(e){}
try{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”); // New version of IE
}catch(e){}

if(!xmlHttp){
Window. Alert (“cannot create XMLHttpRequest object real column”);
return false;
}
}

if (!xmlHttp) {
Alert (“failed to create XMLHttpRequest object!”);
return false;
}

xmlHttp.open(‘POST’, ‘index.php?get_a=2&get_b=3’, false);
xmlHttp.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded;charset=UTF-8;’);
xmlHttp.send(“post_a=1&post_b=2”);
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState);
}
If (xmlhttp. ReadyState = = 4) {/ / judge object state
var content_obj = document.getElementById(“content”);
content_ Obj.innerhtml = processing data;
If (xmlhttp. Status = = 200) {/ / the message has been returned successfully. Start processing the message
var returnStr = xmlHttp.responseText;
content_obj.innerHTML = returnStr;
}The else {/ / page is abnormal
content_ Obj.innerhtml = “the page you requested is abnormal!”;
}
}
}
</script>
</head>
<body>
<input type=”button” value=”ajax” onclick=”ajax();” />
< div > Ajax content display area
</body>
</html>

Remember: when launching a post request, you need to set the header content type. In this way, the server knows how to handle the uploaded content. If you want to simulate sending forms through HTTP protocol post, you should set the content type to application / x-www-form-urlencoded.

[advantages]

No page refresh, good user experience;
Asynchronous, does not interrupt the user operation, the response speed is fast;
“Access data on demand” reduces redundant requests and server burden;
Based on standardized and widely supported technologies, no additional plug-ins are required;
Data and presentation can be separated;
[existing problems]
Some devices don’t support it yet
Development cost increase
Make the back button invalid and the user cannot return after operation;
Streaming media support is not as good as flash;
Unfriendly to search engines
Abnormal mechanism of breaking program
There are some security problems, exposing some program interfaces and data logic