Ayer, en una entrevista con un amigo, mencionó la idea central del Ajax. ¿Alguien sabe cómo expresarla? ¡Gracias!
Si bien la infraestructura necesaria para Ajax existe desde hace algún tiempo, el verdadero poder de las solicitudes asincrónicas recién se ha descubierto. Los desarrolladores y diseñadores finalmente pueden utilizar la pila estándar HTML/CSS/JavaScript para crear una usabilidad "similar a la de un escritorio".
En J2EE, los desarrolladores tienden a centrar mucha energía en el desarrollo de la capa de servicio y la capa de persistencia, mientras ignoran la usabilidad de la interfaz de usuario. En un ciclo típico de desarrollo J2EE, es común escuchar declaraciones como: "No tenemos tiempo para dedicarlo al desarrollo de la interfaz de usuario" o "No se puede implementar en HTML". Sin embargo, el siguiente sitio web demuestra que estas razones ya no se sostienen:
BackPack
Google Suggest
Google Maps
PalmSphere
Lo que todos estos sitios nos dicen es que las aplicaciones web no tienen que depender completamente de recargar páginas desde el servidor para presentar cambios al usuario. Todo parece suceder en un instante. En pocas palabras, establecimos un punto de referencia más alto en lo que respecta a la capacidad de respuesta de la interfaz de usuario.
Definición de Ajax
Jesse James Garrett de Adaptive Path define Ajax de esta manera:
Ajax no es una tecnología. Ajax incluye:
Renderizado basado en estándares XHTML y CSS;
Visualización e interacción dinámicas usando el Modelo de Objetos de Documento;
Comunicación asincrónica con el servidor usando XMLHttpRequest;
Enlaza todo usando JavaScript.
Eso es genial, pero ¿por qué ponerle el nombre de Ajax? El término Ajax fue acuñado en realidad por Jesse James Garrett, quien dijo que era "abreviatura de JavaScript asincrónico + XML".
Cómo funciona Ajax
El núcleo de Ajax es el objeto JavaScript XmlHttpRequest, que apareció por primera vez en Internet Explorer 5 como una tecnología para admitir solicitudes asincrónicas. En resumen, XmlHttpRequest le permite utilizar JavaScript para realizar solicitudes al servidor y manejar la respuesta sin bloquear al usuario.
La realización de actualizaciones de pantalla en el lado del cliente proporciona a los usuarios una gran flexibilidad a la hora de crear sitios web. Esto es lo que es posible con Ajax:
Actualizar dinámicamente el número total de artículos en un carrito de compras sin que el usuario haga clic en actualizar y espere a que el servidor reenvíe la página completa.
Mejora el rendimiento del sitio web reduciendo la cantidad de datos descargados del servidor. Por ejemplo, en la página del carrito de compras de Amazon, cuando se actualiza la cantidad de artículos en el carrito, se recarga toda la página, lo que requiere la descarga de 32 KB de datos. Si usa Ajax para calcular el nuevo total, el servidor simplemente devolverá el nuevo total, por lo que el ancho de banda requerido es solo el uno por ciento del original.
Elimina la actualización de la página cada vez que el usuario ingresa.
Por ejemplo, en Ajax, si el usuario hace clic en Siguiente en una lista paginada, los datos del servidor solo actualizan la lista, no toda la página.
Edite los datos de la tabla directamente en lugar de requerir que el usuario navegue a una nueva página para editar los datos. Con Ajax, una tabla estática se actualiza a una tabla con contenido editable cuando el usuario hace clic en Editar. Después de que el usuario haga clic en Listo, se puede realizar una solicitud Ajax para actualizar el servidor y actualizar la tabla con datos estáticos de solo lectura.
¡Todo es posible! Con suerte, esto te inspirará a comenzar a desarrollar tu propio sitio web basado en Ajax. Sin embargo, antes de comenzar, echemos un vistazo a un sitio web existente que sigue el patrón tradicional de enviar/esperar/volver a mostrar, y también analizaremos cómo Ajax puede mejorar la experiencia del usuario.
¿Para qué escenarios de aplicación se puede utilizar Ajax? --Un ejemplo: página de MSN Money
Un día, mientras navegaba por la página de MSN Money, un artículo sobre inversiones inmobiliarias despertó mi curiosidad. Decidí utilizar la función "calificar este artículo" del sitio para animar a otros usuarios a tomarse un momento para leer este artículo. Después de hacer clic en el botón de votar y esperar un momento, toda la página se actualizó con una bonita pantalla de agradecimiento donde había estado la pregunta de votación.
Ajax, por otro lado, proporciona una interfaz de usuario más receptiva y elimina el parpadeo cuando la página se actualiza, lo que hace que la experiencia del usuario sea más placentera. Actualmente, es necesario transferir una gran cantidad de datos, ya que es necesario reenviar la página completa para poder actualizarla por completo. Con Ajax, en lugar de enviar 26.813 bytes de información para actualizar toda la página, el servidor sólo necesita devolver 500 bytes de información que incluye un mensaje de agradecimiento. Incluso con Internet de alta velocidad, la diferencia entre enviar 26K y 1/2K es enorme. También es importante actualizar sólo la pequeña parte relevante para la votación, en lugar de actualizar toda la pantalla.
Implementemos nuestro propio sistema de votación básico usando Ajax.
Ajax original: uso directo de XmlHttpRequest
Como se mencionó anteriormente, el núcleo de Ajax es el objeto JavaScript XmlHttpRequest. El siguiente artículo de muestra, "Evaluación de sistemas", lo familiarizará con los principios básicos de Ajax: /ajax-demo/raw-ajax.html. Nota: Si ha instalado ajax-demo en su servidor WebLogic local. war, puedes navegar a /internet/webcontent/xmlplete)
responseText
El formato de cadena de los datos devueltos por el proceso del servidor
responseXML
Objeto de datos de documento compatible con DOM devuelto por el proceso del servidor
estado
Código numérico devuelto por el servidor, como 404 (No encontrado) o 200 (Listo)
statusText
Información de cadena que acompaña al código de estado
Ahora la función ProcessVoteResponse() está empezando a mostrar su importancia. Primero verifica el estado general de XmlHttpRequest para asegurarse de que esté completo (readyStatus == 4) y luego pregunta el estado de la solicitud según la configuración del servidor. Si todo está bien (estado == 200), sobrescribirá el contenido del nodo "notas" del DOM utilizando la propiedad InnerHTML.
Ahora que ha visto de primera mano cómo funciona el objeto XmlHttpRequest, abstraigamos los detalles utilizando un marco diseñado para simplificar la comunicación asincrónica entre aplicaciones JavaScript y Java.
Ajax: El enfoque DWR
Siguiendo el mismo proceso que el sistema de evaluación de artículos, utilizaremos el marco Direct Web Remoting (DWR) para implementar la misma funcionalidad.
Asumimos que los artículos y los resultados de las encuestas se almacenan en una base de datos y se extraen utilizando alguna técnica de mapeo de objetos/relacional.
Para mantener la implementación lo más simple posible, no utilizaremos una base de datos para almacenamiento persistente. Además, para que la aplicación sea lo más versátil posible, no utilizaremos frameworks web. En cambio, la aplicación comenzará con un archivo HTML estático, que el servidor puede considerar como renderizado dinámicamente. Además de estas simplificaciones, la aplicación utilizará el marco Spring para unir todo, lo que facilitará ver cómo se usa DWR en una aplicación "real".
Ahora deberías descargar y familiarizarte con la aplicación de muestra. La aplicación está comprimida en un archivo WAR estándar, por lo que puedes colocarla en cualquier contenedor web sin ninguna configuración. Una vez completada la implementación, puede navegar por http://localhost:7001/ajax_demo/dwr-ajax.html para ejecutar el programa.
Puedes ver el código fuente HTML para ver cómo funciona. Lo más impresionante es lo simple que es el código: toda la interacción con el servidor está oculta detrás del objeto JavaScript ajaxSampleSvc. Lo que es aún más sorprendente es que el servicio ajaxSampleSvc no está escrito a mano, sino que se genera de forma completamente automática. Veamos cómo se logra esto.
Presentación de DWR
Como lo demuestra la sección "Original Ajax", crear solicitudes asincrónicas directamente usando XmlHttpRequest es engorroso. El código JavaScript no solo es detallado, sino que también hay que considerar el trabajo requerido en el lado del servidor para enrutar la solicitud Ajax al servicio apropiado y encapsular los resultados en el navegador.
DWR está diseñado para manejar toda la información necesaria para instalar una página web en un servicio back-end. Es un marco Java que se puede conectar fácilmente a aplicaciones web, lo que permite que el código JavaScript llame a servicios en el servidor.
La verdadera genialidad de DWR es que una vez que un usuario configura un servicio para exponerlo a los clientes, utiliza la reflexión para generar objetos JavaScript para que las páginas web puedan utilizar estos objetos para acceder al servicio. Luego, la página web simplemente inserta el objeto JavaScript generado como si consumiera el servicio directamente; DWR manejará sin problemas todos los detalles esenciales sobre Ajax y solicitará la localización.