AJAX un nuevo acercamiento a las aplicaciones Web (página 2)

Enviado por Lic. Yoandry Pacheco Aguila

Partes: 1, 2

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
- 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:

Un evento ocurre
Un objeto XMLHttpRequest es creado e
inicializado
Se realiza una invocación remota a
través del objeto XMLHttpRequest
La petición es procesada por el servidor el
cual devuelve un documento XML con el resultado.
El objeto XMLHttpRequest invoca la función callback()
y procesa el resultado.
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