My browser's assistant-Ajax

Source: Internet
Author: User

The so-called Ajax is: "Asynchronous JavaScript and XML", Chinese meaning: Asynchronous JavaScript and XML. Ajax is not just a technology. It can be simply understood as a collection of JavaScript + XMLHttpRequest + CSS + servers.

Ajax is a technology on the browser side. Without your knowledge, you can quietly send requests sent from the browser side to the server and bring the data content back to the browser, parse the data in the browser and display it to the user. In addition, Ajax technology can be used to display data by PAGE, reduce the interactions between the browser and the server, and reduce the pressure on the server, in addition, the browser can reduce the user's waiting time, almost achieving the effect that the local data is so smooth. (Next time I will introduce the paging Function Using ajax)

The core of Ajax technology is XMLHttpRequest.

Aside from some official explanations today, let's talk about Ajax in my eyes.

Previously, when we submitted a request to the server through a browser, the browser will personally go to the server to submit the request. We (users) have been waiting in the process that the server has not returned a Response Request, nothing can be done until the browser obtains the data returned from the server before it can be parsed to us. For example: the server was busy at the time, regardless of the browser's submission of past requests, then we have to wait on the browser side, so we believe that you will not want to open this web page again next time.

On the contrary, with Ajax, Ajax is equivalent to a browser assistant. When a client submits a request to the server on the browser side, the browser will assign the task of submitting a request to the server and returning data to Ajax, And the browser can continue to interact with users before Ajax returns the data brought back from the server, this saves the user time and prevents the user from waiting for the completion of a request. (Compared with the multithreading described earlier, Ajax is equivalent to a new thread. When the browser sends this new thread out, it can also interact with the customer)

 

So how does Ajax assistant work for browsers? Here is an example of sending an assistant to buy beer:

1. First, call an assistant to create an XMLHTTPRequest object)

XMLHttpRequest xhr = new XMLHttpRequest ();

2. Tell the assistant how to go and where to buy beer, and ask the assistant to take the money (call the open () method of the XMLHTTPRequest object and set its parameters)

Xhr. Open ("get", "url", true );

The open () method has three parameters: the first parameter: whether to submit in get or post mode; the second parameter: the URL path of the submitted page; and the third parameter: whether to use Asynchronous execution (true or false ).

3. Tell the assistant where to put the beer bought before departure (set the onreadystatechange event and trigger a callback function, and determine whether Ajax has successfully brought back data from the browser based on the value of the readystate attribute)

Xhr. onreadystatechange = function (){

If (xhr. readystate = 4 ){

VaR result = xhr. responsetext;

Alert (xhr .);

}

}

4. Tell the assistant to start (send () method)

Xhr. Send (null );

For the parameters in the send () method, when the first parameter of the open () method above is get, the parameter in the send () method should be null, because even pages that want to pass some data to the request write data after the URL path, instead of passing parameters in send; for example, if you want to pass a value of name = admin to the URL:

Xhr. Open ("get", "url? Neme = admin ", true );

Xhr. Send (null );

When we set the POST method in the open () method, the data to be passed should be written in the send () method, or the above example:

Xhr. Open ("Post", "url", true );

Xhr. Send (name = admin );

In this way, we can implement the simplest task of assigning an assistant (Ajax) to buy beer.

Note: there are still many cases when Ajax is used for asynchronous implementation, for example, if the status attribute of the XMLHTTPRequest object is not 200 (200 indicates that the server has found the page requested by the browser and returned the corresponding content to the browser), how can this problem be solved, the readystate attribute has a total of five values (from 0 to 4). The sub-table indicates the situation in which the sub-table is located. If you want to transmit multiple data to the server, how can you transfer the data ......

The above situations also need to be determined based on our needs.

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.