What is reverse Ajax? How to implement reverse Ajax? (Selected version)

Do you know the inverse of Ajax? Do you know how reverse Ajax is implemented? Do not know, not to come to see this article, the introduction of the reverse Ajax details. Start reading this article

What is reverse Ajax

Reverse Ajax (Reverse Ajax) is essentially the concept of being able to send data from the server side to the client. In a standard HTTP Ajax request, the data is sent to the server side, and reverse Ajax can be used to impersonate an AJAX request in some specific way, so that the server can send events (low latency traffic) to the client as quickly as possible.

How to implement reverse Ajax

1. Polling (Polling)

Polling is actually one of the stupidest ways to implement reverse Ajax: Use JavaScript to send AJAX requests on a client-side schedule.

SetInterval (function () {     $.getjson (' Events ', function (events) {         Console.log (events);     };}, 2000); 12345

In order to get server-side events as quickly as possible, the polling interval (the time between two requests) must be as small as possible. The disadvantage of this is obvious: if the interval is reduced, the client browser makes more requests, many of which do not return any useful data, and this will waste bandwidth and processing resources in vain.

2.PiggyBack (piggyback polling)

A piggyback poll is a smarter approach than polling because it removes all non-essential requests (those that do not return data).

It is a semi-active way, that is, the request is initiated by the browser, but in response to each request, in addition to the response, the changes that have occurred since the last request are also sent to browser.

That is, the update of the request is sent back with the response to the next request. In this way, it feels as if the last request was updated again in the browser. But this feeling depends on how often browser requests to the server. If the second request is delayed, the last update will not be taken.

3. Comet (server Push)

This is a "server push" technology based on HTTP long connections.

There are two main ways to achieve this:

1) HTTP stream (HTTP streaming)

Embed a hidden iframe in the page, set the SRC attribute of the hidden IFRAME to a request for a long connection, or use a XHR request, and the server can stream data to the client.

Advantage: The message arrives immediately, does not send the useless request, the management is also relatively convenient.

Disadvantage: The server maintains a long connection that increases overhead.

Example: Gmail Chat

<script type= "Text/javascript" >    $ (function () {        (function iframepolling () {            var url = "${ Pagecontext.request.contextpath}/communication/user/ajax.mvc?timed= "+ New Date (). GetTime ();            var $iframe = $ (' <iframe id= "frame" name= "polling" style= "Display:none;" src= "' + URL + ' ></iframe> ');            $ ("Body"). Append ($iframe);            $iframe. Load (function () {                $ ("#logs"). Append ("[Data:" + $ ($iframe. Get (0). contentdocument). Find ("Body"). Text () + "]<br/>");                $iframe. Remove ();                Recursive                iframepolling ();            });        }) ();        }); </script>

2) HTTP long polling (HTTP Polling)

In this case, the client makes a request to the server side and opens a connection. This connection is not closed until the server-side data is received. After the server sends the data, it closes the connection immediately. The client immediately opens a new connection and waits for the next data. (Want to see more on the Topic.alibabacloud.comAJAX Development Manual section of the study)

Advantages: In the absence of a message without frequent requests, the cost of small resources.

Cons: Server hold connections consume resources, return data order is not guaranteed, difficult to manage maintenance.

Example: WEBQQ, HI Web version, Facebook IM.

<script type= "Text/javascript" > $ (function () {(function longpolling () {                        $.ajax ({url: "${pagecontext.request.contextpath}/communication/user/ajax.mvc", Data: {"timed": New Date (). GetTime ()}, DataType: "Text", timeout:500 0, Error:function (XMLHttpRequest, Textstatus, Errorthrown) {$ ("#state                            "). Append (" [State: "+ textstatus +", Error: "+ Errorthrown +"]<br/> ");                                if (Textstatus = = "Timeout") {//Request timeout longpolling ();//Recursive call                                Other errors, such as network errors, etc.} else {longpolling ();                            }}, Success:function (data, textstatus) { $ ("#state"). AppenD ("[State:" + Textstatus + ", data: {" + Data + "}]<br/>");                            if (Textstatus = = "Success") {//Request success longpolling ();                }                        }                    });            })();        }); </script>

This is the end of this article (want to see more on the Topic.alibabacloud.comAJAX User manual section of the study), there are questions can be in the message below the question.