Reverse Ajax Implementierung _Ajax

Reverse Ajax, Teil 1:Introduction zum Kometen in den letzten Jahren Webentwicklung hat sich sehr verändert. Heute erwarten wir apps schnell und dynamisch über das Web zugreifen können. In dieser neuen Artikelserie lernen wir eine bessere User Experience zu implementieren, mithilfe von reverse Ajax (Reverse Ajax)-Technologie, um ereignisgesteuerte Webanwendungen zu entwickeln. Die Client-Beispiel verwendet JQuery JavaScript-Bibliothek, die wir erkunden verschiedene reverse Ajax-Techniken und herunterladbare Beispiele erfahren Sie Komet mit der Strömung (streaming)-Methode und die lange polling-Methode verwenden.

Ziel

Web-Entwicklung hat einen langen Weg zurückgelegt, in den letzten Jahren, und wir sind gegangen weit über statische Web-Seiten verknüpfen, die kann dazu führen, dass Browser aktualisieren und warten, bis die Seite geladen. Was fehlt, ist jetzt eine vollständig dynamische Anwendung, die über das Internet zugegriffen werden kann, in der Regel so schnell wie möglich, die near-Real-Time-Komponenten sein muss. In dieser neuen fünfteiligen Artikelserie lernen wir, wie reverse Ajax (Reverse Ajax)-Technologie verwenden, um ereignisgesteuerte Webanwendungen zu entwickeln.

In diesem ersten Artikel lernen wir reverse Ajax Polling (polling), streaming (streaming), Comet und lange Polling, lernen, wie man verschiedene reverse Ajax-Kommunikations-Technologien zu implementieren, und erkunden die vor- und Nachteile der einzelnen Ansätze. Sie können den entsprechenden Quellcode für das Beispiel in diesem Artikel herunterladen.

Ajax, Reverse Ajax und WebSocket

Asynchrones JavaScript und XML (asynchrones JavaScript und Xml, Ajax), eine Browserfunktion, die über JavaScript zugegriffen werden kann Es kann das Skript eine HTTP-Anforderung an die Website hinter den Kulissen zu senden, ohne Neuladen der Seite. Ajax ist hier seit mehr als einem Jahrzehnt, und obwohl sein Name XML-Code enthält, können Sie fast alles in einem AJAX-Request übertragen, und die am häufigsten verwendeten Daten ist JSON, die in der Nähe von JavaScript-Syntax und verbraucht weniger Bandbreite. Listing 1 zeigt ein Beispiel für eine AJAX-Anfrage an den Namen eines Ortes durch einen Zip Code irgendwo abrufen.

Listing 1. Ajax Request Beispiel Var-Url = "http://www.geonames.org/postalCodeLookupJSON?postalcode="
+ $ ('#PostalCode'). (Val) + "& Land ="
+ $ ('#country.#'). (Val) + "& Rückruf =? ' ;
$.GetJSON (URL, Funktion (Daten) {}
$ ('#PlaceName'). Val (data.postalcodes[0].placename);
});

In den Source-Code in diesem Artikel zum Download verfügbar sehen Sie die Rolle dieses Beispiels in listing1.html.

Reverse Ajax (Reverse Ajax) ist im Wesentlichen ein Konzept, mit dem Daten an Kunden aus der Server-Seite gesendet werden kann. In einer standard http-Ajax-Anforderung, Daten an die Server-Seite gesendet wird, kann reverse Ajax simulieren Erteilung eine AJAX-Anfrage auf eine bestimmte Weise, die in diesem Artikel behandelt wird, so dass die Server Ereignisse (Niedriglatenz Verkehr) so schnell wie möglich an den Client senden kann.

WebSocket-Technologie kommt von HTML5, eine Technologie, die erst vor kurzem entstanden, und viele Browser bereits unterstützen (Firefox, Google Chrome, Safari, usw.). WebSocket ermöglicht einen bidirektionale, Vollduplex-Kommunikationskanal, der öffnet die Verbindung durch einige HTTP-Anforderung ein WebSocket-Handshakes genannt und einige spezielle Header verwendet. Die Verbindung bleibt aktiv, und Sie können schreiben und empfangen von Daten in JavaScript, als ob Sie eine ursprüngliche TCP-Socket Schnittstelle verwenden würden. WebSocket wird im zweiten Teil dieser Artikelserie erwähnt werden.

