Muchas veces me he encontrado con la necesidad de actualizar, de alguna manera, solamente una porcion del contenido de una pagina html evitando la recarga completa de la misma. Esto es realmente util a la hora de desarrollar aplicaciones web que requieren recarga continua de datos desde el servidor, muy frecuente en sistemas de ecommerce.
Si necesitamos mostrar sobre una misma estructura html datos cambiantes, como por ejemplo el valor del total de una orden a medida que se agregan productos al shopping cart, siguiendo el metodo tradicional, llegaremos a la conclusion de que esto requiere un request al server, una respuesta de este y una actualizacion integra del documento que estamos visualizando.
Sin embargo, suena interesante el hecho de que en lugar de actualizar todo el documento, solo se recargaran los datos estrictamentes necesarios, conservando asi, a traves de la actualizacion de datos, los elementos estaticos a nuestro proposito, tal como imágenes, estructura html, scripts embebidos, etcétera.
De esta manera estariamos agilizando de forma significante el tiempo de carga, mostrando, con menor demora, los datos que realmente interesan.
Existe una tecnica llamada Remote Scripting mediante la cual se puede lograr un intercambio de datos entre la aplicación cliente corriendo en el browser y la aplicación server sin necesidad de hacer una recarga integra de la pagina para obtener los resultados de importancia.
En la figura se muestra un ejemplo de como se produce la activacion de la solicitud y respuesta de datos dinamicos usando remote scripting: primero un evento DHTML es accionado por medio de un disparador sobre algun objeto en la interface cliente, ej. accion producida por el evento "onClick". La accion asociada al evento envia una solicitud HTTP hacia una aplicacion server side, la cual sera capaz de realizar calculos o consultas a un motor de bases de datos. La aplicacion server obtiene los resultados necesarios y envia una respuesta HTTP al cliente, pero ¡Directamente al objeto de datos que necesitamos actualizar!, este puede ser un campo texto, una imagen, etc.
Una de las maneras mas faciles de llevar a cabo este proceso, es utilizando un IFRAME oculto en la interface cliente, el cual trabajara junto a un script en el server que se ocupara de los calculos y extraccion de informacion de la base de datos.
A continuacion se muestra un ejemplo simple de Remote Scripting con IFRAME. Este sencillo ejemplo podria modificarse para que los datos devueltos por el server sean obtenidos de una base de datos por ejemplo. Aqui se utiliza PHP, pero el lenguaje server podria haber sido cualquier otro, tal como ASP o JSP.
El ejemplo esta compuesto de dos archivos: cliente.html y server.php.
Necesitamos lo siguiente: Al hacer click sobre el boton activador se debe redireccionar al IFRAME oculto hacia server.php, el cual se encargara de devolver datos procesados por el server hacia el campo "contenedorDato" en el cliente.
Nuestra pagina cliente.html es bastante simple. Contiene 1 IFRAME oculto, 1 boton activador y 1 campo SPAN.
Podria estar formada de la siguiente manera:
<!-- Codigo del IFRAME oculto --> <iframe id="iframeOculto" name="iframeOculto" style="width:0px; height:0px; border: 0px"></iframe> <!-- Boton que redirecciona el IFRAME hacia server.php --> <input type="button" value="Cargar datos" onClick="document.frames['iframeOculto'].location='server.php'"> <!-- Campo para guardar el resultado con su label --> Dato recibido: <span id="contenedorDato"></span>
Lo primero que vemos en el codigo es la declaracion del IFRAME con nombre "iframeOculto", luego el boton activador con el evento "onClick" asociado. Este se dispara redireccionado al IFRAME hacia server.php.
<!-- Script que asigna el resultado al campo correspondiente en el cliente -->
<script type="text/javascript">
window.parent.getElementById('contenedorDato').innerText='<?php
echo "Estos son los datos enviados desde el server"; ?>';
</script>
Al ejecutarse "server.php", este enviara un string hacia el campo "contenedorDato" del cliente.
Un uso real de remote scripting podria ser por ejemplo una aplicacion para venta de articulos de computacion que genere un presupuesto en tiempo real segun las partes de la computadora que el cliente vaya seleccionando. Los precios podrian obtenerse de una base de datos y deberan ser enviados hacia el cliente. Tambien se podria tener en el cliente una logica JavaScript para calculo del total sumando los precios obtenidos desde el server via remote scripting. Las posibilidades son amplias, pudiendose utilizar este metodo en cualquier tipo de aplicacion web donde se requiera una rapida carga de datos desde el servidor en forma totalmente transparente al usuario.