AJAX is a technology that can update parts of a web page without having to reload the entire web page.
No refresh data read
User login, stock fund network
Asynchronous, synchronous
AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML). AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server and updating a portion of a web page without reloading the entire page. There are many examples of applications that use AJAX: Sina Weibo, Google Maps, Kaixin, and more.
Traditional development mode: Each operation of the user triggers an HTTP request to return to the server. After the server processes it, it returns an html page to the user.
Ajax development mode: The page communicates the user's operation with the server through the ajax engine, returns the returned result to the ajax engine, and then ajax inserts the data into the specified location.
1. What is AJAX?
AJAX, dubbed "Asynchronous JavaScript and XML" (asynchronous JavaScript and XML), is a web development technology for creating interactive web applications. It uses:
Standardize rendering using XHTML+CSS;
Use XML and XSLT for data exchange and related operations;
Asynchronous data communication with the web server using the XMLHttpRequest object;
Use Javascript to manipulate the Document Object Model for dynamic display and interaction;
Bind and process all data using JavaScript.
2. Compare with traditional web applications
The traditional web application interaction is triggered by the user to send an HTTP request to the server. After the server processes it, it returns a new HTHL page to the client. Whenever the server processes the request submitted by the client, the client can only wait for idle, and Even if it's just a small interaction, just getting a very simple data from the server side, you have to return a full HTML page, and the user has to waste time and bandwidth to re-read the entire page. This approach wastes a lot of bandwidth, because each application interaction needs to send a request to the server, and the application's response time depends on the server's response time. This results in a much slower response from the user interface than the native application.
In contrast, AJAX applications can send and retrieve only the necessary data to the server. It uses SOAP or some other XML-based Web Service interface and uses JavaScript 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 that respond faster. At the same time, a lot of processing work can be done on the client machine that made the request, so the processing time of the web server is also reduced.
3. How AJAX works
Ajax works by adding an intermediate layer (AJAX engine) between the user and the server to make the user's operations asynchronous with the server response. Not all user requests are submitted to the server, and some data validation and data processing are given 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.
Ajax's core consists of JavaScript, XMLHTTPRequest, and DOM objects. The XmlHttpRequest object is used to send asynchronous requests to the server, obtain data from the server, and then use JavaScript to manipulate the DOM to update the page. The most critical step in this is getting the request data from the server. Let us understand these objects.
(1).XMLHTTPRequest object
One of the biggest features of Ajax is that it can transfer or read data to and from the server without refreshing the page (also known as no refresh update page). This feature is mainly due to the XMLHTTPRequest XMLHTTPRequest object.
XMLHttpRequest object method description
XMLHttpRequest object property description
(2).JavaScript
JavaScript is a programming language that is heavily 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 content and visible objects. The essence is to build a bridge between web pages and script or programming language. The properties, methods, and events that all web developers can manipulate and build are presented as objects (for example, document represents the "file itself" object, table objects represent HTML table objects, etc.). These objects can be accessed in script by most of today's browsers. A web page built with HTML or XHTML can also be thought of as a set of structured data that is encapsulated in the DOM (Document Object Model). The DOM provides support for reading and writing individual objects in the web page.
(4).XML
Extensible Markup Language has an open, extensible, self-describing language structure that has become the standard for online data and document transmission for other applications to exchange data.
(5). Comprehensive
The Ajax engine is actually a more complex JavaScript application that handles user requests, reads and writes to the server, and changes DOM content. The JavaScript Ajax engine reads the information and interactively rewrites the DOM, which allows the web page to be seamlessly refactored, that is, to change the page content after the page has been downloaded. This is what we have been using extensively through JavaScript and DOM. Method, but to make the webpage really dynamic, not only internal interaction, but also external data, in the past, we let the user input data and change the content of the webpage through DOM, but now, XMLHTTPRequest, let us Read and write data on the server without overloading the page to minimize user input.
Ajax separates the interface and application in the WEB (it can be said that the data and the presentation are separated). In the past, there is no clear boundary between the two, and the separation of data and presentation is separated, which is beneficial to the division of labor and cooperation, and reduces the non-technical personnel to the page. The modification caused by WEB application errors, improved efficiency, and more suitable for the current publishing system. It is also possible to pass on the work of some of the previous server burdens to the client, which is advantageous for the processing power of the client to idle.
4. Advantages and disadvantages of AJAX
(1). Advantages of AJAX
"1". No refresh update data.
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 more quickly to user interactions, and avoids sending unchanging information on the network, reducing user wait times and delivering a very good user experience.
"2". Communicate with the server asynchronously.
AJAX communicates with the server in an asynchronous manner, without interrupting the user's operation, and has a more rapid response capability. Optimized communication between Browser and Server, reducing unnecessary data transmission, time and reducing data traffic on the network.
"3". Front-end and back-end load balancing.
AJAX can transfer the work burdened by some previous servers to the client, use the ability of the client to idle, reduce the burden on the server and bandwidth, save space and broadband rental costs. And to ease the burden on the server, AJAX's principle is to "take data on demand", which can minimize the burden on the server caused by redundant requests and responses, and improve the performance of the site.
"4". It is widely supported based on standards.
AJAX is based on standardized and widely supported technologies that do not require the download of browser plugins or applets, but require the client to allow JavaScript to be executed on the browser. As Ajax matures, libraries that simplify the use of Ajax have also been introduced. Similarly, there is another technique for assisting programming that provides an alternative to users who don't support JavaScript.
"5". The interface is separated from the application.
Ajax separates the interface and application in the WEB (also can be said that the data is separated from the presentation), which is beneficial to the division of labor and cooperation, reducing the WEB application errors caused by non-technical personnel to modify the page, improving the efficiency, and is more suitable for the current release. system.
(2). The shortcomings of AJAX
"1". AJAX kills the Back and History functions, which is the destruction of the browser mechanism.
In the case of a dynamically updated page, the user cannot go back to the previous page state because the browser can only remember static pages 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 an Ajax application, this won't work. .
The back button is an important feature of a standard web site, but it doesn't work well with js. This is a serious problem brought by Ajax, because users often want to be able to cancel the previous operation by backing off. So is there a way to solve this problem? The answer is yes. I have used Gmail to know that the Ajax technology used in Gmail solves this problem. It can be backed up under Gmail. However, it does not change the mechanism of Ajax. It is only a stupid but effective one. The way to reproduce the changes on the page by creating or using a hidden IFRAME when the user clicks the back button to access the history. (For example, when a user clicks back in Google Maps, it searches in a hidden IFRAME and then reflects the search results on the Ajax element to restore the application state to its current state.)
However, although this problem can be solved, the development cost it brings is very high and deviates from the rapid development required by the Ajax framework. This is a very serious problem brought by Ajax.
A related point of view is that using dynamic page updates makes it difficult for users to save a particular state to a favorite. Solutions to this problem have also emerged, most of which use URL fragment identifiers (often referred to as anchors, ie, the part behind the # in the URL) to keep track of, allowing the user to go back to a specified application state. (Many browsers allow JavaScript to dynamically update anchor points, which allows Ajax applications to update anchor points while updating display content.) These solutions also solve many of the 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 ever before. Ajax logic can hide the client's security scanning technology, allowing hackers to create new attacks from remote servers. Ajax also has difficulty avoiding some known security vulnerabilities, such as cross-site footstep attacks, SQL injection attacks, and security holes based on CredenTIals.
"3". Support for search engines is weak.
Support for search engines is weak. If not used properly, AJAX will increase the flow of network data, thereby reducing the performance of the entire system.
"4". Destroy the exception handling mechanism of the program.
At least for now, Ajax frameworks like Ajax.dll, Ajaxpro.dll are damaging the program's exception mechanism. I have encountered this problem in the development process, but I have checked the Internet and there is almost no relevant introduction. I did a test later, using Ajax and the traditional form submission mode to delete a piece of data... which brought great difficulties to our debugging.
"5". The original intention of violating the URL and resource positioning.
For example, I will 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 this URL address. 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 by Ajax. For example, when we open Ajax-enabled websites on mobile browsers, it is currently not supported.
"7". The client is too fat, too much client code causes development costs.
Written complex, error-prone; redundant code is more (layered js file is a common problem of AJAX, plus many server-side code is now placed on the client); undermine the original standards of the Web.
5.AJAX attention points and applicable and not applicable scenarios
(1). be careful
When Ajax is developed, network latency—the interval between when a user makes a request and when the server sends a response—needs careful consideration. Failure to give the user a clear response, without proper read-ahead data, or improper handling of XMLHttpRequest, can cause delays for users, which users do not want to see and that 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 tree navigation
"3". Fast communication between users and users
"4". Similar to voting, yes/no, etc.
"5". A scenario for filtering and manipulating related data
"6". Normal text input prompts and auto-complete scenes
(3). Ajax is not applicable to the scene
"1". Some simple forms
"2". search for
"3". Basic navigation
"4". Replace a lot of text
"5". Manipulation of presentation
Stand Table Fan ,12 Inch Oscillating Table Fan,Pedestal Table Fan,Height Adjustable Table Fan
Foshan Shunde Josintech Electrical Appliance Technology Co.,Ltd , https://www.josintech.com