Reverse Ajax-Technologie

Reverse Ajax soll die Server-Seite, Informationen an den Client zu drücken zu lassen. AJAX Anfragen sind standardmäßig staatenlos und können nur vom Client an die Serverseite vorgenommen werden. Sie können diese Einschränkung umgehen, mithilfe von Technologie, um reaktionsschnelle Kommunikation zwischen der Server-Seite und dem Kunden zu simulieren.

Http-Polling und JSONP polling

Abfragen (Polling) beinhaltet, eine Anforderung vom Client an den Server um einige Daten zu erhalten, was eindeutig eine reine Ajax HTTP-Anforderung. Erlangung von Server-Side-Events als muss schnellstmöglich, Polling-Intervall (Zeit zwischen zwei Anfragen) so klein wie möglich sein. Aber es einen Nachteil gibt: Wenn das Intervall sinkt, der Client-Browser mehr Anfragen macht und viele dieser Anforderungen Nutzdaten, die Bandbreite und Verarbeitungsressourcen vergeuden werden nicht zurück.

Die Zeitachse in Abbildung 1 veranschaulicht, die der Client einiger Polling-Anfragen ausgegeben, aber keine Informationen gibt diese Situation und der Client muss warten, bis die nächste Abfrage zu den Ereignissen auf dem zwei Server empfangen.

Abbildung 1. Reverse Ajax mit http-polling

JSONP Polling ist im Grunde das gleiche wie http-Polling, und der Unterschied ist, dass JSONP domänenübergreifende Anforderungen (nicht Anfragen innerhalb Ihrer Domain) ausstellen kann. Codebeispiel 1 verwendet JSONP um Ortsnamen nach Postleitzahl zu bekommen, und JSONP Anfragen können oft durch seine Callback Parameter identifiziert werden und zurück Inhalt, sind ausführbare JavaScript-Code.

Um Polling in JavaScript implementieren, können SetInterval Sie in regelmäßigen Abständen Ajax Requests, Ausgabe wie in Listing 2 dargestellt:

Listing 2. Polling-JavaScript SetInterval (Funktion () {}
$.GetJSON ("Events", Funktion (Ereignisse) {}
Console.log (Veranstaltungen);
});
}, 2000);

Die Polling-Demo in den Source-Code des Artikels gibt die Bandbreite der Polling-Methode in einem kleinen Intervall, aber Sie können sehen, dass einige Anfragen nicht Ereignisse zurück und listing 3 die Ausgabe dieses Beispiels Polling zeigt.

Listing 3. Die Ausgabe des Polling Demo-Beispiels [Client] Veranstaltungen werden gesucht...
[Client] kein Ereignis
[Client] Veranstaltungen werden gesucht...
[Client] 2 Veranstaltungen
[Veranstaltung] Bei Sonne, 05. Juni 15:17:14 CEST 2011
[Veranstaltung] Bei Sonne, 05. Juni 15:17:14 CEST 2011
[Client] Veranstaltungen werden gesucht...
[Kunden] 1-events
[Veranstaltung] Bei Sonne, 05. Juni 15:17:16 CEST 2011

Vor- und Nachteile von Polling mit JavaScript implementiert:

1. Vorteile: Es ist einfach zu implementieren, erfordert keiner Server-seitigen Besonderheiten und kann auf allen Browsern funktionieren.

(2) Nachteile: Diese Methode wird selten verwendet, weil es nicht vollständig skalierbar ist. Stellen Sie sich die Menge der Bandbreite und Ressourcen verloren bei 100 Kunden jeder Antragstellung 2 Sekunden abrufen, in dem Fall 30 % der Anträge keine Daten zurück.

Huckepack

Huckepack Polling ist ein intelligenter Ansatz als polling, weil es löscht alle nicht erforderlichen Anträge (diejenigen, die keine Daten zurückgeben). Es gibt kein Zeitintervall für Kunden auf der Serverseite Anfragen schicken, wenn sie sie benötigen. Der Unterschied ist, dass auf diesem Teil der Antwort, die Antwort in zwei Teile geteilt ist: die Antwort auf die angeforderten Daten und die Reaktion auf die Server-Ereignis tritt ein Teil davon. Abbildung 2 zeigt ein Beispiel.

