1. Qu'est-ce que le contenu dynamique ?
Les sites Web les plus populaires gagnent de l’argent grâce à la publicité en ligne. L'espace publicitaire sur les pages Web est limité. Pour rentabiliser l'investissement publicitaire, les annonceurs doivent non seulement regrouper une grande quantité d'informations dans un petit espace publicitaire, mais également veiller à ce que la publicité puisse attirer l'attention des utilisateurs. Sur la plupart des sites Web actuels, les bannières publicitaires placées sur les pages Web sont généralement générées par le serveur lors de la construction de la page. Nous ne pouvons pas insérer dynamiquement de nouvelles publicités dans les pages envoyées. Si vous souhaitez afficher de nouvelles annonces, le seul moyen est d'actualiser la page. Nous pouvons actualiser la page par programme, par exemple :
utilisez la fonction setTimeOut de l'objet fenêtre du navigateur pour actualiser la page régulièrement. Cependant, lors de l'actualisation des annonces de cette manière, les utilisateurs ressentiront clairement le processus d'actualisation de la page en même temps ; il est également difficile de déterminer une fréquence d'actualisation appropriée ;
Réglez le délai d'expiration de la page sur quelques secondes afin que le navigateur télécharge à nouveau la page chaque fois que le focus d'entrée passe sur la page (c'est-à-dire que le navigateur est activé).
Certains grands sites Web, tels que Yahoo.com et Msn.com, ont déjà adopté ces technologies. Les deux méthodes ont leurs propres avantages et inconvénients. En utilisant uniquement Java, nous pouvons implémenter complètement le système d'actualisation des bannières publicitaires via la programmation réseau et certains travaux de programmation d'interface, mais les problèmes de temps de téléchargement long et de délai d'actualisation doivent être résolus.
2. Utilisez Java pour implémenter le push de contenu
En combinant la communication interframe JavaScript avec une applet Java qui gère la communication réseau, nous pouvons résoudre ce problème en utilisant la technologie push. Dans un tel système, la tâche de l'applet Java est de se connecter au serveur et d'écouter les mises à jour du contenu. Une fois le nouveau contenu reçu, l'applet construit le code HTML qui affiche le nouveau contenu, appelle une fonction JavaScript et transmet le HTML contenant le nouveau contenu à la fonction JavaScript. La fonction JavaScript utilise les technologies DHTML et DOM pour remplacer le contenu d'une balise <div> dans la page par le nouveau contenu passé en paramètre. En raison des restrictions de sécurité du navigateur, le port Socket ouvert par l'applet ne peut être connecté qu'au serveur qui a téléchargé l'applet.
Le serveur Web écoute uniquement les demandes de connexion sur le port 80. Par conséquent, en plus du serveur Web, nous avons également besoin d'un service d'application réseau qui accepte la demande de connexion Socket de l'applet. Ce service d'application réseau interroge périodiquement la base de données et publie (pousse) les données modifiées vers toutes les applets connectées. Grâce à l'utilisation de frames cachées et aux capacités de communication inter-frame de JavaScript, nous sommes en mesure de cacher la plupart de la logique JavaScript à l'utilisateur.
La tâche la plus difficile de tout ce processus est la communication entre l'applet Java et le code JavaScript. Netscape fournit une classe appelée netscape.javascript.JSObject. Pour utiliser cet objet, ajoutez une balise Applet qui contient l'attribut spécial "MAYSCRIPT" :
<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>
Les méthodes de JSObject permettent aux applets d'interagir avec l'objet document et d'invoquer des commandes JavaScript. Par exemple, en mettant le code suivant dans Applet, nous pouvons accéder à l'objet window :
import netscape.javascript.*; public class MyApplet extends java.applet.Applet{ private JSObject mainwin(){ mainwin = JSObject.getWindow; ( this); } }
Après avoir obtenu la référence JSObject, nous pouvons accéder à l'objet fenêtre du document et appeler la fonction JavaScript via la méthode eval() de JSObject.
3. Mettez à jour la page en utilisant DHTML
Lors de l'écriture d'un nouveau contenu de l'applet dans le document, afin de ne pas affecter le contenu existant, nous pouvons utiliser la balise HTML <div></div>. Cette balise est différente dans IE et Netscape.
Pour IE et Netscape 6, cette balise HTML est :
// Tout le contenu à mettre à jour doit être identifié par id <div id="iexplorer" width=700px ></div>
Pour les versions Netscape 4.x, cette balise HTML est :
<DATA><layer id="netscapev" ></layer></DATA>
Bien que nous puissions mettre à jour directement le contenu HTML depuis l'applet en faisant référence à l'ID approprié, pour plus de clarté Par souci de simplicité, nous mettrons la logique du programme de mise à jour du code HTML dans une fonction JavaScript. Le code JavaScript suivant enregistre le type de navigateur dans la variable ie :
applnname=navigator.appName;
if(applnname=="Microsoft Internet Explorer") { ie=true; else { ie=false;
code de données, enregistrez-le dans le contenu de la variable JavaScript, puis appelez la méthode assignData(). Les données de contenu peuvent aller du simple HTML au XML en passant par les données binaires.
// Appelez la méthode appropriée function assignData() { if(ie) {explore();} else {navig( } } selon le type de navigateur
Si le navigateur est IE ou Netscape 6, l'applet appelle la méthode explore() :
//content est une variable javascript qui décrit les nouvelles données qui doivent être //affichées au format HTML function explore() { iexplorer.innerHTML=content ; }
si le navigateur est Netscape 4.0 ou supérieur et que l'applet appelle la méthode navig() :
function navig() { document.netscapev.document.write(“<DATA>“ + content + “</DATA>“); document.netscapev.document.close(); }
4. Processus de communication
Côté serveur, une instance de la classe ImageAppliation.java répond aux demandes de connexion Socket et crée un nouveau thread pour chaque nouvelle demande de connexion. Pour simplifier le code, chaque thread vérifie uniquement si le fichier de données a changé. Si le fichier de données a changé, le thread lit le contenu du fichier et envoie les nouvelles données à l'applet connectée (l'exemple d'application envoie l'intégralité du fichier à l'applet).
Côté client, un cadre masqué contient l'Applet ImageApplet.java, de sorte que la balise Applet ne peut pas être vue à l'aide de la fonction d'affichage du code source HTML du navigateur. Applet implémente la fonction de connexion au serveur (le serveur source de téléchargement de l'Applet) et implémente un protocole de communication simple. Après avoir établi une connexion avec le serveur, l'applet reçoit les données du serveur, construit le code HTML et appelle la fonction JavaScript pour transmettre les données dans le document :
public void upDateHTML(String str){ //data est le nom de le formulaire, //quote est une variable JavaScript //str est le code HTML nouvellement construit mainwin.eval("document.data.quote.value="" + str + """); ()"); return; }
netscape.javascript.JSObject termine la communication de l'applet vers JavaScript. Différentes versions des navigateurs clients nécessitent différentes versions. Vous pouvez télécharger le fichier de classe compressé java40.jar fourni pour Netscape. IE est déjà livré avec la classe JSObject, mais c'est un peu difficile à trouver. Vous pouvez rechercher dans le répertoire $windows$JavaPackages le fichier ZIP contenant la classe JSObject.
Le serveur sérialise l'instance de la classe ImageArrayElement.java en une chaîne via la méthode toString() et l'envoie à l'applet. Le serveur construit chaque objet à partir du fichier de données, appelle la méthode toString(), concatène les chaînes représentant tous les objets et envoie enfin la chaîne résultante. À l'autre extrémité, l'applet reçoit et analyse cette chaîne et reconstruit chaque objet ImageArrayElement. La raison pour laquelle les données sont envoyées ici sous la forme d'une longue chaîne est que cette méthode ne nécessite qu'un processus de traitement très simple, permettant aux utilisateurs de connaître immédiatement les modifications des données à une vitesse proche du temps réel. Cependant, nous pouvons également en utiliser une autre ; méthode méthode, qui envoie l'objet sous forme de vecteur.
Dans une application en direct, vous devez généralement rendre transparente l'insertion de nouvelles données dans la page actuelle. Mais dans l'exemple d'application, afin de rendre le processus d'exécution du programme plus intuitif, l'utilisateur sera averti lorsqu'un nouveau contenu arrive.
Le principal avantage de la technologie push est que le serveur d’applications envoie uniquement les données modifiées au réseau, minimisant ainsi la latence. Comme cette Applet ne demande que très peu de travail (elle n'implique pas l'interface utilisateur, cette partie du travail est prise en charge par le navigateur), l'Applet est de petite taille et se charge très rapidement.
5. Comment exécuter l'exemple de cet article
Pour tester l'exemple d'application présenté dans cet article, vous devez disposer d'un serveur Web et du JDK 1.7 ou supérieur installé sur votre ordinateur.
Points d'installation :
décompressez le fichier compressé ZIP et installez-le dans le répertoire racine par défaut du serveur Web.
Pour les serveurs IIS, le répertoire racine par défaut est Inetputwwwroot
Pour le serveur gratuit inclus avec jsdk2.1, le répertoire par défaut est <répertoire d'installation>webpages
Après avoir décompressé l'archive, tous les fichiers seront installés dans le répertoire <racine du serveur Web>/exp/.
Ajoutez les lignes de code suivantes à la page par défaut. Chaque serveur possède sa propre page par défaut. La page par défaut d'IIS est "default.htm". Veuillez vous référer à la documentation du serveur Web pour des instructions spécifiques :
<ul><li> <a href="/exp/ImageMain.htm"> Bannière publicitaire dynamique basée sur Java</a></li> </ul>
Étapes pour exécuter l'application :
Ouvrez une fenêtre DOS, entrez <Default Web Directory>/exp et exécutez "java ImageApplication". Le système affichera « Le serveur a commencé à écouter sur le port 6011 ». Assurez-vous que la variable d'environnement classpath pointe vers le répertoire de travail actuel.
Démarrez le serveur Web.
Ouvrez un navigateur et saisissez l'URL suivante : http://localhost:8080 . Cette URL ouvrira la page par défaut du serveur Web, qui devrait contenir un lien « Bannière publicitaire dynamique basée sur Java ». Cliquez sur ce lien pour lancer l'exemple d'application pour cet article.
Ouvrez le fichier "/exp/images.txt" avec le Bloc-notes, copiez et collez une ligne de contenu et enregistrez le fichier. Vous pouvez immédiatement voir le système afficher une fenêtre JavaScript invitant aux mises à jour du contenu. Fermez la fenêtre JavaScript et la page affichera un nouveau contenu.
Veuillez télécharger le code complet de l'exemple dans cet article à partir d'ici, 411 KB/u/info_img/2009-06/20/pushweb.zip