How does Ajax work? An introduction to the working principle of Ajax and analysis of its advantages and disadvantages

This article mainly introduces the definition of Ajax and the principle of Ajax work. Finally there is an introduction to the pros and cons of Ajax. Let's go into this article together

1. Concept: What is Ajax
Ajax is all called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML) and is a web development technique for creating interactive Web applications.
2. Why use him?
The biggest advantage: Do not refresh the entire page in the case of communication with the server to maintain the original page state, popular point, when browsing the web when there are two cases, click, 1, White screen, waiting to jump to another page. 2. The page does not refresh, local appearance of new content for a better user experience.
3. Fundamentals
Look at the picture first
XHR is the equivalent of a communication soldier, responsible for the communication between the client and the server. To fight, the front position can not just wait for the communication of the message to the other side do not do it, so the front of the position is still doing their own things sent to request the command of the rear Commander (server), command Orders command, the commander of the command sent to the front position (client), and then the client bar data rendering to the page.
3. What is XHR? (How Ajax Works)
His full name is Xmlhttprequest,ajax the asynchronous request is sent through the browser's built-in object Xhmhttpresquest, and the asynchronous request does not interfere with any action on the forward position (the client).
4. Understanding Asynchronous and synchronous
Just said asynchronous, that what is synchronous, synchronization is the forward position and the communicator to go like the server to request data, until the request to the data by the communicator I started rendering the page, in the process of the request has been white screen waiting.
What are the properties of a 5.XMLHttpResquest object?
Since Ajax is handling asynchronous requests through the browser's built-in object XMLHttpRequest, let's start by knowing what attributes he has.
Property Description
1. onreadystatechange Event trigger with state change triggers this event handler when each state changes, usually invoking a JavaScript function
2. Status of the ReadyState request:
0> Request not initialized
1> server link established
2&gt: Request received
3&GT: in Request processing
4&GT: The request is complete and the response is ready
3.responseText returns the requested data text
4.responseXML return XML Document Object
5.status return status code such as 404 200

6. Create an XMLHttpRequest object and send an AJAX request
To deal with all modern browsers, check whether XMLHttpRequest objects are supported (see more on the Topic.alibabacloud.comAJAX Development Manual section)

 Window.onload = function () {//1. Create XMLHttpRequest Object consider compatibility var XHR = null if (window. XMLHttpRequest) {//modern browser XHR = new XMLHttpRequest ()}else{xhr = new ActiveXObject (' MICROSOFT.XMLH TTP ')//ie5/6}} console.log (' state A ' +xhr.readystate)//2. Set the request mode. First way GET request (2) Post request var url = ' data '//get request, true asynchronous request, false, synchronous xhr.open (' Get ', url, True) Console.log (' State B ' +xhr.readysta TE)/* (2) Post request must add the request header var url = ' data ' Xhr.open (' post ', URL, True) xhr.setrequesthander (' Content-type ', ' appli   Cation/x-www-form-urlencoded ') *///3. Send Request Xhr.send () Console.log (' status C ' +xhr.readystate)//4. callback function Xhr.onreadystatechange = function () {if (xhr.readystate = = 4 && Xhr.status = =) {Console.log (XHR.R Esposetext)//String//console.log (Xhr.resposexml)}} 

Advantages of Ajax:
1. The biggest advantage is that the page does not need to refresh, in the page to communicate with the server, a very good user experience.
2. Use asynchronous to communicate with the server, no interruption operation is required.
3. The workload of the previous server can be passed on to the client, reducing the server and bandwidth to minimize redundancy requests.
Disadvantages of Ajax:
1.AJAX killed the back and the history function, which is the destruction of the browser mechanism.
In the case of dynamically updating the page, the user cannot go back to the previous page state because the browser can only remember the static pages in the history. The difference between a fully read page and a page that has been dynamically modified is very subtle; The user will typically want to click the Back button to cancel their previous operation, but in an AJAX application this will not be possible.
2. Security-related technologies also pose new security threats to IT companies, and Ajax technology is just like building a direct channel to enterprise data. This allows developers to inadvertently expose more data and server logic than ever before. The logic of Ajax can be hidden from the client's security scanning technology, allowing hackers to create new attacks from remote servers. And Ajax also makes it difficult to avoid some known security weaknesses, such as cross-site footstep attacks, SQL injection attacks, and credentials-based security vulnerabilities.
3. Support for search engines is weaker. If used improperly, Ajax can increase the flow of network data, thereby reducing the overall system performance.
4. Some handheld devices (such as mobile phones, PDAs, etc.) are not yet well-supported Ajax, for example, when we open a website using AJAX technology on a mobile phone's browser, it is currently unsupported, and of course, this problem does not have much to do with us. (This time we can use other plugins to replace)

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.