1. ¿Qué es el contenido dinámico?
Los sitios web más populares ganan dinero con la publicidad en línea. El espacio publicitario en las páginas web es limitado Para que la inversión publicitaria valga la pena, los anunciantes no sólo deben incluir una gran cantidad de información en un espacio publicitario pequeño, sino también asegurarse de que el anuncio pueda atraer la atención de los usuarios. En la mayoría de los sitios web actuales, los anuncios publicitarios colocados en las páginas web generalmente los genera el servidor mientras se construye la página. No podemos insertar dinámicamente nuevos anuncios en las páginas que se han enviado. Si desea mostrar anuncios nuevos, la única forma es actualizar la página. Podemos actualizar la página mediante programación, por ejemplo:
use la función setTimeOut del objeto de la ventana del navegador para actualizar la página regularmente. Sin embargo, al actualizar los anuncios de esta manera, los usuarios sentirán claramente el proceso de actualización de la página al mismo tiempo; también es difícil determinar una frecuencia de actualización adecuada;
Establezca el tiempo de vencimiento de la página en unos pocos segundos para que el navegador vuelva a descargar la página cada vez que el foco de entrada vaya a la página (es decir, el navegador esté activado).
Algunos sitios web importantes, como yahoo.com y msn.com, ya han adoptado estas tecnologías. Ambos métodos tienen sus propias ventajas y desventajas. Cuando usamos solo Java, podemos implementar completamente el sistema de actualización de anuncios publicitarios mediante programación de red y algunos trabajos de programación de interfaz, pero los problemas de tiempo de descarga prolongado y demoras de actualización deben resolverse.
2. Utilice Java para implementar el envío de contenido.
Combinando la comunicación entre tramas de JavaScript con un subprograma de Java que gestiona la comunicación de red, podemos resolver este problema utilizando la tecnología push. En dicho sistema, la tarea del subprograma de Java es conectarse al servidor y escuchar las actualizaciones de contenido. Una vez que se recibe el nuevo contenido, el Applet construye el código HTML que muestra el nuevo contenido, llama a una función de JavaScript y pasa el HTML que contiene el nuevo contenido a la función de JavaScript. La función JavaScript utiliza tecnología DHTML y DOM para reemplazar el contenido de una etiqueta <div> en la página con el nuevo contenido pasado en el parámetro. Debido a restricciones de seguridad del navegador, el puerto Socket abierto por el Applet solo se puede conectar al servidor que descargó el Applet.
El servidor web solo escucha solicitudes de conexión en el puerto 80. Por lo tanto, además del servidor web, también necesitamos un servicio de aplicación de red que acepte la solicitud de conexión Socket del Applet. Este servicio de aplicación de red consulta periódicamente la base de datos y publica (envía) los datos modificados a todos los subprogramas conectados. Gracias al uso de marcos ocultos y las capacidades de comunicación entre marcos de JavaScript, podemos ocultar la mayor parte de la lógica de JavaScript al usuario.
La tarea más difícil en todo este proceso es la comunicación entre el subprograma de Java y el código JavaScript. Netscape proporciona una clase llamada netscape.javascript.JSObject. Para utilizar este objeto, agregue una etiqueta Applet que contenga el atributo especial "MAYSCRIPT":
<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>
Los métodos de JSObject permiten que los applets interactúen con el objeto del documento e invoquen comandos de JavaScript. Por ejemplo, al colocar el siguiente código en Applet, podemos acceder al objeto de ventana:
import netscape.javascript.*; public class MyApplet extends java.applet.Applet{ private JSObject mainwin; public void init(){ mainwin = JSObject.getWindow; ( this); } }
Después de obtener la referencia de JSObject, podemos acceder al objeto de la ventana del documento y llamar a la función JavaScript a través del método eval() de JSObject.
3. Actualice la página usando DHTML
Al escribir contenido nuevo desde el subprograma en el documento, para no afectar el contenido existente, podemos usar la etiqueta HTML <div></div>. Esta etiqueta es diferente en IE y Netscape.
Para IE y Netscape 6, esta etiqueta HTML es:
// Todo el contenido a actualizar debe identificarse con id <div id="iexplorer" width=700px ></div>
Para las versiones de Netscape 4.x, esta etiqueta HTML es:
<DATA><layer id="netscapev" </layer></DATA>
Aunque podemos actualizar directamente el contenido HTML desde el Applet haciendo referencia al ID apropiado, para mayor claridad. En aras de la simplicidad, pondremos la lógica del programa de actualización del código HTML en una función de JavaScript. El siguiente código JavaScript guarda el tipo de navegador en la variable ie:
applnname=navigator.appName; if(applnname=="Microsoft Internet Explorer") { ie=true } else { ie=false }
El subprograma construye HTML a partir del nuevo
;código de datos, guárdelo en el contenido de la variable JavaScript y luego llame al método asignarData(). Los datos de contenido pueden ser cualquier cosa, desde HTML simple hasta XML y datos binarios.
// Llama al método apropiado function asignarData() { if(ie) {explore();} else {navig() } } según el tipo de navegador.
Si el navegador es IE o Netscape 6, el Applet llama al método explore():
//el contenido es una variable javascript que describe los nuevos datos que //se deben mostrar en formato HTML function explore() { iexplorer.innerHTML=content ; }
si el navegador es Netscape 4.0 o superior y el Applet llama al método navig():
function navig() { document.netscapev.document.write(“<DATA>“ + content + “</DATA>“); document.netscapev.document.close(); }
4. Proceso de comunicación
En el lado del servidor, una instancia de la clase ImageAppliation.java responde a las solicitudes de conexión de Socket y crea un nuevo hilo para cada nueva solicitud de conexión. Para simplificar el código, cada hilo solo verifica si el archivo de datos ha cambiado. Si el archivo de datos ha cambiado, el hilo lee el contenido del archivo y envía los nuevos datos al Applet conectado (la aplicación de muestra envía el archivo completo al Applet).
En el lado del cliente, un marco oculto contiene el Applet ImageApplet.java, por lo que la etiqueta del Applet no se puede ver utilizando la función de visualización del código fuente HTML del navegador. Applet implementa la función de conectarse al servidor (el servidor de origen para descargar el Applet) e implementa un protocolo de comunicación simple. Después de establecer una conexión con el servidor, el Applet recibe los datos del servidor, construye el código HTML y llama a la función JavaScript para pasar los datos al documento:
public void upDateHTML(String str){ //datos es el nombre de el formulario, //quote es una variable de JavaScript //str es el código HTML recién construido mainwin.eval("document.data.quote.value="" + str + """); ()"); return; }
netscape.javascript.JSObject completa la comunicación desde Applet a JavaScript. Diferentes versiones de navegadores cliente requieren diferentes versiones. Puede descargar el archivo de clase comprimido java40.jar proporcionado para Netscape. IE ya viene con la clase JSObject, pero es un poco difícil de encontrar. Puede buscar en el directorio $windows$JavaPackages para encontrar el archivo ZIP que contiene la clase JSObject.
El servidor serializa la instancia de la clase ImageArrayElement.java en una cadena mediante el método toString() y la envía al subprograma. El servidor construye cada objeto a partir del archivo de datos, llama al método toString(), concatena las cadenas que representan todos los objetos y finalmente envía la cadena resultante. En el otro extremo, el Applet recibe, analiza esta cadena y reconstruye cada objeto ImageArrayElement. La razón por la que los datos se envían aquí en forma de una cadena larga es porque este método solo requiere un proceso de procesamiento muy simple, lo que permite a los usuarios conocer inmediatamente los cambios de datos a una velocidad cercana al tiempo real; sin embargo, también podemos usar otro; método método, que envía el objeto como un vector.
En una aplicación en vivo, generalmente debe hacer que la inserción de nuevos datos en la página actual sea transparente. Pero en la aplicación de muestra, para que el proceso de ejecución del programa sea más intuitivo, avisará al usuario cuando llegue contenido nuevo.
La principal ventaja de la tecnología push es que el servidor de aplicaciones solo envía datos modificados a la red, minimizando así la latencia. Dado que este Applet es responsable de muy poco trabajo (no involucra la interfaz de usuario, esta parte del trabajo la realiza el navegador), el Applet es de tamaño pequeño y se carga muy rápidamente.
5. Cómo ejecutar el ejemplo de este artículo.
Para probar la aplicación de muestra de este artículo, debe tener un servidor web y JDK 1.7 o superior instalado en su máquina.
Puntos de instalación:
descomprima el archivo comprimido ZIP e instálelo en el directorio raíz predeterminado del servidor web.
Para servidores IIS, el directorio raíz predeterminado es Inetputwwwroot
Para el servidor gratuito incluido con jsdk2.1, el directorio predeterminado es <directorio de instalación>webpages
Después de descomprimir el archivo, todos los archivos se instalarán en el directorio <raíz del servidor web>/exp/.
Agregue las siguientes líneas de código a la página predeterminada. Cada servidor tiene su propia página predeterminada. La página predeterminada de IIS es "default.htm". Consulte la documentación del servidor web para obtener instrucciones específicas:
<ul><li> <a href="/exp/ImageMain.htm">. Banner publicitario dinámico basado en Java</a></li> </ul>
Pasos para ejecutar la aplicación:
Abra una ventana de DOS, ingrese <Directorio web predeterminado>/exp y ejecute "java ImageApplication". El sistema mostrará "El servidor comenzó a escuchar en el puerto 6011". Asegúrese de que la variable de entorno classpath apunte al directorio de trabajo actual.
Inicie el servidor web.
Abra un navegador e ingrese la siguiente URL: http://localhost:8080 . Esta URL abrirá la página predeterminada del servidor web, que debería tener un enlace "Banner publicitario dinámico basado en Java". Haga clic en este enlace para iniciar la aplicación de muestra de este artículo.
Abra el archivo "/exp/images.txt" con el Bloc de notas, copie y pegue una línea de contenido y guarde el archivo. Puede ver inmediatamente que el sistema muestra una ventana de JavaScript que solicita actualizaciones de contenido. Cierre la ventana de JavaScript y la página mostrará contenido nuevo.
Descargue el código completo del ejemplo de este artículo desde aquí, 411 KB/u/info_img/2009-06/20/pushweb.zip