1. What is AJAX?
AJAX is called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), which is a web development technology for creating interactive web applications. It uses:
use XHTML + CSS to standardize the presentation;
use XML and XSLT for data exchange and related operations;
use XMLHttpRequest object and Web server for asynchronous data communication;
use Javascript to operate Document Object Model for dynamic display and interaction;
use JavaScript binding and Process all data.
2. Compared with traditional web applications
In traditional Web application interaction, the user triggers an HTTP request to the server, and the server processes it and then returns a new HTHL page to the client.Whenever the server processes the request submitted by the client, the client can only wait idle, and Even if it is only a small interaction, only a simple piece of data needs to be obtained from the server, a complete HTML page must be returned, and the user has to waste time and bandwidth every time to re-read the entire page. This approach wastes a lot of bandwidth. Since each application interaction requires a request to be sent to the server, the application's response time depends on the server's response time. This causes the user interface to respond much slower than native applications.
Unlike this, AJAX applications can only send and retrieve necessary data to the server, it uses SOAP or some other XML-based Web Service interface, and uses JavaScript on the client to process the response from the server. Because the amount of data exchanged between the server and the browser is greatly reduced, as a result we can see applications that respond faster. At the same time, a lot of processing work can be completed on the client machine making the request, so the processing time of the Web server is also reduced.
3. How AJAX works
The working principle of Ajax is equivalent to adding an intermediate layer (AJAX engine) between the user and the server to make the user operation and the server response asynchronous. Not all user requests are submitted to the server. Some data verification and data processing are left to the Ajax engine to do it. Only when it is determined that new data needs to be read from the server, the Ajax engine submits the request to the server.
The core of Ajax is composed of JavaScript, XMLHTTPRequest, and DOM objects. It sends asynchronous requests to the server through the XmlHttpRequest object, obtains data from the server, and then uses JavaScript to manipulate the DOM to update the page. The most critical step is to obtain the request data from the server. Let us understand these objects.
(1)
. One of the biggest features of the XMLHTTPRequest object Ajax is that it can transmit or read or write data to the server without refreshing the page (also known as refreshing without refreshing the page). This feature mainly benefits from the XMLHTTPRequest object of the XMLHTTP component.
XMLHttpRequest object method description
XMLHttpRequest object method description
XMLHttpRequest object property description
(2).
JavaScript JavaScript is a programming language that is widely used in browsers.
(3). DOM Document Object Model
DOM is a set of APIs for HTML and XML files. It provides a structural representation of the file, allowing you to change the contents and visible objects. Its essence is to build a bridge between web pages and script or programming language. All the properties, methods and events that WEB developers can manipulate and create files are displayed as objects (for example, document stands for "file itself", table object stands for HTML table object, etc.). These objects can be accessed in Script by most browsers today. A web page built with HTML or XHTML can also be regarded as a set of structured data. These data are enclosed in a DOM (Document Object Model). The DOM provides support for reading and writing various objects in the web page.
(4). XML
Extensible Markup Language (Extensible Markup Language) has an open, extensible, and self-describing language structure. It has become the standard for data and document transmission on the Internet and is used by other applications to exchange data. .
(5). The integrated
Ajax engine is actually a relatively complex JavaScript application used to process user requests, read and write servers, and change DOM content. JavaScript's Ajax engine reads the information and interactively rewrites the DOM, which allows the web page to be seamlessly reconstructed, which is to change the content of the page after the page has been downloaded. This is what we have been using widely through JavaScript and DOM Method, but to make the webpage truly dynamic, it not only needs internal interaction, but also needs to obtain data from the outside. In the past, we let users enter data and change the content of the webpage through the DOM, but now, XMLHTTPRequest can let us Read and write data on the server without reloading the page to minimize user input.
Ajax separates the interface and application in WEB (also can be said to be the separation of data and presentation). In the past, there was no clear boundary between the two. The separation of the separation of data and presentation is conducive to the division of labor and cooperation, reducing the number of non-technical personnel The web application errors caused by the modification, improve efficiency, and are more suitable for the current publishing system. It is also possible to transfer some of the previous work burdened by the server to the client, which is beneficial to the client's idle processing power.
4. The advantages and disadvantages of AJAX
(1). Advantages of AJAX
<1>. Update data without refreshing.
The biggest advantage of AJAX is that it can communicate with the server to maintain data without refreshing the entire page. This makes Web applications more responsive to user interaction, avoids sending unaltered information on the network, reduces user waiting time, and brings a very good user experience.
<2>. Communicate asynchronously with the server.
AJAX uses asynchronous mode to communicate with the server, without interrupting the user's operation, and has a more rapid response capability. Optimize the communication between Browser and Server, reduce unnecessary data transmission, time and reduce data traffic on the network.
<3>. Front-end and back-end load balancing.
AJAX can transfer some of the burden of the previous server to the client, use the idle capacity of the client to handle, reduce the burden of the server and bandwidth, and save space and broadband rental costs. And to reduce the burden on the server, the principle of AJAX is "fetch data on demand", which can minimize the burden of redundant requests and responses on the server and improve site performance.
<4>. It is widely supported based on standards.
AJAX is based on a standardized and widely supported technology that does not require downloading browser plug-ins or applets, but requires customers to allow JavaScript to execute on the browser. As Ajax matures, some libraries that simplify the use of Ajax have also appeared. Similarly, another technology for assisting programming has emerged to provide alternative functions for users who do not support JavaScript.
<5>. Separation of interface and application.
Ajax separates the interface and application in WEB (also can be said to be the separation of data and presentation), which is conducive to the division of labor and cooperation, reduces WEB application errors caused by non-technical personnel to modify the page, improves efficiency, and is more suitable for the current release system.
(2). The shortcomings of AJAX
<1>. AJAX eliminates the Back and History functions, that is, the destruction of the browser mechanism.
In the case of dynamically updating pages, the user cannot return 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; users usually 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 function of a standard web site, but it cannot cooperate well with js. This is a serious problem caused by Ajax, because users often want to be able to cancel the previous operation by going back. So is there a solution to this problem? The answer is yes. I have used Gmail to know that the Ajax technology used under Gmail solves this problem. It can be retreated under Gmail. However, it does not change the mechanism of Ajax. Method, that is, when the user clicks the back button to access the history, the changes on the page are reproduced by creating or using a hidden IFRAME. (For example, when a user clicks back on Google Maps, it is in a hidden IFRAME in the search, then the search results will be reflected in the Ajax elements to restore the application state to state at the time.)
However, although This problem can be solved, but the development cost it brings is very high, and it is contrary to the rapid development required by the Ajax framework. This is a very serious problem caused by Ajax.
A related point of view is that using dynamic page updates makes it difficult for users to save a particular state to favorites. Solutions to this problem have also emerged, and most use URL fragment identifiers (often called anchors, that is, the part after the # in the URL) to keep track and allow users to return to a specified application state. (Many browsers allow JavaScript to dynamically update the anchor point, which enables Ajax applications to update the anchor point while updating the displayed content.) These solutions also resolve many of the arguments about not supporting the back button.
<2>. AJAX security issues.
AJAX technology brings a good user experience to users and also brings new security threats to IT companies. Ajax technology is like establishing a direct channel for enterprise data. This allows developers to inadvertently expose more data and server logic than before. Ajax's logic can hide the client's security scanning technology, allowing hackers to establish new attacks from remote servers. Ajax is also difficult to avoid some known security weaknesses, such as cross-site footstep attacks, SQL injection attacks, and Credentials-based security vulnerabilities.
<3>. Weak support for search engines.
Support for search engines is relatively weak. If used improperly, AJAX will increase the flow of network data, thereby reducing the performance of the entire system.
<4>. Break the exception handling mechanism of the program.
At least from the current point of view, Ajax frameworks like Ajax.dll and Ajaxpro.dll will destroy the abnormal mechanism of the program. Regarding this problem, I have encountered it in the development process, but I checked it and there is almost no relevant introduction on the Internet. Later, I did an experiment, using Ajax and the traditional form submission mode to delete a piece of data ... brought great difficulty to our debugging.
<5>. Violates the original intention of URL and resource location.
For example, I give you a URL address. If you use Ajax technology, maybe what you see under the URL address is different from what I see under the URL address. This is contrary to the original intention of resource positioning.
<6>. AJAX does not support mobile devices well.
Some handheld devices (such as mobile phones, PDAs, etc.) do not yet support Ajax very well. For example, when we open a website that uses Ajax technology in the browser of a mobile phone, it does not currently support it.
<7>. The client is too fat, too much client code causes development costs.
Writing is complex and error-prone; there are many redundant codes (including js files at every level is a common problem of AJAX, plus many server codes in the past are now put on the client); it breaks the original Web standards.
5. AJAX attention points and applicable and unsuitable scenarios
(1). Note that
when developing Ajax, the network delay-that is, the interval between the user's request and the server's response-needs careful consideration. Failure to give users a clear response, lack of proper pre-read data, or improper processing of XMLHttpRequest will cause users to feel delayed. This is what users do not want to see and they cannot understand. The usual solution is to use a visual component to tell the user that the system is performing background operations and is reading data and content.
(2). Ajax application scenario
<1>. Form-driven interaction
<2>. Deep-level tree navigation
<3>. Quick user-to-user communication response
<4>. Nothing like voting, yes / no, etc. Scene
<5>. Scenes for filtering and manipulating related data
<6>. Common text input prompts and auto-complete scenes
(3). Ajax is not suitable for scenes
<1>. Some simple forms
<2>. Search
<3>. Basic navigation
<4>. Replace a large amount of text
<5>. Manipulate the presentation