Abbildung 2. Reverse Ajax mit Huckepack polling

Beim Huckepack-Technologie zu implementieren, können alle AJAX-Anfragen in der Regel auf der Serverseite eine gemischte Reaktion zurück, und es gibt ein Beispiel der Umsetzung im Download des Artikels, wie in Listing 4 unten dargestellt.

Codebeispiel 4. Huckepack-Code Beispiel $ ('#submit'). Klick (Funktion () {}
$.Post ("Ajax", Funktion (Daten) {}
Var gültig = data.formValid;
Arbeiten mit Validierungsergebnisse
Verarbeiten Sie dann die anderen Teile der Antwort (Veranstaltungen)
ProcessEvents (data.events);
});
});

Listing 5 zeigt eine Huckepack Ausgabe.

Listing 5. Huckepack Ausgabebeispiel [Client] Veranstaltungen werden gesucht...
[Server] Form gültig? STIMMT
[] 4 Kundenveranstaltungen
[Veranstaltung] Bei Sonne Juni 05 16:08:32 UTC 2011
[Veranstaltung] Bei Sonne Juni 05 16:08:34 UTC 2011
[Veranstaltung] Bei Sonne Juni 05 16:08:34 UTC 2011
[Veranstaltung] Bei Sonne Juni 05 16:08:37 UTC 2011

Sie sehen die Ergebnisse der Formularüberprüfung und den Ereignissen verbunden, die Antwort, und wieder, dieser Ansatz hat einige vor- und Nachteile:

1. Vorteile: Es gibt keine Anfrage nicht zum Zurückgeben von Daten, da der Client steuert, wann die Anfrage gesendet und verbraucht weniger Ressourcen. Diese Methode ist auch verfügbar auf allen Browsern und erfordert keine besonderen Merkmale auf der Serverseite.

(2) Nachteile: Wenn Ereignisse, die auf der Serverseite ansammeln an den Client übermittelt werden müssen, überhaupt, wisst ihr nicht weil dies erfordert ein Clientverhalten sie anfordern.

Komet

Reverse Ajax, das Polling verwendet oder ist mit sich brachte, ist sehr begrenzt: Es ist nicht skalierbar und bietet keine Niedriglatenz Kommunikation (Sobald das Ereignis auf der Serverseite ankommt, sie erreichen den Browser so schnell wie möglich). Comet ist Web-Anwendung-Modell in der Anfragen sind an die Serverseite gesendet und für eine lange Lebensdauer, bis ein Timeout oder ein Server-Side-Ereignis eintritt. Wenn die Anforderung abgeschlossen ist, wird einem anderen langlebigen Ajax-Request gesendet, auf einem anderen Server-Side-Event warten. Mit Kometen kann die Web-Server Daten an Clients ohne explizite Anfragen senden.

Einer der großen Vorteile des Kometen ist, dass jeder Kunde hat immer eine Kommunikationsverbindung, die auf der Serverseite geöffnet ist. Die Server-Seite kann Ereignisse an den Client mit dem Absenden (abschließen) Antworten sofort, wenn das Ereignis eintrifft, oder es kann sogar sammeln und senden Sie dann kontinuierlich schieben. Da Anfragen für eine lange Zeit offen bleiben, erfordert die Server-Seite spezielle Funktionen, alle diese langlebigen Anfragen behandeln. Abbildung 3 zeigt ein Beispiel. (Im 2. Kapitel dieser Artikelserie erläutert die Einschränkungen auf der Serverseite ausführlicher.)

Abbildung 3. Mit Hilfe des Kometen reverse Ajax

Komet-Implementierungen können in zwei Kategorien unterteilt werden: diejenigen, die mit Datenströme (streaming) und diejenigen, die lange Abfragen verwenden.

Kometen mit den HTTP-Datenstrom

