Was ist Reverse-Ajax?

Reverse Ajax bedeutet, dass der Client keine Informationen vom Server erhalten muss, sondern der Server die relevanten Informationen direkt an den Client weiterleitet. Bei einer Standard-HTTP-Ajax-Anfrage werden Daten an den Server gesendet, und umgekehrt kann Ajax bestimmte Methoden verwenden, um eine Ajax-Anfrage zu simulieren, sodass der Server Ereignisse so schnell wie möglich an den Client senden kann.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer. Ausführliche Erklärung zu Ajax Dinge Lassen Sie mich es mit Ihnen teilen, damit Sie mit dem anspruchsvollen Interviewer umgehen können.

ajax ist „Asynchronous Javascript And XML“ (asynchrones JavaScript und XML), was sich auf eine Webentwicklungstechnologie zum Erstellen interaktiver Webanwendungen bezieht.

AJAX ermöglicht die asynchrone Aktualisierung von Webseiten, indem im Hintergrund eine kleine Datenmenge mit dem Server ausgetauscht wird. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Der Ursprung von Ajax

---

Diese Technologie wurde etwa 1998 angewendet. Die erste Komponente, die es Client-Skripten ermöglicht, HTTP-Anfragen (XMLHTTP) zu senden, wurde vom Outlook Web Access-Team geschrieben. Diese Komponente gehörte ursprünglich zu Microsoft Exchange Server und wurde schnell Teil von Internet Explorer 4.0[3]. Einige Beobachter glauben, dass Outlook Web Access die erste erfolgreiche Geschäftsanwendung war, die Ajax-Technologie nutzte, und dass es zum Vorreiter für viele Produkte wurde, darunter auch für das Webmail-Produkt von Oddpost.

Allerdings ist es Google, das Ajax in der Öffentlichkeit wirklich bekannt macht.

Google verwendet asynchrone Kommunikation in seinen berühmten interaktiven Anwendungen wie Google Discussion Groups, Google Maps, Google Search Suggestions, Gmail usw. Der Begriff Ajax wurde durch den Artikel „Ajax: A New Approach to Web Applications“ geprägt, dessen schnelle Verbreitung das Bewusstsein der Menschen für den Einsatz dieser Technologie steigerte. Darüber hinaus macht die Unterstützung von Mozilla/Gecko die Technologie ausgereifter und benutzerfreundlicher.

Das Prinzip von Ajax

Das Funktionsprinzip von Ajax entspricht dem Hinzufügen einer Zwischenschicht (AJAX-Engine) zwischen dem Benutzer und dem Server, wodurch Benutzervorgänge und Serverantworten asynchron werden. Nicht alle Benutzeranfragen werden an den Server gesendet. Nur wenn festgestellt wird, dass neue Daten vom Server gelesen werden müssen, sendet die Ajax-Engine die Anfrage an den Server in seinem Namen. Der Ajax-Kern besteht aus JavaScript, Der wichtigste Schritt besteht darin, die Anforderungsdaten vom Server abzurufen.

Lassen Sie uns diese Objekte verstehen:

1) XMLHTTPRequest-Objekt

Eines der größten Merkmale von Ajax ist, dass es Daten an den Server übertragen oder lesen und schreiben kann, ohne die Seite zu aktualisieren (auch bekannt als Aktualisieren der Seite ohne Aktualisierung). . Diese Funktion ist hauptsächlich der XMLHTTP-Komponente XMLHTTPRequest-Objekt zu verdanken.

XMLHttpRequest-Objektmethodenbeschreibung:

XMLHttpRequest-Objekteigenschaftenbeschreibung:

2) JavaScriptDie tollste Sprache im Frontend.

3) DOM Document Object Model

DOM ist eine Reihe von APIs für HTML- und XML-Dateien. Es bietet eine strukturelle Darstellung der Datei, sodass Sie deren Inhalt und Sichtbarkeit ändern können. Sein Kern besteht darin, eine Brücke zwischen Webseiten und Skript- oder Programmiersprachen zu schlagen. Alle Eigenschaften, Methoden und Ereignisse, die WEB-Entwickler bedienen und Dateien erstellen können, werden durch Objekte dargestellt (z. B. stellt das Dokument das Objekt „die Datei selbst“ dar, das Tabellenobjekt das HTML-Tabellenobjekt usw.).

