Easy understanding of Ajax Asynchronous Communication

First of all, let's briefly understand what Ajax is under idea:

Ajax is a technology that uses JavaScript and extensible editing language (XML) to transmit or receive data between Web browsers and servers.

Ajax is one of the core of Web. It is used in browsers to obtain part of the webpage information from the server.

Next, let's take a brief look at the working principle of Ghost:

The working principle of AJAX is equivalent to adding an intermediate layer between the user and the server to make the user request and Server Response asynchronous (we often use it for data verification ). In this way, you can also transfer some of the previous server workload to the client, and use the idle processing capability of the client to handle the workload, reducing the load on the server and broadband, it can also shorten user waiting time and improve work efficiency.

In this case, we can see the following two figures:

In the absence of Event requests using asynchronous communication technology, it is obvious that the password and other required information can be entered only after the notification is received. Is this a waste of time, sometimes it takes a long time, the user may be impatient, and it is not impossible to give up registration.

In order to use the asynchronous communication technology for Event requests, you do not have to wait for the message to return and continue to enter the message. When the user enters one of the following items, the notification message may be returned, and a prompt is provided in the corresponding place, which does not affect user operations. Is it very friendly and powerful.

The core of AJAX is the JavaScript Object XMLHttpRequest:

XMLHttpRequest provides the protocol for asynchronous communication between the client and the HTTP server. through this protocol, Ajax allows the page to exchange data with the server, like a desktop program, without refreshing the page every time, you do not have to submit the data processing work to the server every time. This reduces the server load, speeds up the response, and shortens the waiting time.

Learn how to use the XMLHTTPRequest object:

Abort ()	Stop current request
GetAllResponseHeaders ()	Returns the key/value string of all Response Headers of an HTTP request.
GetResponseHeader ("Header ")	Returns the string value of the specified header attribute.
Open ("method", "url", true)	Create a call to the server. The method parameter can be get post put, and the URL parameter can be relative URL or absolute URL. True/false indicates whether asynchronous communication is required.
Send (content)	Send a request to the server (if the GET request parameter is null)
SetRequestHeader ("Header", "value ")	Set the specified value for the specified header attribute

 

Learn about the attributes of several XMLHttpRequest objects:

A time trigger for changing the onreadystatechange status. It is usually bound to a JavaScript function. This function is called whenever the status changes.

The status of the readystate request. Five values are available:

0 = not initialized

1 = reading

2 = read

3 = interaction in progress

4 = complete

Responsetext response content in the form of text returned from the server

Responsexml XML document objects that are compatible with Dom returned from the server

Status Code returned from the server, such as 404 = "file not found", 200 =
"Successful"

Statustext status text returned from the server, such as OK or not found (not found)

Finally, let's take a look at the implementation code (with detailed comments, we can understand it after reading ):

<Script language = "JavaScript"> // defines a variable var xmlhttp = NULL that points to the XMLHTTPRequest object; // defines a function to create the XMLHTTPRequest object function createxmlhttprequest () {If (window. activexobject) {// indicates that the current browser is ie xmlhttp = new activexobject ("Microsoft. XMLHTTP ");} else if (window. XMLHttpRequest) {XMLHTTP = new XMLHttpRequest (); // indicates that the current browser is not IE, for example, Firefox} // defines a function to start asynchronous communication with the server. Function begin () {createxmlhttprequest (); // call the createxmlhttprequest function XMLHTTP. onreadystatechange = processor; // bind the event trigger to XMLHTTP on the processor. open ("get", "test. XML ", true); // use the get method to create a test on the server resource. an asynchronous call of XML to XMLHTTP. send (null); // send a request to the server. The parameter is null} // define a State processing function to process the state change function processor () {// if the request processing is complete if (XMLHTTP. readystate = 4) {// if the server returns a successful if (XMLHTTP. status = 200) {// report the content returned from the server to the user alert ("the content returned from the server is:" + XMLHTTP. responsetext);} else {alert ("request failed, error code =" + XMLHTTP. status) ;}}</SCRIPT>

The next blog will introduce the advantages and disadvantages of Ajax and how jquery encapsulates it to facilitate asynchronous communication.