AJAX

AJAX

El término AJAX es un acrónimo de Asynchronous Java Script + XML, que se puede traducir como “Java Script asíncrono + XML”.

AJAX se define de la siguiente forma:

“Ajax no es una tecnología en sí mismo. En realidad, se trata de la unión de varias tecnologías que se desarrollan de forma autónoma y que se unen de formas nuevas y sorprendentes.”[1]

Las tecnologías que forman AJAX son:

▪ XHTML y CSS, para crear una presentación basada en estándares.

▪ DOM, para la interacción y manipulación dinámica de la presentación.

▪ XML, XSLT y JSON, para el intercambio y la manipulación de información.

▪ XML Http Request, para el intercambio asíncrono de información.

▪ Java Script, para unir todas las demás tecnologías.

AJAX permite mejorar completamente la interacción del usuario con la aplicación, evitando las recargas constantes de la página, ya que el intercambio de información con el servidor se produce en un segundo plano.

Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas mediante la creación de un elemento intermedio entre el usuario y el servidor.

La nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el usuario nunca se encuentra con una ventana del navegador vacía esperando la respuesta del servidor.

Una de las aplicaciones AJAX más sencillas es la adaptación del clásico “Hola Mundo”. En este caso, una aplicación Java Script descarga (y muestra) el contenido de un archivo del servidor sin necesidad de recargar la página.

La aplicación AJAX se compone de 4 grandes bloques: instanciar el objeto XML Http Request, preparar la función de respuesta, realizar la petición al servidor y ejecutar la función de respuesta.

Todas las aplicaciones realizadas con técnicas de AJAX deben instanciar en primer lugar

el objeto XMLHttpRequest, que es el objeto clave que permite realizar comunicaciones con el servidor en segundo plano.

La implementación del objeto XMLHttpRequest depende de cada navegador, por lo que es necesario emplear una discriminación sencilla en función del navegador

Una de las operaciones más habituales en las aplicaciones AJAX es la de obtener el contenido de un archivo o recurso del servidor. Así, se va a construir un objeto que permita realizar la carga de datos del servidor simplemente indicando el recurso solicitado y la función encargada de procesar la respuesta:

var cargador = new net.CargadorContenidos(“pagina.html”, procesaRespuesta);

Para ello, se debe encapsular toda la lógica común de AJAX en un objeto que sea fácilmente reutilizable. Aplicando los conceptos de objetos de JavaScript, funciones constructoras y el uso de prototype, es posible realizar de forma sencilla el objeto cargador de

contenidos.

Uno de los problemas más habituales de algunas aplicaciones web tiene relación con las listas desplegables encadenadas.

En este tipo de aplicaciones, al seleccionar un elemento de la primera lista, se cargan en la segunda lista unos valores que dependen del valor seleccionado en la primera lista.

El mayor inconveniente de este tipo de soluciones se produce cuando existen un gran número de opciones posibles, como por ejemplo la lista de productos de una tienda en la primera lista desplegable y todos los diferentes modelos de productos y sus precios en la

otra lista.

Si se opta por almacenar todos los posibles valores en arrays de JavaScript en la propia página, los tiempos de carga se pueden disparar o hacerlo completamente inviable.

Por otra parte, se puede optar por recargar completamente la página cada vez que se selecciona un valor diferente en la primera lista. Sin embargo, recargar la página entera cada vez que se selecciona un valor, aumenta la carga en el servidor y el tiempo de espera del usuario.

Una posible solución intermedia pasa por implementar un par de listas desplegables que se actualicen mediante AJAX. Al seleccionar un valor de la primera lista, se realiza una consulta al servidor, que devuelve los valores que se deben mostrar en la otra lista desplegable.

El objeto XMLHttpRequest posee muchas otras propiedades y métodos diferentes a las manejadas por la primera aplicación AJAX mostrada. A continuación se incluye la lista completa de todas las propiedades y métodos del objeto y todos los valores numéricos de sus propiedades.

Las propiedades definidas para el objeto XMLHttpRequest son:

Propiedad Descripción

Onreadys tatechange

Se trata del responsable de manejar los eventos que se producen. Se

invoca cada vez que se produce un cambio en el estado de la petición

HTTP. Normalmente es una referencia a una función Java Script

Ready State Valor numérico (entero) que almacena el estado de la petición

response Text El contenido de la respuesta del servidor en forma de cadena de texto

response XML El contenido de la respuesta del servidor en formato XML. El objeto devuelto se puede procesar como un objeto DOM

status El código de estado HTTP devuelto por el servidor (200 para una respuesta correcta, 404 para “No encontrado”, 500 para un error de servidor, etc.)

status Text El código de estado HTTP devuelto por el servidor en forma de cadena de texto: “OK”, “Not Found”, “Internal Server Error”, etc.

Los métodos disponibles para el objeto XMLHttpRequest son los siguientes:

Método Descripción

abort() Detiene la petición actual

get All Response Headers() Devuelve un array asociativo con todas las cabeceras de la respuesta del servidor

get Response Header(”cabecera”) Devuelve una cadena de texto con el con tenido de la cabecera solicitada

open(”metodo”, “url”) Establece los parámetros de la petición que se realiza al servidor. Los parámetros necesarios son el método HTTP empleado y la URL destino (puede indicarse de forma absoluta o relativa)

send (contenido) Realiza la petición HTTP al servidor

set Request Header (”cabecera”, “valor”) Permite establecer cabeceras personalizadas en la petición HTTP. Se debe invocar el método open() antes que set Request Header()

El método open() requiere 2 parámetros (método HTTP y URL) y acepta de forma opcional otros 3 parámetros.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: