Full Analysis of jQuery Ajax

What is Ajax

Ajax Basic Concepts

Ajax (Asynchronous JavaScript and XML): Translated into Chinese, it means asynchronous JavaScript and XML.

Functionally, it is a technology that can update some web pages without reloading the whole web page.

Traditional web page

To update content or submit a form, reload or refresh the page.

Web pages using ajax technology

With a small amount of data exchange through the background server, the web page can realize asynchronous local updating.

Before Ajax appeared

Before Ajax technology appeared, it was a world of synchronous interaction.

Synchronization: The client sends out a request, the server handles it, and then responds. The client is in a waiting state for this period of time. When the server handles the response, the client reloads the page. If the intermediate information is wrong, the client will initiate the request again and wait here.

After the appearance of Ajax

After the emergence of Ajax, the world changed into an asynchronous world.

Then why didn't we use asynchronism before? Because one object XMLHttpRequest object was missing before, Before this object appeared, web page development was synchronized. After it appeared, it was found that asynchronous operations could be carried out. This object is used for data exchange between background and server, and this data exchange will not reload the whole page. In this case, it realizes the update of local data without refreshing the page. After this object, it has asynchronous loading and local refreshing of Ajax.

Realization of asynchronous loading and local refresh function of Ajax

1. First of all, the first question is how to use the XHR object

1) Instantiate an XMLHttpRequest first

var request = new XMLHttpRquest();

Note: Most browsers now support XMLHttpRequest objects and new, but in the era of IE 6 and later, XHR was only ActiveXObject

Solution:

Var request; 
If(window.XMLHttpRequest){ 
Reuest = new XMLHttpRequest(); 
}else{ 
Request = new ActiveXObject( " Microsoft.XMLHTTP " ); 
}

2) Request:

Before that, let's look at what HTTP request

It is a rule for computers to communicate through the network.

Is a stateless protocol that does not retain information about connections.

The client makes a request to the server, and the server responds, and then the connection is closed

A complete HTTP request has 7 steps

A. Establishing an TCP connection

B. Client sends requested commands to server

C. Browser sends request header information

D. Server responds

E. Server sends reply header information

F. Server sends data to browser

G. Server closes TCP connection

Separately: The HTTP request is divided into four parts

Methods and Actions of HTTP Request (get, pos)

Requesting URL (Request Address)

Request header (containing client environment information, authentication information, etc.)

Request body, request body.

Get Request: 1 is used for information acquisition (http default request mode)

Url parameter attributes and values are visible, and there is a limit to the size of the sent content. Generally, it is 2000 characters

The get request is safe because you request 1 time and request 10, 000 times, the effect is 1, which will not affect the data.

Post Request: 1 is generally used for server data modification

There is no size limit on the message sent

The HTTP response has three parts

1) A status consisting of a number and text to show whether the request was successful or failed

2) Response header, and request header information 1 contain a lot of information, such as server type, date and time, content type and length, and so on

3) Response body, response body

HTTP Response Status consists of 3 digits, the first digit defining the type of status code:

1xx: Information class indicating that a browser request has been received and is being processed in step 1

2xx: Success indicates that the user request was correctly accepted

3xx: Redirect, indicating that no request was successful, and the customer must take the action of one step further

4xx: Client error, indicating that the client request has an error 404NOTFound means that the document referenced in the request does not exist

5xx: Server error indicating that the server cannot complete processing of the request

Send the request through XMLHttpRequest

1. Create

var request = new XMLHttpRquest();

Step 2 Send a request

Two methods:

open (method, url, async) and Send (string) can send requests to the server

Request.open(get,get.php,true)
Request.Send()
Request.open(post,post.PHP,true) 
Request.Send()
Request.open(post,post.php,true) 
Request.setRequestHeader( ' Content-Type','application/x-www-form-urlencoded') 
Request.send( " name= Wang 2 Dog &sex= Male " );

The content in send () is the parameter to be passed to the background. In get request, the parameter is passed through url, so the content in send () in get can be omitted, but it can't be omitted in post mode. After omission, it is a meaningless request

setRequestHeader is the type used to set the request parameters, form

3. Get the response

responseText: Getting responsive data in string form

responseXML:

Status and statusText: Do you return HTTP status as numbers and text

getAllResponseHeader (): Get all response headers

getResponseHeader (): Query the value of a field in the corresponding

The notification when the response returns successfully should be listened to in actual operation

readyState property changes, his changes represent the corresponding changes in the server

0: Indicates that the server request has not been initialized and open has not been called

1: The server connection has been established and open has been called

2: The request has been accepted and the header information has been received

3. During processing, the corresponding subject is received

4: The request is complete and the response is complete

Var request=new XMLHttpRequest();
Request.open(get,url,true)
Request.send();
request.onreadyState=function(){
 If(request.readeyState===4&&request.Status===200){
  Do 1 Something  request.responseText
 }
}