Im Stream (streaming)-Modus ist eine permanente Verbindung geöffnet. Es werden nur eine lange Lebensdauer-Anforderung (#1 in Abbildung 3), da jedes Ereignis, das auf der Serverseite kommt über dieselbe Verbindung gesendet wird. Daher muss der Client einen Weg haben, trennen Sie die verschiedenen Antworten über dieselbe Verbindung gesendet. Technisch, gehören zwei gemeinsame Streaming-Technologien immer Iframe (versteckten IFrame) oder das mehrteilige (mehrteilige) Merkmal das XMLHttpRequest-Objekt, das verwendet wird, um Ajax Requests in JavaScript zu erstellen.

Für immer Iframe

Iframe (persistent Iframe) Technologie beinhaltet immer eine versteckten Iframe-Beschriftung auf einer Seite, die auf der Servlet-Pfad verweist, die Server-Side-Events zurückgibt. Jedes Mal, wenn das Ereignis eintrifft, das Servlet schreibt und erfrischt ein neues Skript-Label mit JavaScript-Code innerhalb der Inhalt des IFrame hängen an dem Skript-Label und den Inhalt des Labels werden ausgeführt.

1. Vorteile: Einfach zu implementieren, auf alle IFRAME-unterstützten Browsern verfügbar.

(2) Nachteile: Gibt es keine Möglichkeit, zuverlässige Fehlerbehandlung implementieren oder den Status einer Verbindung, da alle Verbindungen und Daten vom Browser durch HTML-Tags, gehandhabt werden, so dass Sie keine Möglichkeit haben, zu wissen, wann an dessen Ende die Verbindung getrennt wurde.

Mehrteilige XMLHttpRequest

Die zweite Technik, zuverlässiger, ist die Multi-PART-Flag unterstützt XMLHttpRequest-Objekte mit bestimmten Browsern wie Firefox. Die AJAX-Anfrage wird gesendet an die Serverseite und bleibt geöffnet, und jedes Mal ein Ereignis eintrifft, ist eine mehrteilige Antwort über dieselbe Verbindung geschrieben und listing 6 zeigt ein Beispiel.

Listing 6. Set Multi-Part-XMLHttpRequest JavaScript Code Beispiel Var Xhr = $. ajaxSettings.xhr ();
XHR.Multipart = True;
XHR.Open ("Get", "Ajax", true);
XHR.onreadystatechange = Funktion () {}
Wenn (xhr.readyState == 4) {}
ProcessEvents ($.parseJSON (xhr.responseText));
}
};
XHR.Send (NULL);

Auf der Serverseite sind Dinge ein wenig komplizierter. Zuerst müssen Sie eine mehrteilige Anforderung einrichten und dann die Verbindung unterbrechen. Listing 7 zeigt, wie Sie einen HTTP-Stream Request auszusetzen. (Diese Serie der 3. Kapitel befasst sich ausführlicher mit diesen APIS.) )

Listing 7. Nutzung der Servlet 3-API, eine HTTP-Stream Anforderung auszusetzen geschützt void DoGet (getParameter Req, HttpServletResponse Resp) in das servlet
Throws ServletException, IOException {}
Starten Sie die ausstehende Anforderung
AsyncContext AsyncContext = req.startAsync ();
AsyncContext.setTimeout (0);

Einen mehrteilige Separator zurück an den Client senden
Resp.setContentType ("Multipart/X-gemischt-ersetzen; Grenze = \")
+ Begrenzung + "\" ");
Resp.setHeader ("Connection", "Keep-alive");
(Resp.getOutputStream). Print ("--" + Grenze);
(Resp.flushBuffer);

Setzen Sie den asynchronen Rahmen in der Liste erst in der Zukunft verwendet werden
AsyncContexts.offer (AsyncContext);
}

Jetzt jedes Mal, wenn ein Ereignis auftritt, können alle ausstehenden Verbindungen zu durchqueren und Schreiben von Daten, wie in Listing 8 gezeigt:

Listing 8. Verwenden Sie das Servlet 3-API, um ein Ereignis auf eine abgehängte mehrteiligen (AsyncContext Asynccontext:asynccontexts) {} senden
HttpServletResponse Peer = (HttpServletResponse)
(AsyncContext.getResponse);
(Peer.getOutputStream). Println ("Content-Type: Anwendung / Json");
(Peer.getOutputStream). Println ();
(Peer.getOutputStream). Println (neue JSONArray)
. Setzen ("in" + neues Datum ()). ToString ());
(Peer.getOutputStream). Println ("--" + Grenze);
(Peer.flushBuffer);
}

