How Ajax works and its advantages and disadvantages

1. What is Ajax?
Ajax is called Asynchronous JavaScript and XML (Asynchronous JavaScript and XML). It is a Web page development technology used to create interactive web applications. It uses:
Use XHTML + CSS for standardized presentation;
Use XML and XSLT for data exchange and related operations;
Use the XMLHTTPRequest object for asynchronous data communication with the Web server;
Use JavaScript to operate the Document Object Model for Dynamic Display and interaction;
Use JavaScript to bind and process all data.

2. Comparison with traditional Web Applications
Traditional web application interaction triggers an HTTP request to the server. After the server processes the request, it returns a new hthl page to the client. When the server processes the request submitted by the client, customers can only wait idle, and even if they only need to get a simple data from the server for a small interaction, they must return a complete HTML page, every time, users have to waste time and bandwidth to re-read the entire page. This method wastes a lot of bandwidth. Because every application interaction requires sending requests to the server, the response time of the application depends on the server response time. This causes the user interface to respond much slower than the local application.
In contrast, an Ajax application can only send and retrieve necessary data to the server. It uses soap or some other XML-based Web service interfaces and uses JavaScript on the client to process responses from the server. Because the amount of data exchanged between the server and the browser is greatly reduced, we can see applications with faster response. At the same time, a lot of processing work can be done on the client machine that sends 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, so that user operations and server responses are asynchronous. Not all user requests are submitted to the server, for example, some data verification and data processing are handed over to the Ajax engine, the Ajax engine submits requests to the server only when it is determined that new data needs to be read from the server.

Ajax consists 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 operate the Dom and update the page. The most critical step is to obtain request data from the server. Let's take a look at these objects.
(1). XMLHTTPRequest object
One of the biggest features of AJAX is that data can be transmitted to or read/written to the server without refreshing the page. This feature is mainly due to the XMLHTTPRequest object of the XMLHTTP component.
XMLHTTPRequest object method description

Method	Description
Abort ()	Stop current request
GetAllResponseHeaders ()	Returns all Response Headers of an HTTP request as key/value pairs.
GetResponseHeader ("Header ")	Returns the string value of the specified header.
Open ("method", "url", [asyncflag], ["username"], ["password"])	Create a call to the server. The method parameter can be get, post, or put. URL parameters can be relative URLs or absolute URLs. This method also includes three optional parameters: asynchronous or not, user name, and password.
Send (content)	Send a request to the server
SetRequestHeader ("Header", "value ")	Set the specified header to the provided value. You must call open () before setting any header ().Set the header and send it together with the request (the 'post' method is required)

XMLHTTPRequest object attribute description

