Go How Ajax works and its pros and cons

1. 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. It uses:
Use XHTML+CSS to standardize presentation;
Using XML and XSLT for data exchange and related operations;
Asynchronous data communication with the Web server using the XMLHttpRequest object;
Use JavaScript to manipulate document Object model for dynamic display and interaction;
Use JavaScript to bind and manipulate all data.

2. Comparison with traditional Web applications
The traditional Web application interaction triggered by the user an HTTP request to the server, the server processes it and then returns a new HTHL page to the client, each time the server processes the client-submitted request, the customer can only idle wait, and even if only a small interaction, Just get a very simple data from the server side, all to return a full HTML page, and the user each time to waste time and bandwidth to re-read the entire page. This practice wastes a lot of bandwidth, and the response time of the application depends on the response time of the server, because each application's interaction needs to send a request to the server. This causes the user interface to respond much more slowly than the local application.
Unlike this, an AJAX application can send and retrieve only the necessary data to the server, using SOAP or some other XML-based Web service interface, and using JavaScript on the client to process the response from the server. Because the amount of data exchanged between the server and the browser is much reduced, the result is that we can see applications that respond faster. At the same time, a lot of processing can be done on the client machine making the request, so the processing time of the Web server is also reduced.

How

3.AJAX works
Ajax works by adding a middle tier (Ajax engine) between the user and the server, making the user operation and the server response asynchronous. Not all user requests are submitted to the server, such as data validation and processing, to be done by the Ajax engine itself, only to determine the need to read new data from the server and then by the Ajax engine to submit the request to the server.

Ajax has the core of JavaScript, XMLHttpRequest, Dom objects, through the XMLHttpRequest object to send an asynchronous request to the server, from the server to obtain data, Then use JavaScript to manipulate the DOM and update the page. One of the most critical steps is getting the request data from the server. Let's take a look at these few objects.
(1). One of the biggest features of the XMLHttpRequest object
Ajax is the fact that it is possible to transfer or read or write data to the server without refreshing the page (also known as no Refresh Update page), which is mainly due to the XMLHTTP component XMLHttpRequest object.
XMLHttpRequest Object method description  

Method	Description
Abort ()	Stop the current request
getAllResponseHeaders ()	Returns all response headers for an HTTP request as a key/value pair
getResponseHeader ("header")	Returns the string value of the specified header
Open ("Method", "URL", [asyncflag],["UserName"],["password"])	Establish a call to the server. The method parameter can be a GET, post, or put. The URL parameter can be a relative URL or an absolute URL. This method also includes 3 optional parameters, whether asynchronous, user name, password
Send (content)	Send a request to the server
setRequestHeader ("header", "value")	Sets the specified header to the value provided. The open () must be called before any headers can be set. Set the header and send it with the request (' post ' method must be)

XMLHttpRequest Object Property Description

HTTP status code for the

genus   /td>	Description     description
onreadystatechange	State-Changed event triggers, which trigger this event handler when each state changes. A JavaScript function is typically called
readyState	The state of the request. There are 5 desirable values: 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = completion of
responsetext	Server response, returns the text of the data.
responsexml	The response of the server, which returns a compatible DOM XML Document object for the data, which can be parsed as a DOM object.
responsebody	The topic returned by the server (non-text format)
responsestream	data flow returned by the server
status	server (for example: 404 = "file found at the end", 200 = "Success"  , etc.)
statustext	The status text information returned by the server, the corresponding text of the HTTP status code (OK or not Found (not found), and so on)

(2). Javascript
JavaScript is a programming language that is used extensively in browsers.
(3). DOM Document Object Model
The DOM is a set of APIs that are used for HTML and XML files. It provides a structural representation of the file, allowing you to change the contents and the visible objects. The essence is to establish a bridge between Web pages and script or program language. The properties, methods, and events that all Web developers can manipulate and create files are represented by objects (for example, document represents the "file itself" pair, the Table object represents the HTML table object, and so on). These objects can be used by most of today's browsers as script. A Web page built with HTML or XHTML can also be thought of as a set of structured data that is enclosed in the DOM (Document object Model), which provides read and write support for individual objects in a Web page.
(4). Xml
The Extensible Markup Language (extensible Markup Language) has an open, extensible, self-describing language structure that has become the standard for data and document transmission on the web and is used by other applications to exchange data.
(5). General
The Ajax engine, in effect, is a more complex JavaScript application that handles user requests, reads and writes to the server, and changes DOM content. JavaScript's Ajax engine reads the information and interactively rewrites the DOM, which allows the Web page to be reconstructed seamlessly, that is, after the page has been downloaded to change the content of the page, which we have been using JavaScript and Dom in a widely used way, but to make the Web page really dynamic up, Not only the internal interaction, but also the need to obtain data from the outside, in the past, we have to let users enter data and through the DOM to change the content of the Web page, but now, XMLHttpRequest, we can not overload the page to read and write data on the server, so that the user's input to a minimum.

Ajax separates the interface in the Web from the application (or the separation of data from the presentation), and in the past there is no clear boundary between the separation of data and presentation, which facilitates division of labor, reduces web application errors caused by non-technical changes to the page, improves efficiency, It is also more applicable to the current release system. It is also possible to pass on some of the previous server workloads to the client, which facilitates the client's ability to handle idle processing.

