Ajax detailing and encapsulation including HTTP status codes

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