Ajax Foundation

Time:2021-7-20

brief introduction

What is it?

Asynchronous JavaScript and XML — asynchronous JavaScript and XML

AJAX is a technology that can update some web pages without reloading the whole web page.

For example, we went to a restaurant to eat, and then ordered a table of dishes. Later, we found that one of the dishes was too salty, so we just had to ask the waiter to serve it back to the chef to redo it and then bring it back.

In this example, the relationship between people and objects and AJAX is as follows:

Ajax Foundation

When we find that a dish is too salty, we don’t need to ask the chef to redo all the dishes. Just ask the waiter to take the dish back and redo it for the chef. This operation is equivalent to asking the Ajax object to request a small part of the data from the back end and then bring it back to update the page without having to refresh the whole page.

Background

Traditional web pages (without Ajax) need to reload the whole page if they need to update the content.

The general way to initiate a request is<input type="submit">

In the 1990s, almost all web sites were implemented by HTML pages, and the server needed to reload the web page to handle every user request. What is the form? For example, you log in your microblog account on the browser, fill in the form, click the login button, and a “complete” HTTP request is triggered. The server finds that your login password is wrong, and immediately returns the page to you. In the user’s opinion, it is a process of reloading! Poor user experience! And it wastes a lot of bandwidth, because most of the HTML code in the front and back pages is often the same. Because every application communication needs to send a request to the server, the response time of the application depends on the response time of the server. This results in a much slower user interface response than native applications.

characteristic

  • Not a programming language, but a new way to use existing standards
  • Without loading the whole interface, it can exchange data with the server and update some web pages
  • There is no need for browser plug-ins, but users need to allow JS to run on the browser

Why Ajax

**In the case of not using Ajax: * * the web site forces the user to submit / wait / redisplay (reload the whole web page), which increases the traffic for the server, and reloads the whole web page every time the user transmits data with the server.
**In the case of Ajax: * * through a small amount of data exchange with the server in the background, AJAX uses JavaScript and DHTML to immediately update the UI (partial refresh), which is beneficial to the user, because it will not interfere with or interrupt the web page he or she is using.

Tips:

DHTML is a technology set for creating dynamic and interactive web sites, which is simply a combination of HTML, CSS and JavaScript
JavaScript is not the only client scripting language using Ajax programming; VBScript and other languages have this feature, but JavaScript is the most popular.

working principle

Technologies included

AJAX is based on existing Internet standards and uses them in combination:

  • XMLHttpRequest object (exchange data with server asynchronously)
  • JavaScript / DOM (information display / interaction)
  • CSS (style data)
  • XML (as the format of transformed data)

Brief introduction of principle

Through the XMLHttpRequest object to send asynchronous requests to the server, get data from the server, and then use JavaScript to operate DOM to update the page.

Ajax Foundation

Detailed principle

The working principle of AJAX is equivalent to adding an intermediate layer (Ajax engine) between the user and the server, which makes the user’s operation asynchronous with the server’s response.

Not all user requests are submitted to the server. For example, data verification (such as judging whether the user has entered data) and data processing (such as judging whether the user’s input data is a number) are left to the Ajax engine itself. Only when it is determined that new data needs to be read from the server, the Ajax engine will submit the request to the server on its behalf. Give these to the Ajax engine, and the user will feel more fluent.
Ajax Foundation

Common interaction mode of browser:

Ajax Foundation

The interaction mode of Ajax in browser is as follows:
Ajax Foundation

Synchronous and asynchronous

Asynchronous transmission is character oriented and its unit is character;

Synchronous transmission is bit oriented transmission. Its unit is frame. When it transmits, it requires the clock of the receiver and the sender to be consistent.
Ajax Foundation
If the synchronization is completed, the next step will be executed. During the waiting period, the browser will hang up and cannot execute any subsequent JS code;

Asynchrony is to tell the browser to do it, which is an instant thing, and then continue to execute the next step. When the result returns, the browser will inform JS to execute the corresponding callback.

merits and demerits

advantage

1. No refresh update data.

The biggest advantage of AJAX is that it can communicate with the server to maintain data without refreshing the whole page. This makes web applications more responsive to user interaction, and avoids sending unchanged information on the network, reduces user waiting time, and brings a very good user experience.

2. Communicate with the server asynchronously.

Ajax communicates with the server asynchronously, so it doesn’t need to interrupt the user’s operation, so it has more rapid response ability. It optimizes the communication between browser and server, reduces unnecessary data transmission, time and data flow on the network.

3. Front end and back end load balancing.

Ajax can transfer the burden of the previous server to the client, and use the idle capacity of the client to deal with it, so as to reduce the burden of the server and bandwidth, and save space and broadband rental costs. And reduce the burden of the server. The principle of AJAX is “get data on demand”, which can minimize the burden of redundant requests and responses on the server and improve the performance of the site.

4. It is widely supported based on standards.

AJAX is based on standardized and widely supported technology. It doesn’t need to download browser plug-ins or applets, but it needs customers to allow JavaScript to execute on the browser. With the maturity of Ajax, some program libraries that simplify the use of Ajax have come out one after another. Similarly, there is another kind of auxiliary programming technology, which provides alternative functions for users who do not support JavaScript.

5. Separation of interface and application.

Ajax separates the interface and application (also can be said to be the separation of data and presentation) in the web, which is conducive to division of labor and cooperation, reducing web application errors caused by non-technical personnel’s modification of the page, improving efficiency, and more suitable for the current publishing system.

shortcoming

1. Ajax destroys the back and history functions, that is, it destroys the browser mechanism.

In the case of dynamic page update, the user cannot return to the previous page state, 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 action, but in Ajax applications, this won’t work.

2. The security of Ajax.

Simple version: Ajax exposes the details of interaction between browser and server.

Ajax technology not only brings good user experience to users, but also brings new security threats to IT enterprises. Ajax technology is just like establishing a direct channel for enterprise data. This makes developers inadvertently expose more data and server logic than before. Ajax logic can hide the client’s security scanning technology, allowing hackers to establish new attacks from the remote server. In addition, AJAX is also difficult to avoid some known security weaknesses, such as cross site footstep attack, SQL injection attack and security vulnerabilities based on credentials.

3. Weak support for search engine.

The support for search engine is weak. If not used properly, AJAX will increase the network data flow, thus reducing the performance of the whole system.

4. Break the exception handling mechanism of the program.

At least for now, AJAX frameworks like ajax.dll and Ajax pro.dll will break the exception mechanism of programs. About this problem, once encountered in the development process, but checked the Internet, almost no relevant introduction. Later, we did an experiment to delete a piece of data using Ajax and traditional form submission mode, which brought us great difficulties in debugging.

5. Violate the original intention of URL and resource location.

For example, I give you a URL address. If Ajax technology is used, 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 can’t support mobile devices well.

Some handheld devices (such as mobile phones, PDAs, etc.) can’t support Ajax very well now. For example, when we open a website using Ajax technology on the mobile browser, it doesn’t support it at present.

7. The client is too fat, too much client code causes the cost of development.

Writing is complex and error prone; There are many redundant codes (layer by layer including JS files is a common fault of Ajax, and a lot of previous server code is now put on the client); It breaks the original standard of web.

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]