Advantages and disadvantages of 4.AJAX
(1). The advantages of Ajax
<1>: No refresh update data.
The biggest advantage of Ajax is the ability to communicate with the server to maintain data without refreshing the entire page. This enables the Web application to respond more quickly to user interactions and avoids sending information that is not changed on the network, reducing user latency and bringing a very good user experience.
<2>. Asynchronously communicates with the server.
Ajax uses asynchronous methods to communicate with the server, without interrupting the user's operations and having more rapid responsiveness. Optimize communication between browser and server, reduce unnecessary data transfer, time and reduce traffic on network.
<3>: Front-end and back-end load balancing.
Ajax can pass on some of the previous server workloads to the client, take advantage of the client's idle ability to handle, reduce server and bandwidth burden, 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.
<4> standards-based is widely supported.
Ajax is based on standardized and widely supported technologies that do not require a browser plugin or applet to be downloaded, but require the client to allow JavaScript to be executed on the browser. With the maturation of Ajax, a number of libraries that simplify the use of Ajax have been introduced. Similarly, there is another assistive programming technique that provides alternative functionality for users who do not support JavaScript.
<5>: interface and application separation.
Ajax separates the interface in the Web from the application (or the separation of data and rendering), facilitates division of labor, reduces web application errors caused by non-technical changes to the page, improves efficiency, and is more applicable to today's publishing systems.

(2). Disadvantages of Ajax
<1>. Ajax kills 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.
The Back button is an important feature of a standard web site, but it does not work well with JS. This is a serious problem with Ajax, because users often want to be able to undo the previous operation by going backwards. So is there any way to do this question? The answer is yes, using Gmail know, Gmail under the Ajax technology to solve the problem, in Gmail can be back, but it does not change the mechanism of Ajax, it is only a relatively stupid but effective way, that is, the user click the Back button to access the history To reproduce the changes on the page by creating or using a hidden iframe. (for example, when a user clicks back in Google Maps, it searches in a hidden iframe and then reflects the search results on an AJAX element to restore the application state to its current state.) ）
However, while this problem can be solved, the cost of development is very high and deviates from the rapid development required by the AJAX framework. This is a very serious problem caused by Ajax.
A related view is that using dynamic page updates makes it difficult for users to save a particular state to a collection. The solution for this problem has also occurred, with most of the URL fragment identifiers (often referred to as anchors, which are the parts of the # URL) to keep track of, allowing the user to return to the specified application state. (many browsers allow JavaScript to dynamically update the anchor point, which allows an AJAX application to update the anchor point while updating the display.) These solutions also address many of the arguments that do not support back buttons.
<2>. Security issues with Ajax.
Ajax technology provides users with a good user experience, but also brings new security threats to it enterprises, Ajax technology is like the enterprise data set up a direct channel. 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 weak.
Support for search engines is weaker. If used improperly, Ajax can increase the flow of network data, thereby reducing the overall system performance.
&LT;4&GT: The exception handling mechanism of the sabotage program.
At least for now, these Ajax frameworks, like Ajax.dll,ajaxpro.dll, can disrupt the program's exception mechanism. On this issue, had encountered in the development process, but looked at the internet there is little relevant introduction. Later, an experiment was done to delete a piece of data using Ajax and the traditional form submission mode ... It has brought us a lot of difficulties in debugging.
<5&gt: Violates the original intention of URL and resource location.
For example, I give you a URL address, if you use Ajax technology, perhaps you see below the URL address and what I see under this URL is different. This is contrary to the original intention of resource positioning.
<6>. Ajax does not support mobile devices very well.
Some handheld devices (such as mobile phones, PDAs, etc.) are not yet well-supported Ajax, for example, when we open a website with Ajax technology on a mobile phone's browser, it is currently unsupported.
<7> client-side fat, too many client-side code causes development costs.
Write complex, error-prone, redundant code is more (layer contains JS file is the common problem of Ajax, coupled with many of the previous service-side code is now placed on the client), destroying the original standards of the Web.

5.AJAX points of attention and applicable and non-applicable scenarios
(1). Attention Point
When Ajax is developed, network latency-that is, the interval between a user sending a request to a server to make a response-requires careful consideration. Not giving users a clear response, without proper pre-reading data, or improper handling of XMLHttpRequest, will make users feel delayed, which users do not want to see, but they do not understand. A common solution is to use a visual component to tell the user that the system is in the background and is reading data and content.
(2). Ajax Application Scenarios
<1>. form-driven interactions
<2> the navigation of a deep tree
<3> Fast communication between users and users
<4>: Similar to voting, yes/no and other irrelevant scenes
<5> Scenarios for filtering and manipulating data
<6>: Normal text input hints and auto-complete scenes
(3). Ajax Not applicable scenarios
<1> Part of a simple form
<2> search
<3> basic navigation
<4> Replace large amounts of text
<5> manipulation of the rendering

Reference blog:
"What is Ajax"
"How Ajax Works"
"Ajax principles and advantages and disadvantages"
Introduction to the XMLHttpRequest Ajax example

Go How Ajax works and its pros and cons