Ajax (Asynchronous JavaScript and XML) es una tecnología que surge para crear aplicaciones web que mejoren la usabilidad y la experiencia del usuario.
Es simplemente un paso más en la evolución constante de la web, después de que llegaran tecnologías como HTML, CGI, lenguajes de script en servidor, JavaScript en cliente, hojas de estilo CSS, etc.
Ajax proporciona una nueva forma de representar las paginas en cliente de forma que:
- A partir de la interacción con el usuario y mediante JavaScript, cuando se requiera mas información del servidor, se efectuaran pequeñas peticiones HTTP, síncronas o asíncronas.
- El servidor responde con los datos requeridos en forma de documento XML y, usando JavaScript otra vez, se le representa al usuario en la forma correspondiente.
De esta manera, AJAX permite presentar nuevos contenidos interactuando con el servidor, sin que sea necesario recargar la pagina completa, sino solo la información adicional.
Este método reemplaza a la antigua técnica que consistía en usar IFRAMES invisibles para conseguir efectos similares.
Hay que tener en cuenta que, no solo los navegadores antiguos, sino también los más actuales que tengan JavaScript o ActiveX desactivados, no podrán hacer uso de la tecnología AJAX. Entonces, puede que haya que implementar también una interfaz de usuario sencilla para estos casos.
Algunas webs de ejemplo que usan AJAX son Flickr, GMail, Google Maps, etc.
XMLHttpRequest
La aplicación web, en cliente con JavaScript, utiliza el objeto XMLHttpRequest para la comunicación con el servidor. Este componente está presente en la mayoría de los navegadores modernos, ya sea de forma nativa o como componente ActiveX. La forma de crearlo, por tanto, dependerá del navegador.
Con este código, puede crearse un objeto XMLHttpRequest con independencia del navegador.
El uso de este objeto también puede ser diferente en cada navegador, pero tienen ciertas características comunes.
A continuación pueden verse algunos ejemplos de peticiones síncronas y asíncronas.
DOM y XML
DOM (JavaScript Document Object Model) es una API orientada a objetos para acceder o alterar, desde JavaScript, un documento HTML o XML, incluso el que se está representando en pantalla al usuario.
Existen varias recomendaciones del W3C, aunque basta que el navegador soporte la de nivel 1 para que puedan utilizarse la mayoría de los métodos necesarios.
Este nivel define el documento como un árbol de elementos que tienen diferentes atributos y valores.
Estos son los métodos principales, que se asume que son comunes a todos los navegadores modernos.
A continuación se muestra un ejemplo de JavaScript para alterar la estructura de árbol, donde se puede cambiar también el documento que se presenta al usuario.
Estilos CSS y DHTML
DHTML (HTML Dinámico) es un conjunto de técnicas para, entre otras cosas, modificar los estilos asociados a los diferentes elementos HTML usando JavaScript.
Sin embargo, también existen ciertas diferencias entre las opciones soportadas por los distintos navegadores.
Se puede cambiar la clase de un determinado elemento, o directamente su estilo.
Librerías JavaScript
Algunas librerías existentes para facilitar el trabajo de programar AJAX:
Librería de bajo nivel, que resuelve muchos de los problemas de compatibilidad entre navegadores y que da soporte a otras librerías de efectos.
Librería especializada en separar la presentación de la estructura. El código JavaScript se separa del propio HTML, de una forma fácil de entender, de forma similar a como se hace con las hojas de estilo CSS.
Esta basada en Prototype. Es una librería de efectos visuales muy potente, que da soporte a efectos como drag and drop, etc.
Servidor
Una forma de dar servicio a las peticiones AJAX es mediante servlets Java, que devuelvan el resultado XML correspondiente, con garantía de ser valido y estar bien formado.
Una opción más conveniente es usar JSP, que será más fácil de desarrollar y mantener, ya que no se mezcla el XML a devolver con la propia programación, sobre todo si se utilizan librerías de etiquetas. Sin embargo, el programa no garantiza que el resultado XML sea valido y este bien formado.
Otra posibilidad es utilizar servlets Java y XSLT. Los servlets tomaran ficheros XML en bruto, que después transforman mediante hojas XSL. Si para dar este servicio no se requiere información adicional a estos ficheros, bastara con un único servlet. El resultado será valido y estará bien formado. Es un método muy flexible y no se requiere parar el servicio para modificar estos ficheros XML y XSL. Pero el desarrollo exigirá mayores conocimientos y la aplicación será sensiblemente más lenta.
Una opción mas es con servlets y DOM, de forma que con esta API se interpreten y se generen los documentos XML. Con esto es más probable que el resultado este bien formado. Además, para el desarrollador puede ser conveniente manejar la misma API en cliente y en servidor, aunque la programación será más tediosa.
Marcos de trabajo en servidor
Para facilitar el desarrollo en servidor pueden utilizarse los siguientes marcos de trabajo:
Los documentos creados se descomponen en zonas, que pasan a tratarse independientemente: formularios que se envían, paneles que se actualizan, etc.
Librería de etiquetas JSP que permite crear componentes AJAX en cliente sin requerir conocimientos avanzados de JavaScript.
Crea el efecto de que el código que se ejecuta en servidor sea como si se estuviera ejecutando en cliente.
Librería que proporciona un API que permite abstraerse del conocimiento de JavaScript e incluso de HTML, para concentrarse en el diseño de la interfaz (la pagina web).
Ejemplos de uso
Estos son algunos casos típicos en los que puede utilizarse AJAX:
- Validación en servidor de los campos de un formulario.
- Autocompletar los campos de un formulario a partir de los campos ya cumplimentados y de la información en el servidor.
- Recarga parcial de la página en función de las acciones del usuario.
- Ejecutar ciertas acciones en el servidor, en función del comportamiento del usuario: mediante drag and drop, etc.
