Ajax detailing and encapsulation including HTTP status codes

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.