AJAX (Asynchronous JavaScript and XML to manipulate XML in an asynchronous manner)
Primary role: Data interaction
Benefits:
1. Save user's operation time
2. Improve the user experience
3. Reduce data requests (transfer Access data)
function Ajax (Method,url, data, success) {
//First step: Create an Ajax object
var xhr=null;
//This judgment is mainly for compatibility Ie6,ie6 no XMLHttpRequest This object, so the front to write the window, to prevent error.
Another way of writing is to use try{to try to execute the code if there is an error, it will execute the catch inside the}catch (e) {}
if (window. XMLHttpRequest) {
//object for standard browser (including IE7-IE8)
xhr=new XMLHttpRequest ();
}else{
This is the object under//ie6 .
xhr=activexobject (' microsoft.xmlhttp ');
}
If the current method is get and there is data in case
if (mothod== ' get ' && data) {
url+= '? ' +data;
}
Step Two: Pre-submission preparatory work
3 parameters inside the Open method
1. How to submit (GET or POST)
2. Request Address
3. Whether asynchronous
Difference:
Get method: Connect the data name and data value with =, if there are multiple words. So he would connect multiple data combinations with & and then put the data in the URL? After uploading to the specified page, the URL has a length limit and is cached. The user's security is relatively poor.
Post mode: By requesting the hair to send, theoretically unlimited size, will not be cached, security is better.
True (async): The preceding code does not finish without affecting subsequent code execution
False (Synchronous): The preceding code is not finished, and the following code does not execute
Xhr.open (method,url,true);
Step three: Submit a Send request
If it's empty, the rep is post.
if (method== ' get ') {
Xhr.send ();
}else{
//Set Request header document type
xhr.setrequstheader (' Content-type ', ' application/x-www-form-urlencoded ');
Xhr.send (data);
}
Fourth step: Wait for the server to return content
What the Responsetext:ajax request returns
ReadyState Properties: Request Status
Onreadystatechang: Triggers When a state change occurs
xhr.onreadystatechange=function () {
the request status equals 4, which means the response content resolution is complete. The client can call the
if (xhr.readystate==4) {
//When the server status code equals 200, returns success on behalf of the server
if (xhr.status==200) {
//callback function
Success && Succss (xhr.responsetext);
}else{
Alert (' Error, ERR: ' +xhr.status ');
}
}
}
}
Call:
Ajax (' Get ', ' 1.php ', ' ', function (data) {
Console.log (data);
})
HTTP status code: total of 5 types
1 Word start: Represents message Type
2 Word Start: Represents success Type
3 Word start: Represents the type of the reset item
4 Word Start: Represents the error type
5 Words start: Error on behalf of server
Hope can help the needs of friends, help it people also help themselves!
Ajax detailing and encapsulation including HTTP status codes