Auf diese Objekte kann heute in den meisten Browsern per Skript zugegriffen werden. Eine mit HTML oder XHTML erstellte Webseite kann auch als eine Reihe strukturierter Daten betrachtet werden. Diese Daten sind im DOM (Document Object Model) enthalten und bieten Unterstützung für das Lesen und Schreiben verschiedener Objekte auf der Webseite.

4) XML

Extensible Markup Language (Extensible Markup Language) hat eine offene, erweiterbare, selbstbeschreibende Sprachstruktur. Sie ist zu einem Standard für die Online-Daten- und Dokumentenübertragung geworden und wird für andere Anwendungen zum Datenaustausch verwendet.

5) Umfassend

Die Ajax-Engine ist eigentlich eine relativ komplexe JavaScript-Anwendung, die zum Verarbeiten von Benutzeranfragen, zum Lesen und Schreiben von Servern und zum Ändern von DOM-Inhalten verwendet wird.

Die Ajax-Engine von JavaScript liest Informationen und schreibt das DOM interaktiv neu. Dadurch kann die Webseite nahtlos rekonstruiert werden, d. h. der Seiteninhalt wird geändert, nachdem die Seite heruntergeladen wurde. Dies haben wir häufig mit JavaScript und dem DOM verwendet. Methode, aber um eine Webseite wirklich dynamisch zu machen, ist nicht nur interne Interaktion, sondern auch die Datenerfassung von außen erforderlich. Früher ließen wir Benutzer Daten eingeben und den Inhalt der Webseite über das DOM ändern, aber jetzt Mit XMLHTTPRequest können wir Daten auf dem Server lesen und schreiben, ohne die Seite neu laden zu müssen, wodurch Benutzereingaben minimiert werden.

Ajax trennt die Schnittstelle und die Anwendung im WEB (man kann auch sagen, dass es Daten und Präsentation trennt). In der Vergangenheit gab es keine klare Grenze zwischen den beiden. Die Trennung von Daten und Präsentation ist förderlich für die Arbeitsteilung Zusammenarbeit und reduziert die Anzahl der nicht-technischen Mitarbeiter. Änderungen an Seiten verursachen Fehler in der WEB-Anwendung, verbessern die Effizienz und sind besser für aktuelle Veröffentlichungssysteme geeignet. Sie können auch einen Teil der bisherigen vom Server belasteten Arbeit auf den Client übertragen, was sich positiv auf die ungenutzte Rechenleistung des Clients auswirkt.

Vorteile von Ajax

Traditionelle Webanwendungsinteraktion besteht darin, dass der Benutzer eine HTTP-Anfrage an den Server auslöst, der Server diese verarbeitet und dann eine neue HTML-Seite an den Client zurückgibt.

Jedes Mal, wenn der Server eine vom Client übermittelte Anfrage verarbeitet, kann der Client nur im Leerlauf warten, und selbst wenn es sich nur um eine kleine Interaktion handelt und nur ein einfaches Datenelement vom Server benötigt wird, muss eine vollständige HTML-Seite zurückgegeben werden. Und Benutzer müssen Zeit und Bandbreite damit verschwenden, die gesamte Seite jedes Mal erneut zu lesen.

Dieser Ansatz verschwendet viel Bandbreite. Da jede Anwendungsinteraktion eine Anfrage an den Server senden muss, hängt die Antwortzeit der Anwendung von der Antwortzeit des Servers ab. Dies führt zu einer Benutzeroberfläche, die viel weniger reagiert als native Apps.

Im Gegensatz dazu kann eine AJAX-Anwendung nur die erforderlichen Daten an den Server senden und abrufen. Sie verwendet SOAP oder eine andere XML-basierte Webdienstschnittstelle und verwendet JavaScript auf dem Client, um die Antwort vom Server zu verarbeiten.

