jdavidrl
Moderador
Localización:
Registrado: 05/06/2008
Advertencias: 0
|
AJAX un nuevo acercamiento a las aplicaciones Web
1. Resumen
2. Introducción
3. Historia de AJAX
4. Navegadores que permiten AJAX
5. Navegadores que no permiten AJAX
6. AJAX un nuevo acercamiento a las aplicaciones Web
7. Características AJAX
8. AJAX contra aplicaciones Web tradicionales
9. ¿Por qué AJAX es diferente?
10. El motor AJAX
11. Mirando adelante
12. Seguridad en AJAX
13. Nuestra primera aplicación AJAX
14. Referencias
Resumen
AJAX parece ser la palabra de moda en el “mundo” de desarrollo de aplicaciones Web. Pero debe quedar claro que en realidad AJAX no es una tecnología; AJAX es una técnica, es la unión de varias tecnologías, tales como: DOM, XML, XSLT, CSS, XMLHttpRequest, JavaScript entre otras, para lograr cosas realmente impresionantes, como GoogleMaps, Gmail el Outlook Web Access entre otras aplicaciones Web.
Introducción
Los diseñadores de sitios Web no pueden evitar sentirse envidiosos de nuestros colegas que crean software de escritorio. Las aplicaciones de escritorio tienen una riqueza y respuesta que parecía fuera del alcance en Internet. De ahí que uno de los objetivos de introducir AJAX en nuestras aplicaciones Web, es simular o acercarnos a las aplicaciones de escritorio.
Historia de AJAX
A pesar de que el término "AJAX" fuese creado en 2005, la historia de las tecnologías que permiten AJAX se remonta a una década antes con la iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin embargo, las técnicas para la carga asíncrona de contenidos en una página existente desde la introducción del elemento iframe en Internet Explorer 3 en 1996 y el tipo de elemento layer en Netscape 4 en 1997, abandonado durante las primeras etapas de desarrollo de Mozilla. Ambos tipos de elemento tenían el atributo src que podía tomar cualquier dirección URL externa, y cargando una página que contenga javascript que manipule la página paterna, pudiendo lograrse efectos parecidos al AJAX.
El Microsoft's Remote Scripting (o MSRS, introducido en 1998) resultó un sustituto más elegante para estas técnicas, con envío de datos a través de un applet Java el cual se puede comunicar con el cliente usando JavaScript. Esta técnica funcionó en ambos navegadores, Internet Explorer versión 4 y Netscape Navigator versión 4. Microsoft la utilizó en el Outlook Web Access provisto con la versión 2000 de Microsoft Exchange Server.
La comunidad de desarrolladores Web, primero colaborando por medio del grupo de noticias microsoft.public.scripting.remote y después usando blogs, desarrollaron una gama de técnicas de scripting remoto para conseguir los mismos resultados en diferentes navegadores. Los primeros ejemplos incluyen la librería JSRS en el año 2000, la introducción a la técnica imagen/cookie en el mismo año y la técnica JavaScript bajo demanda (JavaScript on Demand) en 2002. En ese año, se realizó una modificación por parte de la comunidad de usuarios al Microsoft's Remote Scripting para reemplazar el applet Java por XMLHttpRequest.
Frameworks de Scripting Remoto como el ARSCIF aparecieron en 2003 poco antes de que Microsoft introdujera Callbacks en ASP.NET.
Desde que XMLHttpRequest está implementado en la mayoría de los navegadores, raramente se usan técnicas alternativas. Sin embargo, todavía se utilizan donde se requiere una mayor compatibilidad, una reducida implementación, o acceso cruzado entre sitios web. Una alternativa, el Terminal SVG (basado en SVG), emplea una conexión persistente para el intercambio continuo entre el navegador y el servidor.
Navegadores que permiten AJAX
Debe tenerse en cuenta que ésta es una lista general, y el soporte de las aplicaciones AJAX dependerá de las características que el navegador permita.
• Navegadores basados en Gecko como Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon y Netscape versión 7.1 y superiores
• Microsoft Internet Explorer para Windows versión 5.0 y superiores, y los navegadores basados en él
• Navegadores con el API KHTML versión 3.2 y superiores implementado, incluyendo Konqueror versión 3.2 y superiores, Apple Safari versión 1.2 y superiores, y el Web Browser for S60 de Nokia tercera generación y posteriores
• Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser versión 8.0 y superiores
Navegadores que no permiten AJAX
• Opera 7 y anteriores
• Microsoft Internet Explorer para Windows versión 4.0 y anteriores
• Microsoft Internet Explorer para Macintosh, todas las versiones
• Dillo
• Navegadores basados en texto como Lynx y Links
• Navegadores para incapacitados visuales (braille)
AJAX un nuevo acercamiento a las aplicaciones Web.
¿Qué es AJAX?
AJAX es el acrónimo ingles para Asynchronous JavaScript and XML (JavaScript y XML asíncrono). Es una técnica de desarrollo web que genera aplicaciones web interactivas combinando:
• Document Object Model (DOM) para visualizar dinámicamente e interactuar con la información presentada.
• XML, XSLT para intercambiar y manipular datos.
• CSS para definir el aspecto (look and feel) del documento.
• JSON y JSON-RPC pueden ser alternativas a XML/XSLT
• XMLHttpRequest para recuperar datos de forma asincrónica.
• Javascript como nexo de unión de todas estas tecnologías.
AJAX es un patrón de diseño que propone un nuevo modelo de interacción Web combinando las tecnologías anteriores.
¿Por qué AJAX?
Las aplicaciones web proliferan debido a su simplicidad, pero ofrecen una menor interactividad y usabilidad en comparación con las aplicaciones de escritorio, debido a que la interacción del usuario con una aplicación web se interrumpe cada vez que se necesita algo del servidor.
Varias tecnologías han sido diseñadas para resolver este problema, Java Applets, FLASH, AJAX es una nueva solución que no requiere plugins o capacidades específicas de ciertos navegadores.
DHTML y AJAX, ¿lo mismo?
DHTML (Dynamic HTML) técnica de desarrollo de webs interactivas combinando HTML, client-side scripting con JavaScript y el lenguaje de definición de estilos CSS. Realmente AJAX es un refinamiento de DHTML y al igual que en AJAX el principal problema de DHTML es el diferente soporte de estas tecnologías en los navegadores y los diferentes tamaños o resoluciones de pantalla de usuarios.
Como el DHTML o LAMP, AJAX no constituye una tecnología en sí, por eso carece de un entorno de desarrollo propio, pero es un término que engloba a un grupo de éstas que trabajan conjuntamente.
El hecho de que el intercambio de datos se realice de forma asíncrona sirve para hacer que las aplicaciones Web funcionen de una manera casi transparente al usuario en términos de comunicación con el servidor.
El resultado es una interfase con mayor respuesta, dado que la cantidad de datos intercambiados entre el navegador web y el servidor web es reducida enormemente. También se ahorra mucho tiempo de procesamiento en el servidor web, ya que una parte importante de dicho procesamiento se realiza en el lado del cliente.
Características AJAX
• Las aplicaciones son más interactivas, responden a las interacciones del usuario más rápidamente, al estilo aplicaciones de escritorio.
• Estas aplicaciones tienen un aspecto (look and feel) muy similar a las aplicaciones de escritorio tradicionales sin depender de plugins o características específicas de los navegadores.
• Se reduce el tamaño de la información intercambiada
o Muchas micro-peticiones, pero el flujo de datos global es inferior
• Se libera de procesamiento a la parte servidora (se realiza en la parte cliente)
• AJAX actualiza porciones de la página en vez de la página completa.
AJAX contra aplicaciones Web tradicionales
En las aplicaciones Web tradicionales los usuarios interactúan mediante formularios, que al enviarse, realizan una petición al servidor Web. El servidor se comporta según lo enviado en el formulario y contesta enviando una nueva página Web. Se desperdicia mucho ancho de banda, ya que gran parte del HTML enviado en la segunda página Web, ya estaba presente en la primera. Además, de esta manera no es posible crear aplicaciones con un grado de interacción similar al de las aplicaciones habituales.
Además en este tipo de aplicaciones Web tradicionales mientras el servidor esta haciendo lo suyo, ¿qué esta haciendo el usuario? Exacto, esperando. Y, en cada paso de la tarea, el usuario espera por más. Obviamente, si estuviéramos diseñando la Web desde cero para aplicaciones, no querríamos hacer esperar a los usuarios. Una vez que la interfaz esta cargada, ¿por qué la interacción del usuario debería detenerse cada vez que la aplicación necesita algo del servidor? De hecho, ¿por qué debería el usuario ver la aplicación yendo al servidor?
En aplicaciones AJAX se envían peticiones vía http(s) mediante eventos, scripts o rutinas al servidor Web, para obtener únicamente la información necesaria, empleando SOAP o algún otro lenguaje para servicios Web basado en XML, y usando JavaScript en el cliente para procesar la respuesta del servidor Web. Esto redunda en una mayor interacción gracias a la reducción de información intercambiada entre servidor y cliente, y a que parte del proceso de la información se hace en el propio cliente, liberando al servidor de ese trabajo. Además esta petición se realiza como proceso de fondo (background), por lo que el usuario no tiene que esperar que el proceso concluya en su totalidad para continuar interactuando con la aplicación. La contrapartida es que la descarga inicial de la página es más lenta al tenerse que bajar todo el código JavaScript.
En los siguientes gráficos podemos ver la diferencia entre utilizar un modelo clásico de aplicación Web y utilizar el modelo de aplicación Web que propone AJAX:
En el modelo clásico, cada vez que queremos cargar una nueva página Web con nuevos datos, hemos de enviar una petición al servidor Web, y éste nos devuelve la página entera, que incluye tanto los datos a mostrar como la presentación de la misma.
Sin embargo utilizando el modelo AJAX, cuando queremos cargar datos nuevos lo que hacemos en enviar una petición HTTP al servidor Web que nos devuelve únicamente los datos a mostrar (en formato XML), no la presentación de la página. Con este sistema lo que conseguimos es reducir el volumen de tráfico entre cliente y servidor, y también conseguimos que no se tengan que cargar páginas HTML enteras cada vez que queremos representar nuevos datos.
¿Por qué AJAX es diferente?
Una aplicación AJAX elimina esas paradas en la ejecución introduciendo un intermediario (el motor AJAX) entre el usuario y el servidor. Parecería que añadir una capa a la aplicación le conferiría una peor respuesta, pero en realidad ocurre lo contrario.
En lugar de cargar una página Web, al iniciar la sesión, lo que hace el navegador es cargar el motor AJAX (escrito en JavaScript y normalmente escondido en un marco oculto).
El motor AJAX
El motor AJAX (AJAX engine) colocado entre el usuario y el servidor web evita el ciclo start-stop-start-stop característico de las aplicaciones web tradicionales y no es mas que un fichero JavaScript que acompaña al HTML. El cual es cargado al inicio de la sesión y tiene una doble responsabilidad, primero generar la interfaz visualizada por el usuario y segundo comunicarse con el servidor en representación del usuario, lo cual ocurre de manera asíncrona evitando que el usuario vea una página blanca o el reloj de arena (de espera) cada vez que realice una acción.
Toda acción del usuario que normalmente generaría una petición HTTP, adquiere la forma de una llamada JavaScript al motor AJAX. Cualquier acción del usuario que no requiera un viaje al servidor (tales como validación de datos, edición de datos en memoria e incluso la propia navegación) es procesada por él mismo. Si el motor necesita algún tipo de proceso en el servidor para generar la respuesta (enviar datos para procesamiento, carga de código de interfaz adicional o petición de datos nuevos) realiza las peticiones de manera asíncrona, normalmente usando el objeto XMLHttpRequest, sin detener la interacción del usuario con la aplicación.
Mirando adelante
Los mayores desafíos al crear aplicaciones AJAX no son técnicas. Las tecnologías centrales son maduras, estables y bien conocidas. En cambio, los desafíos son para los diseñadores de estas aplicaciones: olvidar lo que creemos saber sobre las limitaciones de la Web, y comenzar a imaginar un rango más amplio y rico de posibilidades.
Seguridad en AJAX
Por motivos de seguridad las invocaciones a recursos vía HTTP solamente pueden efectuarse a páginas alojadas en el mismo dominio que el de la página que contenía el script. Si queremos que la información de nuestras peticiones no sea visible deberemos utilizar un canal HTTPS.
Nuestra primera aplicación AJAX
Vamos a considerar una aplicación web con un formulario que requiere validación en el servidor sin necesidad de refrescar la página completamente. Es decir, realizar un HTTP POST de la página implícitamente.
Los flujos de control serían:
1. Un evento ocurre
2. Un objeto XMLHttpRequest es creado e inicializado
3. Se realiza una invocación remota a través del objeto XMLHttpRequest
4. La petición es procesada por el servidor el cual devuelve un documento XML con el resultado.
5. El objeto XMLHttpRequest invoca la función callback() y procesa el resultado.
6. El árbol DOM de la página web es actualizado.
Un evento ocurre
Como resultados de eventos generados por la interacción del usuario funciones JavaScript son invocadas.
Ejemplo: <input type=”text” id="userID“ onkeyup="validate();">
Creando el objeto XMLHTTPREQUEST
Hacer dos funciones genéricas es la mejor idea para este modelo. Y usando try y catch podemos hacer una función cross-browser:
function simple_ajax(){
var xmlhttp=false;
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function LoadContent(callback, url, method, query_string){
ajax=simple_ajax();
if (method == 'GET') {
ajax.open(method, url +"?" + query_string, false);
} else {
ajax.open(method, url, false);
}
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
if (req.status == 200) {
callback (ajax.responseText, ajax.responseXML);
}
}
}
if (method == 'GET') {
ajax.send(null)
} else {
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
ajax.send(query_string);
}
}
Listo con estas dos funciones lograremos hacer casi cualquier aplicación web usando AJAX. Volviendo a nuestro ejemplo, el campo userID (input tipo texto), hace referencia a la rutina validate(), pues definamos esta función:
function validate (){
obj_userID = document.getElementById(“userID”);
qs = “userID=” obj_userID.value;
LoadContent(mostarMsg, “validar.php”, “POST”, qs);
}
function mostarMsg (pText, pXml){
var userMessageElement = document.getElementById("userIdMessage");
userMessageElement.innerHTML = pText;
}
Esta última función supone la existencia de un elemento (div, p, td, etc) con id=userIdMessage.
Por último debemos crear el archivo validar.php en el cual se coge el parámetro userID que está contenido en la variable global $_POST[“userID”] (esto es porque el método que se utilizó para enviar los datos fue el POST), y se procesa la información, es decir se verifica si el valor es valido o no, esto puede ser verificar si el valor userID es un id valido almacenado en una base de datos, y según sea el caso emitir una respuesta, que puede ser imprimir el mensaje “valido” o “invalido”.
Referencias
• XMLHttpRequest – http://developer.apple.com/internet/webcontent/xmlhttpreq.html
• Asynchronous JavaScript Technology and XML (AJAX) With Java 2 Platform, Enterprise Edition http://java.sun.com/developer/technicalArticles/J2EE/AJAX
• AJAX gives software a fresh look – http://news.com.com/AJAX+gives+software+a+fresh+look/2100-1007_3-5886709.html?tag=st.prev
• HTML DOM – http://www.w3schools.com/htmldom
• Javascript – http://en.wikipedia.org/wiki/Javascript
• Core JavaScript Reference – http://research.nihonsoft.org/javascript/CoreReferenceJS15/index.html
• AJAX for Java developers: Build dynamic Java applications – http://www-128.ibm.com/developerworks/library/j-AJAX1/?ca=dgr-lnxw01AJAX
• JavaScript XSLT – http://www.soi.city.ac.uk/~sa386/epterm2/sqlxml/week9/The%20XSLT-JavaScript%20Interface%20In%20Gecko.htm
• Web 2.0 http://www.web2con.com
Datos del autor:
Lic. Yoandry Pacheco Aguila
|
__________________
|
|