What is the principle of Ajax? Analysis of common properties and principles of Ajax (summary)

This article mainly describes the Ajax of some of their own summary, some questions and some answers, hoping to help everyone. Now let's see this article together.

First Ajax is the full name of asynchronous JavaScript and XML,asynchronous is asynchronous, which is different from the traditional web.

What is synchronous and what is asynchronous?

synchronization, after the sender sends the data, it must wait until the recipient receives the data and must respond before the next step can proceed.

Asynchronously, the sender does not need to wait for the receiver to respond after sending the data, and can proceed to the next step.

To give an example of an image, synchronization is like a called B to eat, a send an invitation, to B to eat together, at this time must wait for B to respond, eat or not to eat, a to decide whether a person to eat or wait for B to go together, and asynchronous words like to work, A and b say a to eat, and then go, whether B do any response.

Ajax Principles

In short, it is through the XMLHttpRequest object like the server sends the asynchronous request, obtains the data from the server, then uses the JS to manipulate the DOM node.

XMLHttpRequest Object

Method:

1.open (request type, URL, Boolean)

The 2.send () parameter is the data that is sent as the request principal, and Null is passed in if the request principal is not required to send data

3.abort () Cancel asynchronous request

4.< Span style= "Color:rgb (51,51,51); Font-family:verdana, Arial, Helvetica, sans-serif;font-size:13.63636302948px; line-height:22.9090919494629px; " >getallresponseheaders () Returns the

For all response headers of the HTTP request as key/value pairs

< Span style= "Color:rgb (51,51,51); Font-family:verdana, Arial, Helvetica, sans-serif;font-size:13.63636302948px; line-height:22.9090919494629px; " >5.getresponseheader ("header") Returns the string value of the specified header

< Span style= "Color:rgb (51,51,51); Font-family:verdana, Arial, Helvetica, sans-serif;font-size:13.63636302948px; line-height:22.9090919494629px; " >6.setrequestheader ("header", "value") Set the header and send it with the request (' post ' method must be)

Common Properties of Ajax:

1.readyState represents the current active phase of the request/response process (0: Uninitialized, the Open method has not been called, 1: Started, the Open method has been called, the Send method has not been called, 2: Sent: Send was called, no response was received, 3: Received, received partial response data ; 4. Complete, can be used on the client)

The value of 2.onreadystatechange readystate is changed once and this method is called once (want to see more on the Topic.alibabacloud.comAJAX Development Manual section of the study)

3.responseText text returned as the response body

4.responseXML XML DOM document that holds response data of response type "Text/xml" or "Application/xml"

HTTP status of the 5.status response

Description of the 6.statusText HTTP status

The following creates a Xhr object:

function Createxhr () {if (typeof XMLHttpRequest! = "undefined") {return new XMLHttpRequest ();} else if (typeof activexobject! = "undefined") {if (typeof arguments.callee.sctiveXString! = "string") {var versions = [" MSXML2. xmlhttp.6.0 "," MSXML2. xmlhttp.3.0 "," MSXML2. XMLHttp "],i,len;for (i =0;i<versions.length;i<len;i++) {try{new ActiveXObject (versions[i]); arguments.callee.activeXString = Versions[i];break;} catch (ex) {skips}}}return new ActiveXObject (arguments.callee.activeXString);} Else{throw new Error ("No XHR object Available");}} var xhr = createxhr (); xhr.onreadyststechange = function () {if (xhr.readystate = = 4) {if (Xhr.status >= && xhr . Status <300) | | 304) {alert (xhr.responsetext);} Else{alert ("Request bit Success" + Xhr.status);}}; Xhr.open ("Get", "Aaa.txt", true); Xhr.send (null);

Ajax Benefits:

1. No refresh update data, reduce user wait time, better user experience

2. Asynchronously communicates with the server without interrupting the user and responding more quickly

3. You can transfer some of the server's burden to the client, use the client's idle capacity to handle, reduce the burden of server and bandwidth, and save space and broadband rental costs. and reduce the burden of the server, the principle of Ajax is "on-demand data", can minimize the redundancy request and response to the burden on the server, improve site performance.

5. Based on standardization, widely supported

Ajax Disadvantages

1. The forward and backward function is broken, and the user often cancels the previous operation with the Back button, but cannot be implemented using AJAX. Can use Gmail to solve this problem, It's just a stupid but effective way to do that when users click the Back button to access history by creating or using a hidden iframe

2. Security issues. ajax Technology is like establishing a direct channel to enterprise data. This allows developers to inadvertently expose more data and server logic than ever before. ajax Logic can be hidden from the client's security scanning technology, allowing hackers to create new attacks from remote servers. It also has its own subject to attacks such as cross-site scripting attacks, SQL injection, and so on.

3. Weak for search engine support

4. Some handheld devices are not well supported, etc.

This is the end of this article (want to see more on the Topic.alibabacloud.comAJAX User manual section of the study), there are questions can be in the message below the question.