Ajax

Primeros pasos en AJAX

www.jpdiaz.com

Primeros pasos en AJAX

Ing. Juan Pablo Díaz Ezcurdia info@jpdiaz.com Diciembre de 2009

Página 1 de 20

Primeros pasos en AJAX

www.jpdiaz.com

Contenido
I .- Que es AJAX II.- El objeto XMLHttpRequest III.- Creación del objeto XMLHttpRequest IV.- Realizar una petición con AJAX V.- Recibir la petición AJAX VI.- La respuesta AJAX VII.-Tratamiento de la respuesta AJAX VIII.- Mostrar los datos al usuario IX.- Implementaciones de AJAX X.- Prototype - Funciones Ajax

Página 2 de 20

Primeros pasos en AJAX

www.jpdiaz.com

I.- Que es AJAX
Según wikipedia AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo web para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes queconoceremos en este manual. Es una manera de crear una aplicación que responde a las acciones del usuario sin refrescar la página contra el servidor.

Tecnologías
Para conseguir este efecto, se utilizan la mayoría de las tecnologías disponibles para páginas web, HTML, CSS, XML, JavaScript y algún lenguaje de servidor cómo puede ser PHP o ASP, veamos qué función tiene cada lenguaje en la aplicación:JavaScript - Para manejar el objeto XMLHttpRequest y DOM tratar para los datos recibidos. HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la información recibida por el servidor CSS - Define el aspecto de cada elemento y dato de la aplicación XML - Es el formato de los datos transmitidos del servidor al cliente (navegador) y que posteriormente serán mostrados.Lenguaje de servidor - Genera la información útil en XML y la envía al navegador.

Funcionamiento
El usuario accede a la aplicación que es enviada por el servidor en formato HTML, JavaScript y CSS. Luego el código JavaScript de la aplicación pide al servidor los datos que quiere mostrar y este, ejecuta un código de lado de servidor que envía al navegador los datos en formato XML.

Página 3 de 20Primeros pasos en AJAX

www.jpdiaz.com

Cada vez que el usuario realiza una acción que significa mostrar unos datos, la capa javascript, repite la acción anterior de manera invisible al usuario y muestra los datos deseados.

Problemas
El principal problema de la gran mayoría de aplicaciones AJAX (lo digo por experiencia como usuario de mozilla) es la baja compatibilidad entre navegadores,puesto que la capa JavaScript, es de una gran complejidad y a menudo por falta de experiencia en el lenguaje, o por falta de tiempo, se opta por programar solo para Internet Explorer. En futuras entregas, veremos cómo programar una aplicación AJAX compatible para todos los navegadores incluidos navegadores sin javascript.

Ejemplos
Un excelente ejemplo de aplicación AJAX, bastante compatibleentre navegadores es Google Maps, en ella podrás ver cómo cambiamos la posición del mapa sin recargar la página.

Página 4 de 20

Primeros pasos en AJAX

www.jpdiaz.com

II.- El objeto XMLHttpRequest
Un objeto XMLHttpRequest es una instancia de una API que nos permite la transferencia de datos en formato XML desde los script del navegador (JavaScript, JScrip, VBScript...) a los delservidor (PHP, Perl, ASP, Java...) e inversamente.

Compatibilidad con navegadores
El primero en implementar esta API fue Microsoft con un objeto ActiveX para su navegador Internet Explorer 5, posteriormente empezó a incorporarse de forma nativa en todos los navegadores empezando por Firefox seguido de Apple, Konqueror, Opera Software, iCab y Microsoft Internet Explorer 7.

Métodos y atributosAtributos: • onreadystatechange • readyState • responseText • responseXML • status • statusText Metodos: • abort • getAllResponseHeaders • getResponseHeader • open • send • setRequestHeader

Página 5 de 20

Primeros pasos en AJAX

www.jpdiaz.com

III.- Creación del objeto XMLHttpRequest
El secreto de AJAX es la comunicación sin refresco entre el cliente y el servidor, esto es posible...