Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the difference between websocket and ajax". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Real-time chat-the difference between websocket and ajax from contact

What is Ajax?

Ajax, namely Asynchronous JavaScript and XML, is a web development technology for creating interactive web applications. By exchanging a small amount of data with the server in the background, Ajax enables pages to be updated asynchronously, which means that parts of the page can be loaded and updated without reloading the entire page.

The advantage of Ajax is that it uses asynchronous data transfer (HTTP requests) between the browser and the web server, does not block users, and the core object is XMLHTTPRequest. With this object, js can exchange data with the web server without reloading the page.

What is websocket?

Websocket is a new protocol of HTML5, which realizes full-duplex communication between browser and server. Its essence is: first shake hands through the HTTP/HTTPS protocol and then create a TCP connection for exchanging data, and the server communicates with the client in real time through this TCP connection.

The biggest advantage of websocket is that servers and browsers can push messages to each other at any time in a given time range. After the connection is established, the server can actively transmit data to the browser. The biggest difference between Ajax and websocket is that Ajax requires clients to initiate requests, and websocket servers and clients can push messages to each other in real time.

The difference between Ajax polling and websocket

The real-time data exchange between the browser and the server can be realized by establishing websocket or by Ajax polling.

Having understood the basic concepts of Ajax and websocket, in which application scenarios do we usually apply these two technologies?

Application scenarios of Ajax

Ajax is characterized by asynchronous interaction and dynamic updating of web pages, so the scope of application of Ajax is the web application with more interaction and frequent data reading.

Ajax application scenario: 1. Validating form data with Ajax

When filling out the content of the form, you need to ensure the uniqueness of the data (such as the user name that the new user registers to fill in), so you must validate the data entered by the user.

Using Ajax technology, the verification request can be issued by the XMLHttpRequest object, and the verification can be judged according to the returned HTTP response. The whole process does not need to pop up a new window or submit the whole page to the server, which is fast and will not increase the burden on the server.

two。 Fetch data on demand

In web applications, classification trees or tree structures are often used, such as department structure, file classification structure and so on.

Ajax technology implements the tree structure as follows:

When initializing the page, only the data of the first-level subcategory is obtained and displayed; when the user clicks on the first node of the first-level classification, the page will request all the data of the second-level subcategory to which the current classification belongs to the server through Ajax; if you request a node of the second-level subcategory that has been presented, request all the data of the third-level subcategory to which the current classification belongs, and so on. The page will request the required data from the server according to the user's operation, so that there will be no data redundancy and the total amount of data download will be reduced. At the same time, when updating the page, there is no need to reload all the content, only the part of the content that needs to be updated can be updated, which greatly shortens the waiting time of users.

3. Automatically update the page

Many data changes in web applications are real-time, such as the latest news, weather forecasts, chat rooms and so on. Before the emergence of Ajax, users had to constantly refresh the page to see if there were any new content changes, or the page itself had to be refreshed regularly in order to understand the corresponding content.

The application of Ajax technology can improve this situation. After the page is loaded, it will conduct a regular poll in the background through Ajax to send a request to the server to see if there are any latest messages (of course, this situation has its drawbacks, as mentioned above). If there is, download the new data and update it dynamically on the page, and notify the user in a certain way.

Application scenarios of websocket

The way to decide whether you need to use websocket technology is actually simple:

Does your product need to provide the ability for multiple users to communicate with each other? Does your product need to show data that changes frequently on the server side? If the answer is yes, then you will use websocket technology in your product.

Common application scenarios are as follows:

1. Social applications

One of the benefits of social apps is that you can instantly know what your friends are doing. Users don't want to know a red packet sent by a family member in a group or a message from a friend after a few minutes. The user is online, so the messages received by the user should be real-time.

two。 The price of stock fund applications

The financial world is changing rapidly-almost every millisecond, and outdated information can lead to losses. When we open a stock or fund application, we want to know the real-time price of the product, not the data from 10 seconds ago. Using websocket, you can update these data changes in real time without waiting.

3. Location-based application

More and more location-based applications are realized by borrowing the GPS function of mobile devices. If you keep recording the location of the user, you can collect more detailed data. If you need to update the web data dashboard in real time (for example, the athlete's coach needs to view the data), you can use websocket to refresh the data in real time.

4. Online educational applications

Online education is a good way to learn. You can communicate with teachers and other students. Websocket technology can realize multimedia chat, text chat and other functions.

This is the end of the content of "what's the difference between websocket and ajax". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.