What is reverse ajax? How to implement reverse ajax? (selected version)

Do you know reverseajax? Do you know how reverse ajax is implemented? I don’t know, so why not take a look at this article, which introduces detailed information about reverse ajax. Start reading this article below

What is reverse ajax

Reverse Ajax (Reverse Ajax) is essentially a concept: being able to send messages from the server to the client data. In a standard HTTP Ajax request, data is sent to the server. Reverse Ajax can simulate making an Ajax request in some specific ways, so that the server can send events to the client as quickly as possible (low latency communication).

Reverse ajax implementation method

1. Polling

Polling is actually the stupidest way to implement reverse ajax Method: Use javascript to send ajax requests regularly on the client.

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

In order to obtain 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 will issue more requests, many of which will not return any useful data, and this will waste bandwidth and Process resources.

2.PiggyBack (PiggyBack)

PiggyBack is a smarter approach than polling because it will delete all non-essential requests (the ones that don't return data).

It is a semi-active method, which means that the Browser still actively issues the request, but in the response of each request, in addition to the current response, it will also include the information that has occurred since the last request. Changes are sent to the Browser at the same time.

In other words, the update requested will be carried into the response of the next request and sent back. In this way, the Browser feels as if the last request has been updated. But this feeling depends on how often the Browser makes requests to the Server. If the second request is not sent, the last update will not be obtained.

3. Comet (server push)

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

There are two main implementation methods:

1) HTTP Streaming

Embedded in the page For a hidden iframe, set the src attribute of the hidden iframe to a request for a long connection or use an xhr request, and the server will continuously input data to the client.

Advantages: Messages arrive immediately and no useless requests are sent; management is relatively convenient.

Disadvantages: Maintaining a long connection on the server will increase 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 = $(&#39;<iframe id="frame" name="polling" style="display: none;" src="&#39; + url + &#39;"></iframe>&#39;);
            $("body").append($iframe);
            $iframe.load(function () {
                $("#logs").append("[data: " + $($iframe.get(0).contentDocument).find("body").text() + " ]<br/>");
                $iframe.remove();                // 递归
                iframePolling();
            });
        })();    
    });</script>

2) HTTP Long Polling

In this case, the client sends a message to the server The client makes a request and opens a connection. This connection will only be closed after receiving data from the server. After the server sends the data, it immediately closes the connection. The client immediately opens a new connection and waits for the next data. (If you want to see more, go to the PHP Chinese website AJAX Development Manual column to learn)

Advantages: There will be no frequent requests when there is no message, and it will consume less resources.

Disadvantages: Server hold connection consumes resources, the order of returned data is not guaranteed, and it is difficult to manage and maintain.

Examples: 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: 5000,
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>");                            if (textStatus == "timeout") { // 请求超时
                                    longPolling(); // 递归调用
                                // 其他错误，如网络错误等
                                } else { 
                                    longPolling();
                                }
                            },
                        success: function (data, textStatus) {
                            $("#state").append("[state: " + textStatus + ", data: { " + data + "} ]<br/>");                            if (textStatus == "success") { // 请求成功
                                longPolling();
                            }
                        }
                    });
                })();
            });        </script>

This article ends here (if you want to see more, go to the PHP Chinese website AJAX User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of What is reverse ajax? How to implement reverse ajax? (selected version). For more information, please follow other related articles on the PHP Chinese website!