Four steps: easily implement ajax to send asynchronous requests, and four steps: ajax

Source: Internet
Author: User

Four steps: easily implement ajax to send asynchronous requests, and four steps: ajax

Ajax sends asynchronous requests for your reference. The details are as follows:

Step 1(Get XMLHttpRequest)

Ajax actually only needs to learn one object: XMLHttpRequest. If you have mastered it, you will have mastered ajax !!!

1. Get XMLHttpRequest

Most browsers support var xmlHttp = new XMLHttpRequest ();
IE6.0: var xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP ");
IE5.0 is earlier than IE: var xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");

2. Compile a function to create an XMLHttpRequest object.

Function createXMLHttpRequest () {try {return new XMLHttpRequest ();} catch (e) {try {return new ActiveXObject ("Msxml2.XMLHTTP");} catch (e) {try {return new ActiveXObject ("Microsoft. XMLHTTP ");} catch (e) {alert (" Buddy, what browser are you using? "); Throw e ;}}}}

Step 2(Open the connection to the server)

XmlHttp. open (): used to open a connection to the server. It requires three parameters:

Request Method: GET and POST
Request URL: specify server resources, such as/day23_1/AServlet
Whether the request is asynchronous: if it is true, an asynchronous request is sent; otherwise, a synchronous request is sent.

XmlHttp. open ("GET", "/day23_1/AServlet", true); // for Example

Step 3(Send request)

XmlHttp. send (null): If you do not give it, Some browsers may not be able to send it!

Parameter: The request body content! For a GET request, null is required.
For POST requests

XmlHttp. send ("username = zhangSan & password = 123 ");

Step 4:

Register the listener onreadystatechange on an event of the xmlHttp object
The xmlHttp object has five statuses.

0: initialization is not complete. Only the XMLHttpRequest object has been created and the open () method has not been called.
1: The request has started, the open () method has been called, but the send () method has not been called
2: The request sending is complete. The send () method has been called.
3: start to read Server Response
4: The server read response ends (usually we only care about the final state !!!)

Get the status of the xmlHttp object

Var state = xmlHttp. readyState; // It may be 0, 1, 2, 3, or 4

Get the server response status code (200: Success 304: status has not changed 404 500: Server Error)

Var status = xmlHttp. status; // For example, 200, 404, 500

Get the server response content

Var content = xmlHttp. responseText; // get the content in the text format of the server response (this is more common) var content = xmlHttp. responseXML; // get the xml response content of the server response. It is a document object!

So the listener should write like this

XmlHttp. onreadystatechange = function () {// this method is called if (xmlHttp. readyState = 4 & xmlHttp. status = 200) {// dual judgment: determines whether the status is 4 and whether it is 200 var text = xmlHttp. responseText ;}};

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

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.