1. Was sind dynamische Inhalte?
Die meisten beliebten Websites verdienen Geld mit Online-Werbung. Die Werbeflächen auf Webseiten sind begrenzt. Damit sich Werbeinvestitionen lohnen, müssen Werbetreibende nicht nur eine große Menge an Informationen auf einer kleinen Werbefläche unterbringen, sondern auch dafür sorgen, dass die Werbung die Aufmerksamkeit der Nutzer wecken kann. Auf den meisten aktuellen Websites werden auf Webseiten platzierte Bannerwerbung im Allgemeinen vom Server beim Erstellen der Seite generiert. Wir können keine neuen Anzeigen dynamisch in versendete Seiten einfügen. Wenn Sie neue Anzeigen schalten möchten, besteht die einzige Möglichkeit darin, die Seite zu aktualisieren. Wir können die Seite beispielsweise programmgesteuert aktualisieren:
Verwenden Sie die Funktion setTimeOut des Browserfensterobjekts, um die Seite regelmäßig zu aktualisieren. Wenn die Anzeigen auf diese Weise aktualisiert werden, spüren die Benutzer den Seitenaktualisierungsprozess deutlich. Gleichzeitig ist es schwierig, eine angemessene Aktualisierungshäufigkeit zu bestimmen.
Stellen Sie die Ablaufzeit der Seite auf einige Sekunden ein, damit der Browser die Seite jedes Mal erneut herunterlädt, wenn der Eingabefokus auf die Seite wechselt (d. h. der Browser aktiviert wird).
Einige große Websites wie yahoo.com und msn.com haben diese Technologien bereits übernommen. Beide Methoden haben ihre eigenen Vor- und Nachteile. Wenn wir nur Java verwenden, können wir das Banner-Werbeaktualisierungssystem durch Netzwerkprogrammierung und einige Schnittstellenprogrammierungsarbeiten vollständig implementieren, aber die Probleme langer Downloadzeiten und Aktualisierungsverzögerungen müssen gelöst werden.
2. Verwenden Sie Java, um Content Push zu implementieren
Durch die Kombination der JavaScript-Interframe-Kommunikation mit einem Java-Applet, das die Netzwerkkommunikation verwaltet, können wir dieses Problem mithilfe der Push-Technologie lösen. In einem solchen System besteht die Aufgabe des Java-Applets darin, eine Verbindung zum Server herzustellen und auf Inhaltsaktualisierungen zu warten. Sobald der neue Inhalt empfangen wurde, erstellt das Applet den HTML-Code, der den neuen Inhalt anzeigt, ruft eine JavaScript-Funktion auf und übergibt den HTML-Code mit dem neuen Inhalt an die JavaScript-Funktion. Die JavaScript-Funktion verwendet DHTML- und DOM-Technologie, um den Inhalt eines <div>-Tags auf der Seite durch den neuen Inhalt zu ersetzen, der im Parameter übergeben wird. Aufgrund von Sicherheitsbeschränkungen des Browsers kann der vom Applet geöffnete Socket-Port nur mit dem Server verbunden werden, der das Applet heruntergeladen hat.
Der Webserver lauscht nur auf Port 80 auf Verbindungsanfragen. Daher benötigen wir zusätzlich zum Webserver auch einen Netzwerkanwendungsdienst, der die Socket-Verbindungsanfrage des Applets akzeptiert. Dieser Netzwerkanwendungsdienst fragt regelmäßig die Datenbank ab und veröffentlicht (pusht) die geänderten Daten an alle verbundenen Applets. Dank der Verwendung versteckter Frames und der Inter-Frame-Kommunikationsfunktionen von JavaScript sind wir in der Lage, den größten Teil der JavaScript-Logik vor dem Benutzer zu verbergen.
Die schwierigste Aufgabe in diesem gesamten Prozess ist die Kommunikation zwischen dem Java-Applet und dem JavaScript-Code. Netscape bietet eine Klasse namens netscape.javascript.JSObject. Um dieses Objekt zu verwenden, fügen Sie ein Applet-Tag hinzu, das das spezielle „MAYSCRIPT“-Attribut enthält:
<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>
Die Methoden von JSObject ermöglichen Applets, mit dem Dokumentobjekt zu interagieren und JavaScript-Befehle aufzurufen. Indem wir beispielsweise den folgenden Code in das Applet einfügen, können wir auf das Fensterobjekt zugreifen:
import netscape.javascript.*; public class MyApplet extensions java.applet.Applet{ private JSObject mainwin; public void init(){ mainwin = JSObject.getWindow ( this); } }
Nachdem wir die JSObject-Referenz erhalten haben, können wir auf das Dokumentfensterobjekt zugreifen und die JavaScript-Funktion über die eval()-Methode von JSObject aufrufen.
3. Aktualisieren Sie die Seite mit DHTML
Wenn wir neuen Inhalt aus dem Applet in das Dokument schreiben, können wir das HTML-Tag <div></div> verwenden, um den vorhandenen Inhalt nicht zu beeinträchtigen. Dieses Tag ist in IE und Netscape unterschiedlich.
Für IE und Netscape 6 lautet dieses HTML-Tag:
// Alle zu aktualisierenden Inhalte müssen durch die ID <div id="iexplorer" width=700px ></div> identifiziert werden
Für Netscape 4.x-Versionen lautet dieses HTML-Tag:
<DATA><layer id="netscapev" ></layer></DATA>
Obwohl wir den HTML-Inhalt aus Gründen der Übersichtlichkeit direkt vom Applet aus aktualisieren können, indem wir auf die entsprechende ID verweisen Der Einfachheit halber packen wir die Programmlogik zur Aktualisierung des HTML-Codes in eine JavaScript-Funktion. Der folgende JavaScript-Code speichert den Browsertyp in der Variablen ie:
applnname=navigator.appName; if(applnname=="Microsoft Internet Explorer") { ie=true; }
Das Applet erstellt HTML aus dem neuen Datencode, speichern Sie ihn im JavaScript-Variableninhalt und rufen Sie dann die Methode „assignData()“ auf. Inhaltsdaten können alles sein, von einfachem HTML über XML bis hin zu Binärdaten.
// Rufen Sie die entsprechende Methodenfunktion auf zuzuweisen() { if(ie) {explore();} else {navig(); } entsprechend dem Browsertyp
Wenn es sich bei dem Browser um IE oder Netscape 6 handelt, ruft das Applet die Methode explore() auf:
//content ist eine Javascript-Variable, die die neuen Daten beschreibt, die im HTML-Format angezeigt werden müssen. Funktion explore() { iexplorer.innerHTML=content ; }
wenn der Browser Netscape 4.0 oder höher ist und das Applet die navig()-Methode aufruft:
function navig() { document.netscapev.document.write(“<DATA>“ + content + „</DATA>“); document.netscapev. document.close(}
4. Kommunikationsprozess
Auf der Serverseite antwortet eine Instanz der Klasse ImageApplikation.java auf Socket-Verbindungsanfragen und erstellt für jede neue Verbindungsanfrage einen neuen Thread. Um den Code zu vereinfachen, prüft jeder Thread nur, ob sich die Datendatei geändert hat. Wenn sich die Datendatei geändert hat, liest der Thread den Dateiinhalt und sendet die neuen Daten an das verbundene Applet (die Beispielanwendung sendet die gesamte Datei an das Applet).
Auf der Clientseite enthält ein ausgeblendeter Frame das Applet ImageApplet.java, sodass das Applet-Tag mit der HTML-Quellcode-Anzeigefunktion des Browsers nicht angezeigt werden kann. Das Applet implementiert die Funktion der Verbindung zum Server (dem Quellserver zum Herunterladen des Applets) und implementiert ein einfaches Kommunikationsprotokoll. Nachdem eine Verbindung mit dem Server hergestellt wurde, empfängt das Applet die Daten vom Server, erstellt den HTML-Code und ruft die JavaScript-Funktion auf, um die Daten an das Dokument zu übergeben:
public void upDateHTML(String str){ //data ist der Name von Das Formular //quote ist eine JavaScript-Variable //str ist der neu erstellte HTML-Code mainwin.eval("document.data.quote.value="" + str + """); mainwin.eval("javascript:assignData ()"); return; }
netscape.javascript.JSObject vervollständigt die Kommunikation vom Applet zu JavaScript. Verschiedene Versionen von Client-Browsern erfordern unterschiedliche Versionen. Sie können die für Netscape bereitgestellte komprimierte Klassendatei java40.jar herunterladen. Im IE ist die JSObject-Klasse bereits enthalten, diese ist jedoch etwas schwer zu finden. Sie können das Verzeichnis $windows$JavaPackages durchsuchen, um die ZIP-Datei mit der JSObject-Klasse zu finden.
Der Server serialisiert die Instanz der ImageArrayElement.java-Klasse über die toString()-Methode in einen String und sendet ihn an das Applet. Der Server erstellt jedes Objekt aus der Datendatei, ruft die Methode toString() auf, verkettet die Zeichenfolgen, die alle Objekte darstellen, und sendet schließlich die resultierende Zeichenfolge. Am anderen Ende empfängt und analysiert das Applet diese Zeichenfolge und rekonstruiert jedes ImageArrayElement-Objekt. Der Grund, warum Daten hier in Form einer langen Zeichenfolge gesendet werden, liegt darin, dass diese Methode nur einen sehr einfachen Verarbeitungsprozess erfordert, sodass Benutzer sofort und nahezu in Echtzeit über Datenänderungen informiert werden können. Wir können jedoch auch eine andere Methode verwenden Methode Methode, die das Objekt als Vektor sendet.
In einer Live-Anwendung sollten Sie das Einfügen neuer Daten in die aktuelle Seite grundsätzlich transparent machen. In der Beispielanwendung wird der Benutzer jedoch benachrichtigt, wenn neue Inhalte eintreffen, um den Programmablauf intuitiver zu gestalten.
Der Hauptvorteil der Push-Technologie besteht darin, dass der Anwendungsserver nur geänderte Daten an das Netzwerk sendet und so die Latenz minimiert. Da dieses Applet für sehr wenig Arbeit verantwortlich ist (es betrifft nicht die Benutzeroberfläche, dieser Teil der Arbeit wird vom Browser erledigt), ist das Applet klein und wird sehr schnell geladen.
5. So führen Sie das Beispiel dieses Artikels aus
Um die Beispielanwendung in diesem Artikel zu testen, müssen auf Ihrem Computer ein Webserver und JDK 1.7 oder höher installiert sein.
Installationspunkte:
Entpacken Sie die komprimierte ZIP-Datei und installieren Sie sie im Standardstammverzeichnis des Webservers.
Für IIS-Server ist das Standardstammverzeichnis Inetputwwwroot
Für den in jsdk2.1 enthaltenen kostenlosen Server ist das Standardverzeichnis <Installationsverzeichnis>webpages
Nach dem Entpacken des Archivs werden alle Dateien im Verzeichnis <Webserver-Stammverzeichnis>/exp/ installiert.
Fügen Sie der Standardseite die folgenden Codezeilen hinzu. Jeder Server verfügt über eine eigene Standardseite von IIS. Spezifische Anweisungen finden Sie in der Dokumentation zum Webserver:
<ul><li> <a href="/exp/ImageMain.htm"> Java-basiertes dynamisches Werbebanner</a></li> </ul>
Schritte zum Ausführen der Anwendung:
Öffnen Sie ein DOS-Fenster, geben Sie <Default Web Directory>/exp ein und führen Sie „java ImageApplication“ aus. Das System zeigt „Server hat begonnen, Port 6011 abzuhören“ an. Stellen Sie sicher, dass die Umgebungsvariable „classpath“ auf das aktuelle Arbeitsverzeichnis verweist.
Starten Sie den Webserver.
Öffnen Sie einen Browser und geben Sie die folgende URL ein: http://localhost:8080 . Diese URL öffnet die Standardseite des Webservers, die über einen Link „Java-basiertes dynamisches Werbebanner“ verfügen sollte. Klicken Sie auf diesen Link, um die Beispielanwendung für diesen Artikel zu starten.
Öffnen Sie die Datei „/exp/images.txt“ mit Notepad, kopieren Sie eine Zeile Inhalt, fügen Sie sie ein und speichern Sie die Datei. Sie können sofort sehen, dass das System ein JavaScript-Fenster anzeigt, das Sie zu Inhaltsaktualisierungen auffordert. Schließen Sie das JavaScript-Fenster und die Seite zeigt neue Inhalte an.
Bitte laden Sie den vollständigen Code des Beispiels in diesem Artikel hier herunter: 411 KB/u/info_img/2009-06/20/pushweb.zip