Abschnitt in der Comet-Straming-Ordner der herunterladbaren Dateien in diesem Artikel beschreibt des HTTP-Streams, und wenn Sie das Beispiel ausführen und öffnen Sie die Homepage, Sie werden sehen, dass, sobald die Ereignisse auf der Serverseite ankommen, sie sind nicht synchronisiert, aber sie auf der Seite fast sofort erscheinen. Auch, wenn Sie die Firebug-Konsole öffnen, sehen Sie, dass dieser nur eine Ajax-Anfrage geöffnet ist. Schaut man etwas weiter nach unten, sehen Sie, dass die Registerkarte "Antwort" die JSON Antwort zugeordnet ist, wie in Abbildung 4 dargestellt:

Abbildung 4. FireBug-Ansicht von http-Stream Anfragen

In der Regel gibt es einige vor- und Nachteile des Ansatzes:

1. Vorteile: Nur eine dauerhafte Verbindung ist aktiviert, wird die Comet-Technologie, die meisten die Bandbreitennutzung spart.

(2) Nachteile: Nicht alle Browser unterstützen die mehrteilige Flagge. Einige weit verbreiteten Bibliotheken wie CometD mit Java implementiert werden berichtet, um Probleme mit der Pufferung. Beispielsweise können einige Datenblöcke (mehrteilig) gepuffert und dann gesendet, nur wenn die Verbindung ist abgeschlossen oder der Puffer ist voll, was zu einer höheren führen als erwarteten Verzögerung.

Komet, der verwendet HTTP Langabfragen

Die lange Polling-Modus beinhaltet die Technik der Verbindung öffnen. Die Verbindung bleibt von der Serverseite geöffnet, und, sobald ein Ereignis auftritt, setzt sich die Reaktion und die Verbindung wird geschlossen. nächster. Eine neue lange Polling Verbindung wird durch den Kunden warten auf das neue Ereignis kommen wieder geöffnet werden.

Das Script-Tag oder ein einfaches XMLHttpRequest-Objekt können Sie HTTP Langabfragen implementieren.

Script-tags

Wie bei IFRAME, ist das Ziel das Skript auf der Seite für das auszuführende Skript anzubringen. Die Server-Seite wird: die Verbindung unterbrechen, bis ein Ereignis auftritt, dann senden Sie das Skript Inhalt zurück an den Browser, und öffnen Sie dann ein anderes Skriptregisterkarte, um die nächste Veranstaltung zu bekommen.

1. Vorteile: Weil es auf HTML-Tags ist, all diese Technologie ist sehr einfach zu implementieren und domänenübergreifend arbeiten können (standardmäßig "XMLHttpRequest" erlaubt keine Anfragen auf andere Domains oder Subdomains gesendet werden).

(2) Nachteile: Ähnlich wie bei IFRAME Technologie, Fehlerbehandlung fehlt, Sie können nicht den Status der Verbindung oder haben die Möglichkeit, die Verbindung stören.

XMLHttpRequest Long Polling

Die zweite und eine empfohlene Implementierung des Kometen Ansatzes ist eine AJAX-Anfrage auf der Server-Seite öffnen und auf eine Antwort warten. Die Server-Seite erfordert einige spezifische Funktionen erlauben die Anforderung ausgesetzt werden, und, sobald ein Ereignis auftritt, wird der Server wieder die Antwort in die ausstehende Anforderung senden und schließen den Wunsch, genau so, als ob Sie den Ausgabestream der Servlet Antwort deaktiviert hatte. Der Client verwendet diese Antwort dann und öffnet sich eine neue, langlebige Ajax-Request an die Serverseite, wie in Listing 9:

Codebeispiel 9. Richten Sie einen JavaScript-Code-Beispiel für eine lange Polling Anfrage Funktion Long_polling () {}
$.GetJSON ("Ajax", Funktion (Ereignisse) {}
ProcessEvents (Veranstaltungen);
(Long_polling);
});
}
(Long_polling);

Auf dem Back-End der Code verwendet auch die Servlet-API 3, auszusetzen, Anfragen, wie der Fall mit http-Streams, aber Sie brauchen nicht alle mehrteiligen Verarbeitungscode und Codebeispiel 10 zeigt ein Beispiel.

Codebeispiel 10. Eine lange aussetzen polling Ajax-Request void DoGet (getParameter Req, HttpServletResponse Resp) geschützt
Throws ServletException, IOException {}
AsyncContext AsyncContext = req.startAsync ();
AsyncContext.setTimeout (0);
AsyncContexts.offer (AsyncContext);
}

