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

This article Xiaobian detailed introduction of "reverse ajax how to achieve", the content is detailed, the steps are clear, the details are handled properly, I hope this "reverse ajax how to achieve" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Reverse ajax means that the client does not need to obtain information from the server, and the server will push the relevant information directly to the client. In a standard HTTP Ajax request, the data is sent to the server, while the reverse Ajax can simulate issuing an Ajax request in certain ways, allowing the server to send events to the client as quickly as possible.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

Ajax detailed explanation

What is ajax?

Ajax, namely "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), refers to a web page development technology that creates interactive web page applications.

By exchanging a small amount of data with the server in the background, AJAX can update web pages asynchronously. This means that some part of the page can be updated without reloading the entire page.

The Origin of ajax

This technology has been applied around 1998.

The first component that allows client script to send HTTP requests (XMLHTTP) is written by the Outlook Web Access team. This component originally belonged to Microsoft Exchange Server and quickly became part of Internet Explorer 4.0 [3]. Some observers believe that Outlook Web Access is the first successful business application that uses Ajax technology and has become a leader in many products, including Oddpost's web mail products.

However, it is Google that really makes Ajax well known by the public.

Google uses asynchronous communication in its famous interactive applications, such as Google discussion groups, Google Maps, Google search suggestions, Gmail, and so on. The word Ajax was coined by the article "Ajax: A New Approach to Web Applications". The rapid spread of this article has raised people's awareness of the use of this technology. In addition, support for Mozilla/Gecko makes the technology mature and easier to use.

The principle of ajax

The working principle of Ajax is equivalent to adding an intermediate layer (AJAX engine) between the user and the server to asynchronize the user's operation and the server's response. Not all user requests are submitted to the server, such as some data validation and data processing are left to the Ajax engine to do, only when it is determined that new data needs to be read from the server, the Ajax engine submits the request to the server on its behalf.

The core of Ajax is composed of JavaScript, XmlHttpRequest and DOM objects. It sends asynchronous requests to the server through XmlHttpRequest objects, obtains data from the server, and then uses JavaScript to operate the DOM to update the page. The most critical step is to get the request data from the server.

Let's take a look at these objects:

1) XMLHTTPRequest object

One of the biggest features of Ajax is that it can transfer or read and write data to the server without refreshing the page (also known as no refresh update page), which is mainly due to the XMLHTTP component XMLHTTPRequest object.

Description of XMLHttpRequest object method:

XMLHttpRequest object property description:

2) JavaScript

The front end is the most explosive language.

3) DOM Document Object Model

DOM is a set of API for HTML and XML files. It provides a structural representation of the document so that you can change the content and visibility in it. Its essence is to establish a bridge between web pages and Script or programming language. All the properties, methods, and events that WEB developers can manipulate and create files are represented as objects (for example, document represents the "file itself" object, table objects represent HTML table objects, and so on).

These objects can be accessed by most browsers today in Script. A web page built with HTML or XHTML can also be regarded as a set of structured data, which is sealed in DOM (Document Object Model). DOM provides read and write support for each object in the web page.

4) XML

Extensible markup language (Extensible Markup Language) has an open, extensible and self-describing language structure. It has become a standard for data and document transmission on the Internet, and is used for other applications to exchange data.

5) Synthesis

The Ajax engine is actually a more complex JavaScript application that handles user requests, reads and writes servers, and changes DOM content.

JavaScript's Ajax engine reads information and interactively rewrites DOM, which enables the page to be seamlessly reconstructed, that is, to change the page content after the page has been downloaded, which is a method that we have been widely used through JavaScript and DOM, but to make the web page really dynamic, we not only need internal interaction, but also need to obtain data from the outside. In the past, we let users enter data and change the content of the page through DOM. But now, XMLHTTPRequest, allows us to read and write data on the server without reloading the page, minimizing user input.

Ajax separates the interface from the application in WEB (it can be said that data and presentation are separated), but in the past, there is no clear boundary between the two. The separation of data and presentation is conducive to division of labor and cooperation, reduce WEB application errors caused by page changes made by non-technical personnel, improve efficiency, and become more suitable for the current publishing system. It can also transfer some of the previous work borne by the server to the client, which is conducive to the idle processing capacity of the client.

Advantages of ajax

The traditional Web application interaction is that the user triggers a HTTP request to the server, the server processes it, and then returns a new HTML page to the client.

