1. Introduction to the principle of Ajax
1. Background of Ajax technology
It is undeniable that the popularity of ajax technology has benefited from the vigorous promotion of google. It is precisely because of the wide application of ajax technology such as google earth, google suggest and gmail, that the popularity of ajax has been born.
This also made Microsoft feel extremely embarrassed, because as early as 1997, Microsoft had invented the key technology in Ajax, and when IE5 was launched in 1999, it began to support the XmlHttpRequest object, and Microsoft had already started working on it before Ajax is used in some of the products, such as some applications in the MSDN website menu. Unfortunately, I don’t know what the idea was. After Microsoft invented the core technology of Ajax at that time, it did not see its potential and developed and promoted it, but shelved it. For this point, I personally find it very strange, because with Microsoft's resources and its strategic vision, the prospects of ajax technology should not be lost. The only explanation may be its main competitor at the time. The disappearance of Netscape has made it paralyzed and sluggish. After all, giants also have time to nap, such as IBM's strategic mistakes against Microsoft.
It is this mistake that made its current competitor Google's leading position in Ajax. In fact, Google's current leadership in Ajax technology is beyond Microsoft's reach. This point will be discussed later when I talk about Ajax defects. Will also be mentioned. Now Microsoft is also aware of this problem, so it has also started to catch up in the ajax field, for example, launching its own ajax framework atlas, and also provides an interface for implementing asynchronous callbacks in .NET2.0, the ICallBack interface . So why is Microsoft so nervous about its lagging behind in ajax? Now let us analyze the profound meaning behind the ajax technology.
2. The significance of Ajax technology
In our usual development, we have more or less contact with or applied to ajax. When it comes to the meaning of ajax technology, we are undoubtedly focusing on improving the user experience. However, if we combine the future development trends of computers and the Internet, we will find that ajax technology just represents this trend in some respects.
Why do you say this way? We know that since the advent of computers, desktop software has always occupied an absolute dominant position, but the emergence and success of the Internet has caused subtle changes in all this. Quite a few people believe that, sooner or later, data and computer software will be transferred from the desktop to the Internet. In other words, in the future, computers may abandon bulky hard drives and obtain data and services directly from the Internet. I remember when I was in college, when a professor gave us a class, I once imagined such a scenario, maybe On the computer desktop in the future, there will be no redundant software and programs, but only one IE. Although it seems that we are still far away from this day, and there are still many problems to be solved, I think this is not a dream. , But the reality that will be realized sooner or later. Then, the main problem is that the Internet connection is unstable, and no one wants to watch his computer download data from the server bit by bit.
So, does Ajax solve this problem? To be honest, rather than saying that Ajax solves this problem, it is better to just cover up this problem. It just acts as a buffer between the server and the client, making users mistakenly think The service is not interrupted. To be precise, ajax does not improve the speed of downloading data from the server, but only makes this wait less frustrating. But this is enough to have a huge impact and shock, it actually has a huge impact on desktop software. I use an example to illustrate this point. We can compare Outlook Express and Gmail. The former is a typical desktop software, while the latter is a B/S model implemented by Ajax. In fact, the latter is slowly replacing the former. Gmail has almost the same function as Outlook Express when sending and receiving emails, and it does not need to install a client program. This is why Microsoft has such a fear of the impact of Ajax, and in the survey it conducted not long ago, it regarded Google as one of the main reasons for their main competitor in the next ten years. Of course, this change will not eliminate all desktop software. None of the existing browsers can handle complex images like desktop programs such as PhotoShop. But we cannot ignore the impact and impact it brings.
3. About Synchronous and Asynchronous
Asynchronous transmission is character-oriented transmission, and its unit is character; while synchronous transmission is bit-oriented transmission, and its unit is frame. When it transmits, the clocks of the receiver and the sender are required to be consistent.
Specifically, asynchronous transmission divides bits into small groups for transmission. Generally, each group is an 8-bit character. At the head and tail of each group, there is a start bit and a stop bit. During the transmission, the clocks of the receiver and the sender are not required to be the same, that is to say, send The party 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. When pressing a key, an 8-bit ASCII code is sent to the host. The keyboard can send the code at any time, depending on the input speed of the user. The internal hardware must Able to receive a typed character at any time. This is a typical asynchronous transmission process. A potential problem with asynchronous transmission is that the receiver does not know when the data will arrive. Before it detects the data and responds, the first bit has passed. It's like someone unexpectedly stepped up from behind to talk to you, and you didn't have time to react and missed the first few words. Therefore, each asynchronous transmission of information starts with a start bit, which informs the receiver that the data has arrived, which gives the receiver time to respond, receive and buffer the data bits; at the end of the transmission, a stop bit indicates The termination of this transmission of information. By convention, the idle (no data transmission) line actually carries a signal representing a binary one. The start bit of the step transmission makes the signal 0, and the other bits make the signal change with the transmitted data information. Finally, the stop bit causes the signal to change back to 1, and the signal remains until the next start bit arrives. For example, the number "1" on the keyboard, according to the 8-bit extended ASCII code, will send "00110001". At the same time, it is necessary to add a start bit in front of the 8 bits and a stop bit in the back.
The bit packets transmitted synchronously are much larger. Instead of sending each character independently, each character has its own start bit and stop bit, but it combines them and sends them together. We call these combinations data frames, or frames for short.
The first part of the data frame contains a set of synchronization characters, which is a unique combination of bits, similar to the start bit mentioned earlier, used to notify the receiver that a frame has arrived, but it can also ensure the receiver's sampling speed Keep the same with the arrival speed of the bit, so that the sender and receiver are synchronized.
The last part of the frame is an end-of-frame marker. Like the synchronization character, it is also a unique bit string, similar to the stop bit mentioned earlier, used to indicate that there is no other data to arrive before the beginning of the next frame.
Synchronous transmission is usually much faster than asynchronous transmission. The receiver does not have to start and stop every character. Once it detects the frame sync characters, it receives them when the next data arrives. In addition, the overhead of synchronous transmission is relatively small. For example, a typical frame may have 500 bytes (that is, 4000 bits) of data, which may only contain 100 bits of overhead. At this time, the added bits increase the total number of bits transmitted by 2.5%, which is much smaller than the 25% increase in asynchronous transmission. As the actual data bits in the data frame increase, the percentage of overhead bits will decrease accordingly. However, the longer the data bit, the larger the buffer needed 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.
After understanding the concepts of synchronization and asynchrony, everyone should have a clearer understanding of why Ajax can improve user experience. It uses asynchronous request methods. For example, if the community where your home is currently facing a water cut due to certain circumstances, the relevant departments have announced two plans. One is to stop the water for 8 hours, and to stop the water for 8 hours. Return to normal after hours. The second is that the water is not completely stopped 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 will be restored. Then, if it is you, which way would you choose? ? Obviously the latter.
4. Advantages of Ajax
Basically, everyone knows the benefits of Ajax to us. Here I will only briefly talk about a few points:
- The biggest point is that the page is not refreshed. It communicates with the server within the page, which gives users a very good experience.
- Use asynchronous mode to communicate with the server, without interrupting the user's operation, with more rapid response capabilities.
- It is possible to transfer some of the work of the previous server burden to the client, and use the idle capacity of the client to process, reduce the burden of the server and bandwidth, and save space and broadband rental costs. And to reduce the burden on the server, the principle of Ajax is "fetch data on demand", which can minimize the burden on the server caused by redundant requests and responses.
- Based on standardized and widely supported technology, there is no need to download plug-ins or applets.
5. Disadvantages of Ajax
Let me focus on the shortcomings of Ajax, because we usually pay attention to the benefits that Ajax brings to us, such as the improvement of user experience. The defects brought by ajax have been ignored.
The defects of Ajax described below are all inherently produced by it.
- Ajax kills the back button, which destroys the browser's back mechanism. The back button is an important function of a standard web site, but it cannot work well with js. This is a serious problem caused by ajax, because users often want 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. It can be regressed under Gmail. However, it does not change the ajax mechanism. It just uses a dumb but effective one. The method is that when the user clicks the back button to access the history, the changes on the page can be reproduced by creating or using a hidden IFRAME. (For example, when the 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 the current state.)
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.
- Security Question
Technology also brings new security threats to IT companies. Ajax technology is like establishing a direct channel to corporate data. This allows developers to inadvertently expose more data and server logic than before. The logic of ajax can be hidden from the client's security scanning technology, allowing hackers to establish new attacks from remote servers. Ajax is also difficult to avoid some known security weaknesses, such as cross-site footstep attacks, SQL injection attacks, and credential-based security vulnerabilities.
- Support for search engines is relatively weak.
- The abnormal mechanism of the program is destroyed. At least for the time being, ajax frameworks like 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 there is almost no relevant introduction on the Internet. Later, I did an experiment and used ajax and traditional form submission modes to delete a piece of data... It brought great difficulties to our debugging.
- In addition, some problems like other aspects, for example, violate 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.
- Some handheld devices (such as mobile phones, PDAs, etc.) currently do not support Ajax well. For example, when we open a website that uses Ajax technology on the browser of the mobile phone, it does not currently support it. Of course, this problem is not with us. Too many relationships.
I just copied so much, you can check the content compiled by the original author for details: https://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html
2. jQuery's support for Ajax
Before we used the native way to implement Ajax, we will definitely not use this way in the future, we will use more advanced, or more convenient, here we introduce jQuery again.
Open jQuery's official website and turn to the bottom (jQuery official website: https://jquery.com/ )
You can see such a thing, yes, there is nothing wrong, this is jQuery's support for Ajax, it saves us the process of creating XMLHttpRequest, it saves us the process of encapsulating parameters, it saves us the process of writing judgment status
In other words, he saves us a lot of anti-locking steps
Not much nonsense, we will directly introduce jQuery into our project, just put it in the project mentioned in the previous section.
三、jQuery Ajax HelloWorld
Let's create a page in the AjaxHelloWorld project first, we call it index2.html, the content of this page is the same as the previous index.html page
The only difference is that we tried Ajax provided by jQuery to operate this time~
Here I will directly upload the code, and then explain, of course, you can also see the explanation on the official website.
We first introduce jquery, and then change the previous XMLHttpRequest to jQuery
Then, we go to modify the java code
Here we will modify the previous output to json format, we will talk about json later, first write it like this
Start the server, let's see the effect~~~
Is ok
Let's talk about the front-end Ajax code
The first is type, which refers to the type of our request. There are two parameters, one is GET and the other is POST
Next is the url, this is the requested path
In fact, there is also a data parameter, because we are using a GET request, so there is no data, if it is POST, we need to bring this data parameter
Success means that if the request is successful and the status code is 200, we can write a callback function. There is a result parameter in the function. This result is the return value we get from the backend.
In contrast, there is error, and error is also a callback function. If the backend throws an exception, we can also get the exception value in the callback function and display it.
For details, you can see https://api.jquery.com/jQuery.ajax/ the official document provided by jQuery
Fourth, the introduction of $.post & $.get
These two are actually very similar to the $.ajax usage, but the difference is that with them, we don’t need to write type.
Official website document:
GET https://api.jquery.com/jQuery.get/
POST https://api.jquery.com/jQuery.post/
The specific use will be described later with Json~
You can check it out for yourself, if you don’t understand, please contact me QQ: 2100363119
Welcome everyone to visit my website: https://www.lemon1234.com
If you can, pay attention to my official account, it is on my website, updated every day~~~, unlimited resources to enjoy Java, thank you~
Recently, the mini program has also been opened. You can scan the code to have fun.
