Elaborate ajax--asynchronous request

With the development of the browser, from the original WEB1.0, to the present WEB2.0, as well as the future of the web3.0,ajax-asynchronous request data technology are we have to learn the mainstream technology. With this feature of Ajax, we can not only save our Internet traffic, but also run multiple operations at the same time. So what is Ajax? What is his main method? That's probably the point we're going to be talking about.

(a) What is Ajax

Ajax: The full name is asynchronous Javascript and XML, which is a web development technique for creating interactive Web applications. We call it asynchronous interaction technology.

The core of Ajax is the JavaScript object XMLHttpRequest. This object was first introduced in Internet Explorer 5, which is a technique that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and handle the response without blocking the user.

Advantages of Ajax:

Ajax is not a new programming language, but rather a technique for creating better, faster, and more interactive Web applications.

Use JavaScript to make requests to the server and handle the response without blocking the user! Core Object XMLHttpRequest.    With this object, your JavaScript can exchange data with the Web server without reloading the page, that is, the effect of a local refresh occurs without the need to refresh the page.    AJAX uses asynchronous data transfer (HTTP requests) between the browser and the Web server, which allows the Web page to request a small amount of information from the server, rather than the entire page. AJAX can make Internet applications smaller, faster, and friendlier. AJAX is a browser technology that is independent of WEB server software. Ajax is based on the following Web standards: The Web standards used in Ajax by JavaScript XHTML CSS are well defined and supported by all major browsers.  AJAX applications are independent of browsers and platforms. WEB applications have many advantages over desktop applications, they can involve a wide range of users, they are easier to install and maintain, and are more easily developed. However, Internet applications are not as perfect and friendly as traditional desktop applications.     With AJAX, Internet applications can become more complete and friendlier. "Above from Baidu Encyclopedia" work principle: The user sends the request through the browser, through the Ajax engine the Xmlhttrequest object sends the request to the server side, after the server accepts the request, through calls the data in the database, returns the data which we need, Then through the front desk engineers to present the data on our web page, so that we get information from the Web page the main process.How AJAX works(b) To elaborate Ajax first we should understand the most basic AJAX four-step programming format; 1. Create an Ajax object, send an HTTP request, (because XMLHttpRequest is a built-in object, we cannot call directly, we need to create a normal object)

   var  New XMLHttpRequest (); Hump naming law;

2. Monitor readystate status change (onreadystatechange function to monitor readystate state change)

  xhr.onreadtstetachange=function() {         if(xhr.readystate==4)          {The selected object. HTML=Xhr.responsetext};}

3. Start sending requests using the Open function

Xhr.open ("Get", "A.txt",true);

The open function has three parameters, the first parameter represents the sending method, the second parameter represents the destination to send, the third parameter is the type of the request, true represents the asynchronous request, and false represents the synchronous request.

4. Pass parameters with the Send function, (the format of the passed parameters is different depending on the request)

  Xhr.send (null);

The above is the simplest, the most basic, but also the most easy to understand.

The meaning of each function in a 4-step request:

1.XMLHttpRequest

This function has been explained in detail above, it is not many words;

2.onreadystatechange

is a method of XMLHttpRequest object, which is used to monitor the state change amount of readystate;

3.readystate

HTTP request status with a total of 0,1,2,3,4 v status. Colleagues are also attributes of XMLHttpRequest

Status significance

0 The open () function is not called

1 the Send () function is called

2 header file has been accepted by the server

3 start accepting something that the server returned and did not accept completely

4 Complete

From the code can be seen that we only care about 4 of this situation; when it comes to the head file, I would like to mention that the HTTP request is not passed through all of a sudden, he also needs to be packaged, packaged into a file form, sent to the server, his packaging is divided into header files and main files.

4.status HTTP status code (different status codes, with different meanings)

A. OK on behalf of the request data success;

304 Not Modified request path has not changed

404 Not Found File not found

503 Service Server Error

5. Open ()

The open method means that the XMLHttpRequest object is configured with a request, and after open does not actually send the request, it is sent using send

6.send ()

The Send method is the sending request, which represents the content that is carried in the HTTP request header.

Similarities and differences in Get and post requests

1. Get requests are used to fetch data to the server, and post is used to transfer data to the server;

2.get request generally accept or pass the content data is small, post on the size of the content is not limited;

3.post when submitting data, it is necessary to use form encapsulation, while get is not required;

4. When the parameters are passed, the get parameters are transmitted at the message head, and the post parameters are transmitted within the message body.

Let's take a look at the following example:

The format of the GET request:

//Get request   var xhr=xmltttprquest ();

Xhr.onreadtstetachange=function() {         if (xhr.readystate==4)          {The selected object. Html=Xhr.responsetext};}  

Xhr.open ("get?a=2&b=4", "A.txt", True),//get parameter passing method

Xhr.send (NULL);

Request format for post:

var xhr=xmltttprquest ();

Xhr.onreadtstetachange=function () {         if (xhr.readystate==4)          {The selected object. Html=xhr.responsetext};}

Xhr.open ("Post", "A.txt", true);
Xhr.setrequestheader ("Content-type", "Application/x-www-form-urlencode");//create a virtual form;

Xhr.send (a=1&b=2); the parameter passing method of//post

Capability detection, which is a compatibility issue

For the advanced browser, XMLHttpRequest must be no problem, but for IE6, people do not know it ah! IE6 know this new ActiveXObject ("Microsoft.XMLHTTP");

So there's a compatible notation:

   var   xhr;   if (window. XMLHttpRequest) {        xhrnew  XMLHttpRequest ();} Else if (window. ActiveXObject) {    xhrnew ActiveXObject ("Microsoft.XMLHTTP");}

So, a good Ajax request must take into account compatibility issues, although IE6 has been twilight.

These are just simple understandings of the basics of Ajax, and some of the advanced features in it are not mentioned, such as cross-domain implementations, and so on. I want to read this article, your understanding of Ajax will be more clear that!! Ha ha.... Hope to be helpful to you!! X Thank you!!

Elaborate ajax--asynchronous request