Study Notes: Ajax usage rules

Ajax: partial data update:
1. Ajax is a combination of html css dhtml js xml json Dom.
Ajax is a technology and a solution. A solution that is interactive and does not require page refresh, reduces users' psychological waiting time, and responds to data in a timely manner
2. Ajax features:
Ajax is constructed based on standard HTML CSS XML
Dynamic Display and interaction of DOM objects
Its data interaction format text format is XML JSON
Use the xmlhttprquest object based on the browser for Data Synchronization
Use js to bind arbitrary data
3. Where Ajax cannot be used: a large amount of text replaces the navigation part in the timely part of data
4. Call methods for different browsers

New XMLHttpRequest (); XMLHttpRequest objects of Firefox and other W3C-compliant browsers such as IE8 and later
New activexobject ("msxml2.xmlhttp"); IE7 IE6
Generate the XMLHTTP object required by Ajax
VaR XMLHTTP;
Function Ajax (){
Try {
XMLHTTP = new XMLHttpRequest ()
} Catch (e ){
Try {
XMLHTTP = new activexobject ("msxml2.xmlhttp ");
} Catch (e ){
Alert ("your browser is hardcore, please upgrade ");
Return false;
}
}
}

5. XMLHTTP. Open ("data transmission method", URL, true); enable an asynchronous data transmission
If the server needs to return data, call onreadystatechange of XMLHTTP to set a callback function.
XMLHTTP. onreadystatechange = callback function;
XMLHTTP. Send (); send
If the data transmission method is get send (null)
Post send (data)
Get is relatively simple post is more complicated
6. XMLHTTP: five States for asynchronous Ajax Data Transmission
0 --- create an XMLHTTPRequest object
1 --- Call the Open Method
2. --- send
3. --- the server is accepting and processing but is not completed
4. -- after the server is processed, the client completes the entire process.
Therefore, when processing the callback function, we need to determine whether the current xmlhttrequest object has completed its five statuses.
XMLHTTP. readstate = 4
7. XMLHTTP. Status indicates the current browser status. HTTP Protocol specifies that the browser status is 200.
XMLHTTP. Status = 200
XMLHTTP. responsetext receives responses from the server in text format.
401 unauthorized
403 Access prohibited
404 file not found
500 an internal server error occurs
8. encodeuricomponent () // encode the passed string! Prevent garbled characters!
_________________________________________
<SCRIPT type = "text/JavaScript">
// Var XMLHTTP = new XMLHttpRequest ();
Function getval (){
Ajax ();
VaR url = '11. php? Username = zhangsan & '+ math. Random ();
XMLHTTP. Open ('get', URL, true );
XMLHTTP. onreadystatechange = test;
XMLHTTP. Send (null );
}
Function Test (){
If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200 ){
// Alert (XMLHTTP. responsetext );
VaR myspan = Document. getelementbyid ('myspan ');
VaR text = XMLHTTP. responsetext;
If (text = '1 '){
Myspan. innerhtml = 'change the user name again. The user name has been registered ';
} Else {
Myspan. innerhtml = 'this user name can be registered ';

}
}

</SCRIPT>

-----------------------------------------
9. Post Method
<SCRIPT type = "text/JavaScript">
Function DJ (ID ){
Ajax ();
VaR DATA = "id =" + ID + "& type = x ";
VaR url = '12. php ';
XMLHTTP. Open ("Post", URL, true );
XMLHTTP. onreadystatechange = callback;
// Tell the browser the current data sending length and Type Header
XMLHTTP. setRequestHeader ("Content-Length", Data. Length );
XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded ");
XMLHTTP. Send (data );
}

Function callback (){
If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200 ){
Alert (XMLHTTP. responsetext );
}
}
</SCRIPT>