Home > Developer > Web Develop
One, usage: AJAX is the art of exchanging data and updating portions of a Web page with the server, and using it without reloading the entire page. The core of Ajax: sending multiple requests to the server without requiring the user to wait for a response to the server.
Second, the advantages of Ajax
1. Load data asynchronously without switching pages, no need to refresh
2. Better user experience: Local refresh, timely verification, simplified operation, etc.
3. Save Traffic
4.JS control Data loading, more flexible and multi-use
Third, the use of steps:
1.new XMLHttpRequest ()
2.open
3.send
4.onreadystatechange
5.responseText
Example: (Note: To run on a server)
<!doctype html> var ajax=new xmlhttprequest ();//Modern Browser}
else{
var ajax=new activexobject ("msxml2.xmlhttp");//See People IE6}
Step two: Dial the phone number Ajax.open ("Get", "test.txt", true);//1.http method Get/post 2. The requested URL address can be either an absolute address or a relative address. 3. Set whether the request is asynchronous mode. If the True,javascript function continues execution, it does not wait for the server to respond.
Step three: Send Ajax.send ();
Fourth step: Dial Success Ajax.onreadystatechange=function () {
alert (ajax.readystate); if (ajax.readystate==4) {
Alert ("Completed"); if (ajax.status>=200&&ajax.status<300| | ajax.status==304) {
Reply Alert (ajax.responsetext);
}
}
}
Alert (AJAX);
Console.log (Ajax); </script>
Four, the readystate commonly used several kinds of states:
0: The request was not initialized (open () has not been called yet).
1: The request has been established but has not yet been sent (the Send () has not been called).
2: The request has been sent, is in process (usually can now get the content header from the response).
3: The request is in process, and some of the data in the response is usually available, but the server has not finished generating the response.
4: The response is complete; you can get and use the server's response.
1**: Request received, continue processing
2**: Successful operation received, analysis, acceptance
3**: Completion of this request must be further processed
4**: request contains an error syntax or cannot be completed
5**: The server failed to perform a fully valid request
200 Successful Request
301 The requested page has been moved to a new URL
302 The requested page has been temporarily transferred to the new URL
304 Document not modified the original buffered document can also be used in the following
400 the server failed to understand the request
404 the server was unable to find the requested page
500 the request was not completed. The server is experiencing unpredictable conditions
502 Gateway Error
Request Success Criteria
readystate==4&&status>200&&status<300| | status==304
Five, in order to be more convenient to use later, you can encapsulate Ajax into a JS function, such as:
function Fnajax (URL,SUCCFN,FAILDFN) {
if (window. XMLHttpRequest) {
var ajax=new xmlhttprequest ();
}
else{
var ajax=new activexobject ("msxml2.xmlhttp");
}
Ajax.open ("Get", url,true);
Ajax.send ();
Ajax.onreadystatechange=function () {
if (ajax.readystate==4) {
if (ajax.status>=200&&ajax.status<300| | ajax.status==304) {
SUCCFN (Ajax.responsetext);
}
else{
FAILDFN ();
}
}
}
}
Vi. examples of use of functions:
<!doctype html> *{
margin:0;
padding:0; }
div{
height:100px;
width:100px;
Display:none; } </style> <script type= "Text/javascript" src= "ajax.js" ></script> <script type= "Text/javascript ">
Window.onload=function () {
var btns=document.getelementsbytagname ("input");
var divs=document.getelementsbytagname ("div");
for (var i = 0; i < btns.length; i++) {
Btns[i].index=i;
Btns[i].onclick=function () {
for (var i = 0; i < btns.length; i++) {
Divs[i].style.display= "None";
};
divs[this.index].style.display= "Block";
h/a2.html var _this=this;
Fnajax ("h/a" + (this.index+1) + ". html", function (str) {
alert (str); DIVS[_THIS.INDEX].INNERHTML=STR;
});
}
};
}
</script>
Summary of the use of Ajax in the project
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