Whenever the server processes the request submitted by the client, the client can only wait idle, and even if it is a small interaction and only needs to get a very simple data from the server, it will return a complete HTML page, and the user will waste time and bandwidth to re-read the whole page each time.

This wastes a lot of bandwidth, and because each application interaction needs to send a request to the server, the application's response time depends on the server's response time. This results in a much slower response of the user interface than the local application.

In contrast, an AJAX application can send and retrieve only the necessary data to the server, using SOAP or some other XML-based Web Service interface, and using JavaScript on the client side to process the response from the server.

Because there is a significant reduction in the amount of data exchanged between the server and the browser, we can see applications that are more responsive as a result. 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.

In fact, in a word, Laozi can see the change without brushing the whole page, the change is faster, the client shares the work of the server, and the pressure on the server is less.

Disadvantages of ajax

Data, interface leakage, security is not very good.

Reverse ajax detailed explanation

What is reverse ajax

Reverse Ajax (Reverse Ajax) is essentially the concept of being able to send data from the server to the client. In a standard HTTP Ajax request, data is sent to the server, and reverse Ajax can simulate issuing an Ajax request in certain ways, so that the server can send events to the client as quickly as possible (low-latency communication).

Reverse ajax implementation

1. Polling (Polling)

Polling is actually one of the stupidest ways to implement reverse ajax: using javascript to send ajax requests at regular intervals on the client side.

SetInterval (function () {$.getJSON ('events', function (events) {console.log (events);});}, 2000)

In order to get server-side events as soon as possible, the polling interval (the time between requests) must be as small as possible. The drawback is obvious: if the interval is reduced, client browsers will issue more requests, many of which will not return any useful data, which will be a waste of bandwidth and processing resources.

2.PiggyBack (piggyback polling)

Piggyback polling is a smarter approach than polling because it deletes all non-essential requests (those that do not return data).

It is a semi-active way, that is, the Browser initiates the request, but in addition to the current response, the response of each request will also send changes that have occurred since the last request to Browser.

In other words, the update of the current request will be sent back with the response of the next request. In this way, it feels as if there was an update on the last request on Browser. But that feeling depends on how often Browser sends requests to Server. If the second request is delayed, the previous update will not be obtained.

3. Comet (server push)

This is a "server push" technology based on HTTP persistent connection.

There are two main ways to implement it:

1) HTTP stream (HTTP Streaming)

Embed a hidden iframe in the page, set the src property of the hidden iframe to a persistent connection request or use a xhr request, and the server can continuously input data to the client.

Advantages: messages arrive in real time, no useless requests are sent, and it is relatively convenient to manage.

Cons: maintaining a long connection on the server increases overhead.

Example: Gmail chat

$(function () {(function iframePolling () {var url = "${pageContext.request.contextPath} / communication/user/ajax.mvc?timed=" + new Date () .getTime (); var $iframe = $(''); $("body") .append ($iframe) $iframe.load (function () {$("# logs") .append ("[data:" + $($iframe.get (0) .contentDocument) .find ("body"). Text () + "]); $iframe.remove (); / / Recursive iframePolling ();}) () })

2) HTTP long polling (HTTP Long Polling)

In this case, the client makes a request to the server and opens a connection. This connection is closed only after receiving data from the server. After the server sends the data, it closes the connection immediately. The client immediately opens a new connection and waits for the next data.

Advantages: there are no frequent requests in the case of no message, and the cost of resources is small.

Disadvantages: server hold connections will consume resources, the order of returned data is not guaranteed, and it is difficult to manage and maintain.

Examples: webQQ, Hi web version, Facebook IM.

$(function () {(function longPolling () {$.ajax) ({url: "${pageContext.request.contextPath} / communication/user/ajax.mvc", data: {"timed": new Date (). GetTime ()}, dataType: "text" Timeout: 5000, error: function (XMLHttpRequest, textStatus, errorThrown) {$("# state") .append ("[state:" + textStatus + ", error:" + errorThrown + "]") If (textStatus = = "timeout") {/ / request timeout longPolling () / / Recursive call / / other errors, such as network errors} else {longPolling () }, success: function (data, textStatus) {$("# state") .append ("[state:" + textStatus + ", data: {" + data + "}]") If (textStatus = = "success") {/ / request succeeded longPolling ();}});}) ();}) After reading this, the article "how to achieve reverse ajax" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, you are welcome to follow the industry information channel.

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.