Wenn ein Ereignis empfangen wird, werden nur alle ausstehende Anforderungen entfernt und abgeschlossen, wie in Codebeispiel 11 dargestellt:

Codebeispiel 11. Komplette lange Abfragen Ajax Anfragen beim Eintreten eines Ereignisses (! asyncContexts.isEmpty ()) {}
AsyncContext AsyncContext = asyncContexts.poll ();
HttpServletResponse Peer = (HttpServletResponse)
(AsyncContext.getResponse);
(Peer.getWriter). schreiben ()
(Neue JSONArray). setzen ("" + neues Datum ()). ToString ());
Peer.setStatus (HttpServletResponse.SC_OK);
Peer.setContentType ("Anwendung/Json");
(AsyncContext.complete);
}

In der begleitenden Download-Quelldatei der Comet-Long-Polling-Ordner enthält eine lange polling Beispiel Web-app, die Sie verwenden können, um es mit den MVN Jetty: Run-Befehl ausführen.

1. Vorteile: Es ist einfach für Kunden gute Fehlerbehandlung Systeme und Timeout-Management zu implementieren. Diese zuverlässige Technik ermöglicht auch eine hin-und Rückfahrt zwischen Verbindungen zu der Server-Seite, auch wenn die Verbindung nicht persistent ist (das ist eine gute Sache, wenn Ihre app viele Kunden hat). Es kann auf allen Browsern verwendet werden, alles, was Sie tun müssen, ist sicherzustellen, dass das XMLHttpRequest-Objekt, die du verwendest, eine einfache Ajax-Anfrage gesendet wird.

(2) Nachteile: Es gibt keine wichtige Nachteile im Vergleich zu anderen Technologien, und wie die Technologien, die wir besprochen haben, dieser Ansatz noch stützt sich auf zustandslosen HTTP-Verbindungen, die besondere Merkmale auf der Serverseite vorübergehend Verbindungen erfordern.

Anregungen

Da alle modernen Browser die domänenübergreifende Ressourcen unterstützen teilen (Cross-Origin Resource Aktie, Cors) Spezifikation, wodurch XHR domänenübergreifende Anforderungen, skriptbasierte ausführen und IFRAME-basierten Technologien eine veraltete Notwendigkeit geworden.

Der beste Weg zu implementieren und Comet als reverse Ajax ist durch das XMLHttpRequest-Objekt, das bietet eine wahre Verbindungs-Handle und Fehlerbehandlung. Wenn man bedenkt, dass nicht alle Browser die mehrteilige Flagge unterstützen, mehrere Umleitungen Pufferung Probleme auftreten können, es wird empfohlen, Sie Comet-Modus wählen, die das XMLHttpRequest-Objekt (eine einfache Ajax-Anfrage auf der Serverseite ausgesetzt) über HTTP verwendet lange Abfragen, Dieser Ansatz wird auch von allen AJAX unterstützten Browsern unterstützt.

Schlussfolgerung

Dieser Artikel enthält eine Entry-Level-Einführung in Ajax-Technologie, umkehren, untersucht verschiedene Möglichkeiten, um reverse Ajax-Kommunikation zu implementieren, und erklärt die vor- und Nachteile jeder Implementierung gegenüberstellen. Ihre spezifische Situation und Anwendung müssen Ihre Wahl der am besten geeignete Methode auswirkt. Im Allgemeinen, wenn Sie eines der besten Kompromisse Niedriglatenz kommunikativ haben möchten, wählen Sie jedoch Timeout und Fehlererkennung, Einfachheit und gute Unterstützung für alle Browser und Plattformen, Komet, die Ajax verwendet lange Abfragen Anfragen.

Lesen Sie Teil 2 dieser Serie: in diesem Abschnitt wird die dritte reverse Ajax-Technik erkunden: WebSocket. Obwohl diese Technologie noch nicht von allen Browsern unterstützt, WebSocket sicherlich ein sehr gutes reverse Ajax Kommunikationsmedium ist, beseitigt WebSocket alle Einschränkungen, die mit der Staatenlosen Natur von HTTP-Verbindungen verbunden. Teil 2 befasst sich auch serverseitige Einschränkungen durch Kometen und WebSocket Technologien hervorgebracht.

Codedownload

reverse_ajaxpt1_source.zip