Learn about basic Ajax

The full name of AJAX is Asynchronous JavaScript and XML. Asynchronous is asynchronous, which is different from the synchronous method used in traditional web development.

Example: Ajax working principle diagram and Web working principle diagram

1. About synchronous and asynchronous

Synchronization must wait for the returned results to continue, and does not have to wait for Asynchronization. Generally, it is necessary to listen for asynchronous results to be synchronized in a queue in a straight line, while Asynchronization does not take place in each queue;

Abstract:

Asynchronous transmission is character-oriented transmission. Its unit is character, while synchronous transmission is bit-oriented transmission. Its unit is bytes, it requires that the receiver and the sender's clock be consistent during transmission.

Specifically, asynchronous transmission divides bits into groups for transmission. Generally, each group is an 8-character group with a starting and ending bits at the header and tail of each group. It does not require the same receiver and sender clock during the transfer process, that is to say, the sender can send these groups at any time, and the receiver does not know when it will arrive. One of the most obvious examples is the communication between the computer keyboard and the host. Press the next key to send an 8-bit ASCII code to the host. The keyboard can send code at any time, this depends on the user input speed. The internal hardware must be able to receive a typed character at any time. This is a typical asynchronous transmission process. Asynchronous transmission has a potential problem, that is, the receiver does not know when the data will arrive. Before it detects the data and responds, the first bit has passed. This is like someone coming up and talking to you unexpectedly, and you missed the first few words before you could respond. Therefore, the information transmitted asynchronously starts with a starting bit and notifies the recipient that the data has arrived. This gives the recipient the time to respond, receive, and cache data bits; at the end of the transfer, a stop bit indicates the termination of the transfer information. By convention, idle (no data is transmitted) lines actually carry a Signal Representing Binary 1. The Start bit of the Step transmission changes the signal to 0, and other bits change the signal with the transmitted data information. Finally, the stop position changes the signal back to 1, and the signal remains till the next start position. For example, the number "1" on the keyboard, according to the 8-bit extended ASCII encoding, will send "00110001", at the same time need to add a start bit before the 8-bit, followed by a stop bit.

The bit groups for synchronous transmission are much larger. It does not send each character independently. Each character has its own Start and Stop bits, but sends them together. We call these combinations a data frame or frame for short.

The first part of a data frame contains a set of synchronization characters. It is a unique bit combination, similar to the Start bit mentioned earlier, used to notify the recipient that a frame has arrived, however, it can also ensure that the sampling speed of the receiver is consistent with the bit arrival speed, so that the receiving and receiving sides can synchronize.

The last part of a frame is a frame end mark. Like synchronization characters, it is also a unique Bit String, similar to the stop bit mentioned above, used to indicate that there is no data to be reached before the next frame starts.

Synchronous transmission is usually much faster than asynchronous transmission. The receiver does not have to start or stop each character. Once the frame synchronization characters are detected, it receives them when the next data arrives. In addition, the cost of synchronous transmission is also relatively small. For example, a typical frame may have 500 bytes (4000 bits) of data, which may only contain 100 bits of overhead. At this time, the added bit increases the total number of transmitted BITs by 2.5%, which is much smaller than the value-added value of 25% in asynchronous transmission. As the actual data bit in the data frame increases, the percentage of overhead bit will be reduced accordingly. However, the longer the bit length of the data, the larger the buffer required for caching the data, which limits the size of a frame. In addition, the larger the frame, the longer it occupies the continuous time of the transmitted media. In extreme cases, this will cause other users to wait too long.

After learning about the concepts of synchronization and Asynchronization, we should be clear about why AJAX can improve user experience. It uses asynchronous requests. For example, if the current residential area in your home is facing water stop due to a certain situation, the relevant departments have published two solutions: one is to stop water for 8 hours, the water has been completely stopped in these eight hours, and will return to normal after 8 hours. Second, the water was not completely stopped for 10 hours, but the water was not completely interrupted during the 10 hours, but the traffic was much smaller than the original one. After 10 hours, the normal traffic was restored, if it was you, which method would you choose? Obviously the latter.

2. Ajax technology

1. CSS and XHTML are used for representation.

2. Use the DOM model for interaction and dynamic display.

3. Use XMLHttpRequest to communicate with the server asynchronously.

4. Use JavaScript for binding and calling.

In the above technical procedures, apart from XMLHttpRequest objects, all other technologies are based on web standards and have been widely used. Although XMLHttpRequest has not yet been adopted by W3C, but it is already a standard of fact, because almost all mainstream browsers currently support it.

3. Ajax principles and XMLHttpRequest objects

XMLHttpRequest has the following attributes:

Onreadystatechange the event handler of the event triggered by each state change.

The string format of responsetext returned data from the server process.

Responsexml is a dom-compatible document data object returned by the server process.

Status Code returned from the server, such as common 404 (not found) and 200 (ready)

String information of the Status text accompanied by the status code

Readystate object status value

0 (not initialized) the object has been created, but has not been initialized (the open method has not been called)

1 (initialization) the object has been created and the send method has not been called

2 (send data) The send method has been called, but the current status and HTTP header are unknown.

3 (in data transmission) Some data has been received. Because the response and HTTP headers are incomplete, an error occurs when retrieving part of data through responsebody and responsetext,

4. After receiving the data, you can use responsexml and responsetext to obtain the complete response data.

4. Ajax advantages

The benefits brought to us by Ajax are basically profound experiences. Here I will only briefly talk about the following points:

1. The biggest difference is that the page is refreshed and communicates with the server on the page, providing a good user experience.

2. Use asynchronous mode to communicate with the server, without interrupting user operations, so as to have a more rapid response capability.

3. Some of the previous server workload can be transferred to the client, and the client's idle capabilities can be used to handle the workload, reduce the load on servers and bandwidth, and save space and bandwidth rental costs. In addition, it reduces 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.

4. Based on standardized and widely supported technologies, you do not need to download plug-ins or applets.

5. disadvantages of AJAX

1. Ajax kills the back button, which destroys the browser's back-up mechanism. 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, which is different from 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 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.

4. destroys the abnormal 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. Later, I did a test to delete a piece of data in Ajax and traditional form submission modes ...... It brings great difficulties to our debugging.

5. In addition, some other problems, such as violating 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. Some handheld devices (such as mobile phones and PDAs) cannot support Ajax yet. For example, when we open a website using Ajax technology on a mobile browser, it is currently not supported. Of course, this problem has nothing to do with us.

Learn about basic Ajax