Qu'est-ce que l'Ajax inversé ? Comment implémenter l'ajax inversé ? (version sélectionnée)

Connaissez-vous l'ajax inversé ? Savez-vous comment l'ajax inversé est implémenté ? Je ne sais même pas. Venez lire cet article, qui présente des informations détaillées sur l'ajax inversé. Commencez à lire cet article ci-dessous

Qu'est-ce que l'ajax inversé

Reverse Ajax (Reverse Ajax) est essentiellement un tel concept : pouvoir envoyer des messages du serveur aux données du client. Dans une requête HTTP Ajax standard, les données sont envoyées au serveur. Reverse Ajax peut simuler l'exécution d'une requête Ajax de certaines manières spécifiques, afin que le serveur puisse envoyer des événements au client le plus rapidement possible (communication à faible latence).

Comment implémenter l'ajax inversé

1. Sondage

Le sondage est en fait le moyen le plus stupide d'implémenter l'ajax inversé. Méthode : utilisez javascript pour envoyer des requêtes ajax. régulièrement sur le client.

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

Afin d'obtenir les événements côté serveur le plus rapidement possible, l'intervalle d'interrogation (le temps entre deux requêtes) doit être le plus court possible. L'inconvénient est évident : si l'intervalle est réduit, le navigateur client émettra davantage de requêtes, dont beaucoup ne renverront aucune donnée utile, ce qui gaspillera la bande passante et les ressources du processus.

2.PiggyBack (PiggyBack)

PiggyBack est une approche plus intelligente que l'interrogation car elle supprimera toutes les requêtes non essentielles (celles qui ne renvoient pas de données) .

Il s'agit d'une méthode semi-active, ce qui signifie que le navigateur émet toujours activement la demande, mais dans la réponse de chaque demande, en plus de la réponse actuelle, il inclura également les informations survenues depuis la dernière demande. Les modifications sont envoyées au navigateur en même temps.

En d'autres termes, la mise à jour demandée sera reportée dans la réponse de la prochaine requête et renvoyée. De cette façon, le navigateur a l'impression que la dernière requête a été mise à jour. Mais ce sentiment dépend de la fréquence à laquelle le navigateur envoie des requêtes au serveur. Si la deuxième demande n'est pas envoyée, la dernière mise à jour ne sera pas obtenue.

3. Comet (server push)

Il s'agit d'une technologie "server push" basée sur des connexions HTTP longues.

Il existe deux méthodes principales d'implémentation :

1) HTTP Streaming (HTTP Streaming)

Intégré dans la page Pour une iframe cachée, définissez l'attribut src de l'iframe cachée sur une demande de connexion longue ou utilisez une requête xhr, et le serveur entrera continuellement des données au client.

Avantages : Les messages arrivent immédiatement, aucune demande inutile n'est envoyée ; la gestion est relativement pratique ;

Inconvénients : Maintenir une longue connexion sur le serveur augmentera la surcharge.

Exemple : 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 (HTTP Long Polling)

Dans ce cas, le client fait une demande au serveur et ouvrez une connexion. Cette connexion ne sera fermée qu'après réception des données du serveur. Une fois que le serveur envoie les données, il ferme immédiatement la connexion. Le client ouvre immédiatement une nouvelle connexion et attend les données suivantes. (Si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois Colonne Manuel de développement AJAX pour en savoir)

Avantages : Il n'y aura pas de requêtes fréquentes lorsqu'il n'y a pas de message, et ce sera le cas. consommer moins de ressources.

Inconvénients : la connexion en attente du serveur consomme des ressources, l'ordre des données renvoyées n'est pas garanti et elle est difficile à gérer et à maintenir.

Exemples : WebQQ, version Hi web, 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>

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel d'utilisation AJAX pour en savoir plus. Si vous avez des questions, vous pouvez partir). un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!