Da der Datenaustausch zwischen Server und Browser stark reduziert wird, können wir eine reaktionsschnellere Anwendung sehen. Gleichzeitig kann auf dem Client-Rechner, der die Anfrage stellt, eine Menge Verarbeitungsarbeit erledigt werden, sodass auch die Verarbeitungszeit des Webservers verkürzt wird.

Tatsächlich kann ich die Änderungen in einem Satz sehen, ohne die gesamte Seite durchsuchen zu müssen. Der Client teilt sich die Arbeit des Servers und der Serverdruck ist geringer.

Nachteile von Ajax

Daten und Schnittstellen sind offengelegt und die Sicherheit ist nicht sehr gut.

Detaillierte Erklärung von Reverse Ajax

---

Was ist Reverse Ajax? Bei einer Standard-HTTP-Ajax-Anfrage werden Daten an den Server gesendet. Reverse Ajax kann das Erstellen einer Ajax-Anfrage auf bestimmte Weise simulieren, sodass der Server Ereignisse so schnell wie möglich an den Client senden kann (Kommunikation mit geringer Latenz).

So implementieren Sie Reverse Ajax

1. Polling ist tatsächlich die dümmste Art, Reverse Ajax zu implementieren: Verwenden Sie Javascript, um Ajax-Anfragen regelmäßig auf dem Client zu senden.

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

Um möglichst schnell serverseitige Ereignisse zu erhalten, muss das Polling-Intervall (die Zeit zwischen zwei Anfragen) möglichst klein sein. Der Nachteil liegt auf der Hand: Wenn das Intervall verkürzt wird, sendet der Client-Browser mehr Anfragen, von denen viele keine nützlichen Daten zurückgeben, was zu einer Verschwendung von Bandbreite und Prozessressourcen führt.

2. PiggyBack (PiggyBack)

PiggyBack ist ein intelligenterer Ansatz als Polling, da alle nicht wesentlichen Anfragen (die keine Daten zurückgeben) gelöscht werden.

Es handelt sich um eine semiaktive Methode, was bedeutet, dass der Browser die Anfrage weiterhin aktiv ausgibt, aber in der Antwort auf jede Anfrage zusätzlich zur aktuellen Antwort auch die Änderungen gesendet werden, die seit der letzten Anfrage aufgetreten sind Browser.

Mit anderen Worten: Das angeforderte Update wird in die Antwort der nächsten Anfrage übernommen und zurückgesendet. Auf diese Weise hat der Browser das Gefühl, als sei die letzte Anfrage aktualisiert worden. Dieses Gefühl hängt jedoch davon ab, wie oft der Browser Anfragen an den Server stellt. Wenn die zweite Anfrage nicht gesendet wird, wird das letzte Update nicht abgerufen.

3. Comet (Server-Push)

Dies ist eine „Server-Push“-Technologie, die auf einer langen HTTP-Verbindung basiert.

Es gibt zwei Hauptimplementierungsmethoden:

1) HTTP-Streaming

Betten Sie einen versteckten Iframe in die Seite ein und setzen Sie das src-Attribut dieses versteckten Iframes auf eine Anforderung für eine lange Verbindung oder verwenden Sie xhr-Anfragen an den Server kann kontinuierlich Daten in den Client eingeben.

优点：消息即时到达，不发无用请求；管理起来也相对方便。

缺点：服务器维护一个长连接会增加开销。

实例：Gmail聊天

<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 长轮询（HTTP Long Polling）

这种情况下，由客户端向服务器端发出请求并打开一个连接。这个连接只有在收到服务器端的数据之后才会关闭。服务器端发送完数据之后，就立即关闭连接。客户端则马上再打开一个新的连接，等待下一次的数据。

优点：在无消息的情况下不会频繁的请求，耗费资源小。

缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。

实例：WebQQ、Hi网页版、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>

【相关教程推荐：AJAX视频教程】

Das obige ist der detaillierte Inhalt vonWas ist Reverse-Ajax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!