Introduction to the
What is the
Asynchronous JavaScript and XML — Asynchronous JavaScript and XML
Ajax is a technology that allows you to update parts of a Web page without having to reload the entire page.
For example, if we go to a restaurant and order a table of dishes, then one of them is too salty, so all we have to do is ask the waiter to take it back for the chef to remake the same dish and bring it back.
In this example, the relationship between people and objects versus Ajax is shown in the following table:
When we find a dish that’s too salty, instead of asking the chef to do it all over again, we can just ask the waiter to take the dish back to the chef and do it all over again, which is essentially asking the Ajax object to go back and ask that little bit of data to come back and update the page without having to refresh the whole page.
background
Traditional web pages (which do not use Ajax) require reloading the entire page if you need to update content.
In the 1990s, almost all Web sites were HTML pages, and the server had to reload the page for every user request. What is the form? For example, when you log in to your Weibo account in your browser, you fill out the form, click the login button, and a “full” HTTP request is triggered. The server realizes that your login password is wrong and immediately returns the page to you as it was, in the user’s view, a reload. The user experience is terrible! This also wastes a lot of bandwidth because most of the HTML code in the two pages is often the same. Since each application communication requires sending a request to the server, the response time of the application depends on the response time of the server. This results in the user interface responding much more slowly than the native application.
The characteristics of
- Not a programming language, but a new way to use existing standards
- No need to load the entire interface, can exchange data with the server, update part of the page
- No browser plug-in is required, but the user does need to allow JS to run on the browser
Why you need Ajax
Without Ajax: The Web site forces the user into submit/wait/redisplay (reloading the entire page), increasing traffic to the server and reloading the entire page every time the user passes data to the server. In the case of Ajax: With a small data exchange with the server in the background, Ajax uses JavaScript and DHTML to update the UI immediately (partially refresh), which benefits the user because it does not interfere or interrupt the Web page he or she is working on.
Tip:
DHTML is a set of techniques for creating dynamic and interactive Web sites which is simply a combination of HTML, CSS, and JavaScript JavaScript is not the only client-side scripting language that uses Ajax to program; VBScript and other languages have this capability, but JavaScript is the most popular.
The working principle of
Technologies included
Ajax is based on existing Internet standards and uses them in combination:
- XMLHttpRequest object (asynchronously exchanging data with the server)
- JavaScript/DOM (information display/interaction)
- CSS (styling data)
- XML (as a format for transforming data)
The principle is briefly
The XMLHttpRequest object makes an asynchronous request to the server, gets data from the server, and then uses JavaScript to manipulate the DOM to update the page.
Principle of detail
Ajax works by adding an intermediate layer (the Ajax engine) between the user and the server, making the user’s actions asynchronous from the server’s response.
Not all user requests are submitted to the server, like – some of the data validation (such as whether the user input data) and data processing (such as digital) to determine whether the user input data to the Ajax engine to do, only need to read the new data from the server to the Ajax engine to submit a request to the server. Put this in the hands of an Ajax engine, and it feels much smoother to the user.
Common browser interaction mode:
How the browser’s Ajax interacts:
Synchronous and asynchronous
Asynchronous transmission is character-oriented transmission, its unit is character;
Synchronous transmission is bit-oriented transmission, which is measured in frames and requires the clock of the receiver and sender to be in sync.
If you synchronize, you must complete this operation before the next step can be executed. During this time, the browser will suspend and cannot execute any further JS code.
Asynchronous is to [tell] the browser to do, [tell] is an instant thing, and then continue to execute the next step, when the result is returned, the browser will inform JS to execute the corresponding callback.
Advantages and disadvantages
advantages
1. No refresh and update data.
The biggest advantage of Ajax is the ability to communicate with the server to maintain data without having to refresh the entire page. This makes Web applications more responsive to user interactions and eliminates the need to send messages over the network that do not change, resulting in a much better user experience by reducing user wait times.
2. Communicate with server asynchronously.
Ajax communicates with the server in an asynchronous manner, without interrupting the user’s operations, and is more responsive. Optimized the communication between Browser and Server to reduce unnecessary data transmission, time and network data traffic.
3. Front-end and back-end load balancing.
AJAX can transfer some of the work burden of the server to the client, and use the idle capacity of the client to deal with it, reduce the burden of the server and bandwidth, and save the cost of space and broadband rental. And reduce the burden of the server, Ajax principle is “data on demand”, can reduce the burden of redundant requests and responses on the server to the greatest extent, improve the performance of the site.
4. Standards-based are widely supported.
Ajax is based on standardized and widely supported technologies that do not require downloading browser plug-ins or applets, but require the customer to allow JavaScript to execute in the browser. As Ajax has matured, so have libraries that simplify the way Ajax is used. Similarly, another aided programming technique has emerged to provide alternative functionality for users who do not support JavaScript.
5. Separation of interface from application.
Ajax separates the interface from the application (or, in other words, data from presentation) on the Web, facilitates collaboration, reduces errors in Web applications caused by non-technical page modifications, improves efficiency, and is more suitable for today’s publishing systems.
disadvantages
1. Ajax kills Back and History, which breaks the browser mechanism.
In the case of dynamically updated pages, the user cannot go back to the previous page state because the browser can only remember static pages from the history. The difference between a page that has been read in its entirety and one that has been dynamically modified is subtle; Users often want to click the back button to cancel their previous action, but in an Ajax application, this will not be possible.
2. Ajax security issues.
Simple: Ajax exposes the details of how the browser interacts with the 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 leaves developers unintentionally exposing more data and server logic than ever before. The Ajax logic can be hidden from client-side security scanning techniques, allowing hackers to build new attacks from remote servers. Also, Ajax is not immune to known security vulnerabilities, such as cross-site footstep attacks, SQL injection attacks, and security vulnerabilities based on Credentials.
3. Weak support for search engines.
Search engine support is weak. If not used properly, Ajax can increase the volume of network data and thus slow down the performance of the entire system.
4. Break the exception handling mechanism of the program.
At least for now, Ajax frameworks like Ajax.dll and AjaxPro.dll can break the exception mechanism of a program. About this problem, once had encountered in the development process, but checked the net to have no relevant introduction almost. Then I did an experiment, using Ajax and the traditional form submission mode to delete a piece of data… To our debugging has brought great difficulties.
5. Defying the original purpose of URL and resource positioning.
For example, if I give you a URL, with Ajax, you might see something different under that URL than what I see under that URL. This is contrary to the original intention of resource localization.
6. Ajax does not work well on mobile devices.
Some handheld devices (such as mobile phones, PDAs, etc.) do not yet support AJAX well. For example, when we open AJAX websites on mobile browsers, it does not currently support AJAX.
7. The client side is too fat, too much client code causes the development cost.
Complex and error-prone writing; There’s a lot of redundant code (layers of JS files are a common Ajax problem, plus a lot of server-side code is now on the client); Breaking the Web’s original standards.