Home >Web Front-end >JS Tutorial >Advantages and Disadvantages of AJAX
1. What is AJAX
In 2005, JesseJames Garrett of Adaptive Path invented the word Ajax. He gave Ajax a clear definition in his published article "A new approach to web applications ”, Ajax is a technology used to summarize asynchronous loading of page content. Through page click events, requests are continuously sent to the server, and then the server will return the latest data in real time. This is the function of AJAX.
As a fusion of multiple ideas and technologies, if we break it down, we can see these keywords: Asynchronous JavaScript And XML, asynchronous JavaScript and XML. In the process of using AJAX, we are definitely indispensable in the use of these technologies: using XHTML and CSS standards-based representation technology, using DOM for dynamic display and interaction, using XML and XSLT for data exchange and processing, and using XML HttpRequest for asynchronous data processing. Retrieve and use JavaScript to combine the above techniques. Among them, the core technology of Ajax is XMLHttpRequest, referred to as XHR.
2. Development Prospects
Gmail has almost the same function as Outlook Express when sending and receiving emails, and it does not require the installation of a client program. None of the existing browsers can handle complex images like desktop programs like PhotoShop. But we cannot ignore its influence and impact.
3. Advantages (improving user experience)
User experience For example, if the community where your home is located is facing a water outage due to some circumstances, the relevant departments have now announced two There are two options, one is to completely stop the water supply for 8 hours, completely stop the water supply during these 8 hours, and return to normal after 8 hours. The second is to not completely cut off the water for 10 hours. During these 10 hours, the water is not completely cut off, but the flow rate is much smaller than before. After 10 hours, the normal flow rate is restored. So, which method would you choose if it were you? ? Apparently it's the latter.
Asynchronous transmission is a character-oriented transmission, and its unit is a character; while synchronous transmission is a bit-oriented transmission, and its unit is a frame. When transmitting, it requires the clocks of the receiver and the sender. is consistent.
Asynchronous generally each group is an 8-bit character. There is a start bit and a stop bit at the head and tail of each group. It is During the transmission process, the clocks of the receiver and the sender are not required to be consistent. That is to say, The asynchronous sender can send these groups at any time, and the receiver does not know when it arrives.
Each asynchronously transmitted information begins with a start bit, which notifies the receiver that the data has arrived, which gives the receiver the opportunity to respond, receive and cache data bit time; at the end of the transmission, a stop bit indicates the termination of the transmission information. The stop bit changes the signal back to 1, where it remains until the next start bit arrives.
The bit packets transmitted simultaneously are much larger. Instead of sending each character independently, each with its own start bit and stop bit, it combines them and sends them together. We call these combinations data frames, or simply frames. Ensure that the sampling speed of the receiver is consistent with the arrival speed of bits, so that the sending and receiving parties are synchronized.
Synchronization also has benefits: synchronous transmission is usually much faster than asynchronous transmission. The receiver does not have to start and stop each character. Once the frame synchronization characters are detected, it receives them as the next data arrives. In addition, the overhead of synchronous transmission is also relatively small.
Disadvantages: The longer the data bits, the larger the buffer required to cache the data, which limits the size of a frame. In addition, the larger the frame, the longer the continuous time it occupies the transmission medium. In extreme cases, this will cause other users to wait too long.
4. Working principle and underlying technology
Use the XmlHttpRequest object to send asynchronous requests to the server, obtain data from the server, and then use javascript to operate the DOM And update the page.
XMLHttpRequestThe properties of this object.
Its properties are:
onreadystatechange The event handler for the event triggered each time the state changes.
responseText The string form of data returned from the server process.
responseXML DOM-compatible document data object returned from the server process.
status Numeric code returned from the server, such as the common 404 (not found) and 200 (ready)
status Text String information accompanying the status code
readyState Object status value
0 (uninitialized) The object has been created, but has not been initialized (the open method has not been called yet)
1 (Initialization) The object has been created, but the send method has not been called yet
2 (Sending data) The send method has been called, but the current status and http header are unknown
3 (Data is being transferred ) Part of the data has been received. Because the response and http header are incomplete, an error will occur when obtaining part of the data through responseBody and responseText.
4 (Complete) The data has been received. At this time, the complete data can be obtained through responseXml and responseText. Response data
5. Disadvantages
Disadvantages of ajax
Below I will focus on the shortcomings of ajax, because most of us usually What we pay attention to are the benefits that ajax brings to us, such as the improvement of user experience. The shortcomings caused by ajax have been ignored.
The defects of ajax described below are all caused by its innateness.
1. Ajax kills the back button, which destroys the browser's back mechanism. The back button is an important feature of a standard web site, but it doesn't work well with JavaScript. This is a serious problem caused by ajax, because users often hope to cancel the previous operation by going back. So is there any solution to this problem? The answer is yes. Those who have used Gmail know that the ajax technology used under Gmail solves this problem. You can go back under Gmail. However, it does not change the ajax mechanism. It just uses a stupid but effective one. The way to do this is by creating or using a hidden IFRAME to reproduce the changes on the page when the user clicks the back button to access the history. (For example, when the user clicks back in Google Maps, it searches in a hidden IFRAME and then reflects the search results onto the Ajax element to restore the application state to what it was at that time.)
However, although this problem can be solved, the development cost it brings is very high, which is contrary to the rapid development required by the ajax framework. This is a very serious problem caused by ajax.
2. Security issues
Technology also brings new security threats to IT companies. Ajax technology is like establishing a direct channel for corporate data. This allows developers to inadvertently expose more data and server logic than before. Ajax logic can be hidden from client-side security scanning technology, allowing hackers to create new attacks from remote servers. Ajax is also difficult to avoid some known security weaknesses, such as cross-site scripting attacks, SQL injection attacks and credentials-based security vulnerabilities.
3. The support for search engines is relatively weak.
4. Destroyed the exception mechanism of the program. At least from the current perspective, ajax frameworks such as ajax.dll and ajaxpro.dll will destroy the exception mechanism of the program. Regarding this problem, I have encountered it during the development process, but after checking, there is almost no relevant introduction on the Internet. Later, I did an experiment myself, using ajax and traditional form submission modes to delete a piece of data... which brought great difficulties to our debugging.
5. In addition, there are some other problems, such as violating the original intention of URL and resource positioning. For example, if 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 this URL address. This is contrary to the original intention of resource positioning.
6. Some handheld devices (such as mobile phones, PDAs, etc.) currently do not support ajax very well. For example, when we open a website using ajax technology on a mobile browser, it currently does not support it. , of course, this issue has nothing to do with us.
6.Several frameworks of ajax
The ajax frameworks we currently use mainly include ajax.dll, ajaxpro.dll, magicajax.dll and Microsoft's atlas framework. There is not much difference between the two frameworks Ajax.dll and Ajaxpro.dll, but magicajax.dll is just more powerful in encapsulation. For example, it can directly return the DataSet data set. As we have said before, ajax returns all strings. magicajax just encapsulates it. But this feature of it can bring us great convenience. For example, if our page has a list, and the data in the list is constantly changing, then we can use magicajax to process it. The operation is very simple. After adding magicajax, we will The updated list control is placed within the magicajax control, and then the update interval is defined in the pageload. The principle of atlas is similar to that of magicajax. However, one thing that needs attention is that these frameworks only support IE and do not deal with browser compatibility. You can know this by looking at their code with a decompilation tool.
In addition to these frameworks, the most commonly used method is to create xmlHttpRequest objects ourselves. This method is more flexible than the previous frameworks. In addition, I would also like to mention here the asynchronous callback interface that comes with aspnet2.0. Like ajax, it can also achieve local non-refresh, but its implementation is actually based on the xmlhttprequest object. In addition, it only supports IE. Of course, this is A competitive strategy of Microsoft.
The above is the detailed content of Advantages and Disadvantages of AJAX. For more information, please follow other related articles on the PHP Chinese website!