Genus	Description
Onreadystatechange	Status change event trigger. This event processor is triggered when every status change occurs. Generally, a JavaScript function is called.
Readystate	Request status. Five optional values: 0 = not initialized, 1 = loading, 2 = loaded, 3 = interaction, 4 = completed
Responsetext	Server Response,The text of the returned data.
Responsexml	Server Response,Returns the dom-compatible XML Document Object of the data,This object can be parsed into a DOM object.
Responsebody	Topic returned by the server (non-text format)
Responsestream	Data Streams returned by the server
Status	The HTTP status code of the server (for example, 404 = "found at the end of the file", 200 = "successful", etc)
Statustext	Status text 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 widely used in browsers.Programming Language.
(3). Dom Document Object Model
Dom is a set of APIS for HTML and XML files. It provides the structure of the file, allowing you to change the content and visible objects. In essence, it is to establish web pages and scripts orProgramA bridge of language communication. All the attributes, methods, and events that web developers can operate and create files are displayed as objects. For example, document represents the object, table objects represent HTML table objects ). These objects can be used as scripts by most browsers today. A webpage built with HTML or XHTML can also be seen as a group of structured data, which is blocked in the DOM (Document Object Model, dom supports reading and writing of objects in a webpage.
(4). xml
The Extensible Markup Language (Extensible Markup Language) has an open, scalable, and self-descriptive language structure that has become the standard for online data and document transmission, used for data exchange by other applications

.
(5). Comprehensive
The Ajax engine is actually a complicated JavaScript Application used to process user requests, read and write servers, and modify Dom content. The Ajax engine of JavaScript reads information and interactively overwrites the Dom, which enables the webpage to be modularized and restructured, that is, after the page has been downloaded, the page content is changed, this is a method that we have been using JavaScript and Dom extensively. However, to make webpages truly dynamic, not only internal interaction, but also external data needs to be obtained. In the past, we allow users to input data and Change Webpage content through DOM. But now, XMLHttpRequest allows us to read and write data on the server without reloading the page, minimize user input.

Ajax separates web interfaces from applications (data and presentation). In the past, there was no clear boundary between the two, and the separation of data and presentation, it is conducive to the division of labor and cooperation, reduces web application errors caused by non-technical staff modification, improves efficiency, and is more suitable for the current release system. You can also transfer the previous server workload to the client, which facilitates the idle processing capability of the client.

4. 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 allows web applications to respond to user interaction more quickly, avoiding the need to send unchanged information on the network, reducing user waiting time, and providing a good user experience.
<2>. asynchronous communication with the server.
Ajax uses an Asynchronous Method to communicate with the server. It does not need to interrupt user operations and provides more rapid response capabilities. The communication between browser and server is optimized to reduce unnecessary data transmission time and network traffic.
<3> balance frontend and backend loads.
AJAX can transfer the previous server workload to the client, and use the idle client capability to handle the workload, reducing the burden on servers and bandwidth, saves space and bandwidth rental costs. In addition, to reduce the burden on the server, the Ajax principle is to "retrieve data on demand", which can minimize the burden on the server caused by redundant requests and responses, and improve site performance.
<4>. It is widely supported based on standards.
Ajax is based on standardized and widely supported technologies. You do not need to download browser plug-ins or applets, but need to allow JavaScript to be executed in the browser. With the maturity of Ajax, some libraries that simplify Ajax usage have also been released. Similarly, there has also been another helper programming technology that provides alternative functionality for users who do not support JavaScript.
<5>. The interface and application are separated.
Ajax isolates the web interface from the application (data and presentation ), it is conducive to the division of labor and cooperation, reduces web application errors caused by non-technical staff modification, improves efficiency, and is more suitable for the current release system.

(2) Ajax disadvantages
<1>. Ajax removes the back and history functions, that is, damages the browser mechanism.
When a page is dynamically updated, the user cannot return to the status of the previous page, because the browser can only remember the static page in the history. The difference between a fully read page and a dynamically modified page is very subtle. users usually want to click the back button to cancel their previous operation, however, this cannot be implemented in Ajax applications.
The back button is an important feature 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 cancel the previous operation by going back. Is there any way to solve this problem? The answer is yes. If you have used Gmail, the Ajax technology used in Gmail solves this problem. You can withdraw from Gmail. However, it cannot change the Ajax mechanism either. It is just a stupid but effective method, that is, when the user clicks the back button to access the history, create or use a hidden IFRAME to reproduce changes on the page. (For example, when a user clicks back in Google Maps, it searches in a hidden IFRAME and then reflects the search result to the Ajax element, to restore the application status to the current state .)
However, although this problem can be solved, it brings about a very high development cost and deviates from the rapid development required by the Ajax framework. This is a very serious problem caused by Ajax.
According to a related opinion, using dynamic page update makes it difficult for users to save a specific State to favorites. The solution to this problem has also appeared. Most of them use the URL snippet identifier (usually called the anchor, that is, the # part following the URL) to keep track, allows the user to return to the status of a specified application. (Many browsers allow JavaScript to dynamically update the anchor, which allows Ajax applications to update the anchor while updating the display content .) These solutions also address a lot of arguments about not supporting the back button.
<2>. Ajax security issues.
Ajax technology brings a good user experience to users and brings new security threats to IT enterprises. Ajax technology is like establishing a direct channel for enterprise data. This allows developers to inadvertently expose more data and server logic than before. The Ajax logic can be hidden from the client's security scanning technology, allowing hackers to create new attacks from remote servers. There are also known security vulnerabilities that cannot be avoided by Ajax, such as cross-site scripting attacks, SQL injection attacks, and credentials-based security vulnerabilities.
<3>. weak support for search engines.
Weak support for search engines. If improperly used, Ajax will increase the network data traffic, thus reducing the performance of the entire system.
<4>. destroys the Exception Handling Mechanism of the program.
At least from the current perspective, Ajax frameworks such as Ajax. dll and ajaxpro. dll will destroy the program's exception mechanism. I have encountered this problem during the development process, but I have found that there is almost no relevant introduction on the Internet. A later experiment was conducted to delete a piece of data in Ajax and traditional form submission modes ...... It brings great difficulties to our debugging.
<5>. It violates the original intention of URL and resource positioning.
For example, if Ajax technology is used, 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>.AjaxNot SupportedMobile Devices.
Some handheld devices (such as mobile phones and PDAs) do not yet support Ajax. For example, Ajax is not supported when we open a website using Ajax technology on a mobile browser.
<7>. The client is too fat and there are too many clientsCodeThis causes development costs.
Coding is complex and error-prone; redundant code is relatively large (layer-by-layer inclusion of JS files is a common problem of Ajax, and many of the previous server-side code is now placed on the client), undermining the original web standards.

5. Ajax considerations and applicable and unsuitable scenarios
(1). Notes
During Ajax development, network latency-that is, the interval between the user sending a request and the server sending a response-requires careful consideration. Users who do not give explicit responses, do not have proper pre-read data, or improperly process XMLHttpRequest may feel delayed. This is what users do not want to see and cannot understand. The common solution is to use a visual component to tell the user that the system is performing background operations and reading data and content.
(2) Ajax application scenarios
<1>. Form-driven Interaction
<2>. Deep tree navigation
<3>. fast communication and response between users
<4>. Similar scenarios with no impact such as voting and yes/no
<5>. scenarios where data is filtered and manipulated
<6>. common text input prompts and Automatic completion scenarios
(3) Ajax not applicable scenarios
<1>. Some simple forms
<2>. Search
<3>. basic navigation
<4>. replace a large amount of text
<5>. Operations on Rendering

Refer to blog:
What Is Ajax
How Ajax works
Ajax principles and advantages and disadvantages
XMLHttpRequest Ajax instance Introduction