Learn Ajax Summary

First, the server client basic knowledge

Communication refers to the communication of different computer programs, only through the IP address can know which computer you are looking for, but do not know which application on the computer, to know which program must go through the port. This time you can ask what the port is, the simple point is that the port is the external connection of the computer exports, different applications of the export, so we can use the port to determine which application, usually said 80 port is the most WWW internet service port

In daily life we remember the domain name of the site, because the domain name is meaningful and easy to remember, and the IP address is not good to remember such as www.baidu.com. When we access the site through the domain name is actually divided into several steps

1, in the local Hosts file first query whether there is a local server to return files

2, if not the domain name resolution is DNS, because the server manufacturer will be the IP address corresponding to the domain name is saved to the computer, this computer holds the domain name and IP address mapping relationship

3, through the resolution of the IP address, the browser will send an HTTP request to the server

4. The server then returns data to the browser to parse the display page

Second, what can Ajax do

I think the most important core of Ajax is better interaction. Asynchronous JavaScript and XML. This is the Ajax explanation, in fact, the so-called asynchronous than synchronous Ajax advantages are expressed in: do not need to each page of the service side of the data to the server to get the data, but part to get the data, so that there will be no white screen and the current page is not available phenomenon, It can also reduce the request server and consume the resources to consume the bandwidth. So in our usual online process, what is the use of AJAX technology? Like what

1, Baidu Search tips 2, express ticket tracking 3, comment loading, etc.

You can see that they are not completely refreshed when they update the data, just where the data needs to be refreshed.

Third, the principle of Ajax

It can be said that the browser creates a request object for the element that needs to update the data, and the request object goes through the task of requesting data from the server for the browser. So the browser can go on to do something else. The specific steps are as follows

1, create the request object, but it should be noted that the compatibility of the browser, in order to code reuse I put the compatible code into a createrequest function

functioncreaterequest () {Try{Request=NewXMLHttpRequest (); } Catch(tryms) {Try{Request=NewActiveXObject ("Msxm12.xmlhttp"); }Catch(otherms) {Try{Request=NewActiveXObject ("Microsoft.XMLHTTP"); }Catch(failed) {Request=NULL; }        }    }    returnrequest; }

2, after creating the request object, it can be said that the current request object is just a child, because it does not know how to communicate with the server, and do not know what data to request to the server, so we need to set these properties for it, like teaching a child.

3, set up the Request object, you can establish a connection with the server, to establish a connection is the Open method

Request.open (' get/post ', ' url ', ' true/false ');

4, the establishment of a good connection, you can send the use of the

Request.send (NULL);

5. The next step is to invoke the callback function with Onreadystate.

Request.onreadystate = function () {}

What we need to know is that after sending the request to the server side, the server does not communicate with the browser after the data is fully parsed, but returns the corresponding status code of readystate at different stages, when readystate=2 indicates that the server is processing the request. Readystate=3 when the data is downloaded to the request object, but the response data is not ready, only when readystate=4 indicates that the server processing completion request data can be used, so we need to limit the time that the callback function executes when readystate = 4 and status=200 when executed

if (request.readystate = = 4) {  if (request.status = =) {      ///will return the data for processing, often using Json.parse to convert the string to JSON data    }      }

Iv. Cross-Domain Solutions

Ajax cannot achieve cross-domain because of security reasons, so there is a way to JSONP, but Jsonp is not really complicated. The principle is to find the resource file under different server by the SRC attribute of the script tag, and then the data is parsed, as long as there is a cross-domain capability for the tag with SRC attribute. Parsing the time due to stitching strings is cumbersome, you can use some template technology such as Arttemplate template engine.

V. The difference between get and post

From the aspect of use 1, the vast majority of requests are get requests, get way Ajax will have browser cache. 2, when the transmission of encrypted data and large amount of data with post from the monitoring request aspect 1, post data sent in the request body, the user is not visible 2, get sent data in the address bar

Learn Ajax Summary