Mareos de un geek

Mens Geek in Corpore Insano

Menú Cerrar

PFC: Aprendiendo AJAX

En mi PFC una de las tareas a desarrollar consiste en mostrar el estado de los dispositivos domóticos. Para ello, la web debe actualizarse constantemente. Se trata de saber si nos hemos dejado la luz encendida :P

Para ello voy a utilizar AJAX. Esta palabra esta en boca de todo el mundo, sobretodo si es alguien cercano al desarrollo y diseño de webs. Pero claro, falta saber si se refieren al AJAX correcto, porque como bien demuestra esta web japonesa, algunos lo confunde con el ajax pino.

AJAX es un conjunto de tecnologías que unidas permiten desarrollar webs con una interfaz visualmente muy avanzada y que permite una gran interactividad. A pesar de ello existen ciertos problemas o inconvenientes de usabilidad y accesibilidad, originados principalmente por la novedad y el ansia de usarlo para todo.

Además de las interfaces AJAX permite la comunicación asíncrona con el servidor. Es ese punto el que me interesa principalmente para desarrollar mi proyecto y poder preguntar si ha cambiado el estado de los dispositivos o no.

Para las llamadas asíncronas se utiliza el objeto XMLHttpRequest. Este objeto fue desarrollado por Microsoft (parece mentira, pero sí, a veces sacan cosas útiles) y por supuesto es con los navegadores de Microsoft (seáse con IE) con los que surgen ciertos problemas de compatibilidad. Es por eso que hay que tener mucho ojo al definir el objeto.

Afortunadamente en el libro que estoy leyendo sobre AJAX (de aquellos libros famosos que pedí por Amazon) está todo bien explicado y muestran una definición compatible con todos los navegadores web que soportan el XMLHttpRequest.

Y como muestra, un botón, la implementación de la base de las comunicaciones de AJAX:

var request = null;
function createRequest() {
try { request = new XMLHttpRequest(); }
catch (trymicrosoft) {
try { request = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (othermicrosoft) {
try { request = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (failed) { request = null; }
}
}
if (request == null) alert("Error creating request object!");
}

Con este fragmento de código se asigna a la variable request el objeto correspondiente, según el tipo de navegador que está utilizando el usuario. En el primer try se asigna el objeto XMLHttpRequest, usado por los navegadores Safari, Firefox, Mozilla, Opera.. en los otros dos casos se utilizan objetos ActiveX para las distintas versiones IE.

Utilizando esta implementación dispondremos de un objeto para comunicarnos asíncronamente con el servidor en la variable request. Al ser declarada fuera de la función es una variable global del código Javascript y puede ser usada en el resto de funciones que se implementen. Por supuesto, esta implementación permite variaciones y la variable puede ser creada también dentro de la función y devuelta mediante un return, así permitiría crear varios objetos con distintas llamadas a la función.
Una vez creado se usarán los distintos métodos disponibles (ver web de la wikipedia)