Cómo aplicar la tecnología AJAX para lograr los siguientes efectos
Este artículo presenta un método que se puede utilizar para crear aplicaciones web más dinámicas y responsivas: Ajax. La clave de este enfoque es una combinación de JavaScript del lado del navegador, DHTML y comunicación asincrónica con el servidor. Este artículo también demuestra cómo habilitar fácilmente este enfoque mediante la creación de una aplicación utilizando un marco Ajax (es decir, DWR) para comunicarse con los servicios backend directamente desde el navegador. Si se usa correctamente, esta poderosa característica hará que las aplicaciones sean más naturales y receptivas, mejorando así la experiencia de navegación del usuario.
El código de muestra utilizado en esta aplicación está empaquetado como un archivo WAR separado y está disponible para descargar.
Introducción
El término Ajax se utiliza para describir un conjunto de tecnologías que permiten a los navegadores proporcionar a los usuarios una experiencia de navegación más natural. Antes del uso de Ajax, los sitios web obligaban a los usuarios a adoptar un modo de envío/espera/volver a mostrar, y las operaciones del usuario siempre estaban sincronizadas con el "tiempo de reflexión" del servidor. Ajax proporciona la capacidad de comunicarse de forma asíncrona con el servidor, liberando a los usuarios del ciclo de solicitud/respuesta. El uso de Ajax, JavaScript y DHTML puede actualizar la interfaz de usuario inmediatamente cuando el usuario hace clic en un botón y enviar solicitudes asincrónicas al servidor para realizar actualizaciones o consultar la base de datos. Una vez que regresa la solicitud, se pueden usar JavaScript y CSS para actualizar la interfaz de usuario en consecuencia en lugar de actualizar toda la página. Lo mejor de todo es que el usuario ni siquiera sabe que el navegador se está comunicando con el servidor: el sitio web parece responder instantáneamente.
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 estos motivos ya no son válidos:
BackPack Pack
Google Suggest
Google Maps
PalmSphere
Todos estos sitios web nos muestran que las aplicaciones web no tienen que depender completamente de la capacidad de recargar páginas desde el servidor para entregarlas a los usuarios. Todo parece suceder en un instante. En pocas palabras, el punto de referencia es 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 en realidad fue acuñado por Jesse James Garrett, quien dijo que era "abreviatura de XML de JavaScript asincrónico".
Cómo funciona Ajax
En el corazón de Ajax se encuentra el objeto JavaScript XmlHttpRequest, que apareció por primera vez en Internet Explorer 5 como una tecnología que admite 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 puede hacer con Ajax:
Actualizar dinámicamente el número total de artículos en su 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 el refresco de 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, la 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
Hace unos días, 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 votación 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 toda la página 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.
responseText
El formato de cadena de los datos devueltos por el proceso del servidor
responseXML
El 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
Acompañado de información de cadena de estado para el código
Ahora, la función ProcessVoteResponse() comienza 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 lograr 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 usaremos 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 su lugar, 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á Spring Framework para unir todo, permitiendo a los usuarios ver fácilmente cómo se puede usar 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 buscar .teasolving.service;
interfaz pública AjaxSampleSvc {
Artículo castVote(int ranking
}
Este ejemplo se ha simplificado hasta el punto de que es casi imposible votar sobre un solo artículo. El servicio es administrado por Spring, utiliza un bean llamado ajaxSampleSvc y depende de ArticleDao para sus necesidades de persistencia.
Para exponer el servicio como un objeto JavaScript, necesita configurar DWR y agregar el archivo dwr.xml al directorio WEB-INF:
lt;?xml version= "1.0 " codificación="UTF-8"? gt;
lt;!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 0.4/ES"
".teasolving.model.Article"/gt;
lt; excluir método="toString"/gt
lt; /gt ;
lt;/allowgt;
lt;/dwrgt;
El archivo dwr.xml le dice a DWR qué servicios pueden exponerse directamente al código JavaScript. . Tenga en cuenta que Spring Bean ajaxSampleSvc se ha solicitado como público. DWR buscará automáticamente el SpringApplicationContext establecido por la aplicación; para ello, Spring ApplicationContext debe inicializarse utilizando el filtro de servlet estándar ContextLoaderListener.
DWR está configurado como un servlet, así que agregue su definición a web.xml:
lt;?xml version="1.0" encoding="UTF-8"?gt;
lt;!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD
Aplicación web 2.3/ES" "/dtd/web-app_2_3.dtd" gt;
lt; web-appgt;
lt; nombre de visualización
>lt; display-namegt; ejemplo de Ajaxlt; p>
lt;listener-classgt;
org.springframework.web.context.ContextLoaderListener
lt;/ clase-escuchagt;
lt; /listenergt;
lt;servletgt;
lt;servlet-namegt;ajax_samplelt;/servlet-namegt; >
lt;servlet-classgt;com.teasolving .web.AjaxSampleServletlt /servlet-classgt;
lt; carga en inicio; 1lt;
lt; /servletgt;
lt;servletgt;
lt.servlet-namegt;dwr-invokerlt;/servlet-namegt; display-namegt;DWR Servletlt;/display-namegt;
lt;descriptiongt;Direct Web Remoter Servletlt;/descriptiongt
lt;servlet-classgt;uk.ltd.getahead. dwr.servlet-namegt;dwr-invokerlt;/servlet-namegt;
lt; -mappinggt;
lt; / web-appgt;
Después de completar las operaciones anteriores, puede cargar http://localhost:7001/ajax-demo/dwr para ver qué servicios están disponibles. Los resultados son los siguientes:
Figura 3. Servicios disponibles
Haga clic en el enlace ajaxSampleSvc para ver una implementación de muestra de cómo utilizar el servicio directamente en una página HTML.
Los dos archivos JavaScript incluidos hacen la mayor parte del trabajo:
lt; script type='text/javascript'
src='/ajax-demo/dwr/interface/ajaxSampleSvc .js 'gt;lt; /scriptgt;
lt;script type='text/javascript'
src='/ajax-demo/dwr/engine.js'gt; /scriptgt;
ajaxSampleSvc.js se genera dinámicamente:
función ajaxSampleSvc() { }
ajaxSampleSvc.castVote = function(callback, p0)
{
DWREngine._execute( devolución de llamada, '/ajax-demo/dwr',
'ajaxSampleSvc', 'castVote',
<); p> p>}
Ahora puede refactorizar el archivo raw-ajax.html reemplazando todo el código XmlHttpRequest con el objeto JavaScript ajaxSampleSvc. Los resultados de los cambios se pueden ver en el archivo dwr-ajax.html; aquí están las nuevas funciones de JavaScript:
function castVote(rank) {
ajaxSampleSvc.castVote(processResponse, ranking) ;
}
function processResponse(data) {
var voteText = "¡Gracias por votar!"
"Ranking actual :" datos .voteAverage
"De 5"
"Número de votos:"
datos.numberOfVotes "";
502 502'votos').innerHTML = voteText;
}
Muy simple. ¿No es así? El objeto de campo de artículo devuelto por el objeto ajaxSampleSvc se serializa en un objeto JavaScript, lo que permite llamar a métodos como numberOfVotes() y voteAverage() dentro de él. Estos datos se utilizarán en el código HTML que se genera dinámicamente y se inserta en el elemento DIV "votos".
Próximos pasos
En artículos posteriores, continuaré analizando Ajax desde los siguientes aspectos:
Mejores prácticas de Ajax
Como muchos tecnologías, Ajax es un arma de doble filo. Para algunos casos de uso, la aplicación realmente no necesita usar Ajax, y usar Ajax puede perjudicar la usabilidad. Introduciré algunos patrones que no se deben usar, resaltaré algunos de los efectos negativos de Ajax y mostraré algunos mecanismos que pueden ayudar a mitigar estos efectos negativos. Por ejemplo, ¿Ajax es una solución adecuada para el navegador de películas de Netflix? ¿O cómo le indica al usuario que algo anda mal y que hacer clic en el botón nuevamente no ayudará?
Administrar el estado en todas las solicitudes
Cuando se utiliza Ajax, el DOM del documento inicial sufrirá algunos cambios y una gran cantidad de información del estado de la página se almacenará en las variables del cliente.
Cuando el usuario sigue un enlace a otra página de la aplicación, el estado se pierde. Por convención, cuando los usuarios hacen clic en el botón "Atrás", verán la página inicial del caché. ¡Esto puede resultar muy confuso para los usuarios!
Consejos de depuración
Cuando utilices JavaScript para realizar más trabajo en el lado del cliente, si algo sale mal, necesitarás utilizar algunas herramientas de depuración para ayudar a identificar el problema.
Conclusión
Este artículo presentó el método Ajax y mostró cómo usarlo para crear aplicaciones web dinámicas y responsivas. Al utilizar el marco DWR, puede integrar fácilmente Ajax en su sitio web sin tener que preocuparse por todo el trabajo de plomería que debe realizar.
Un agradecimiento especial a Joe Walker y su equipo en Getahead IT Consulting por desarrollar una herramienta tan increíble como DWR. ¡Gracias por compartir esta herramienta con **** de todo el mundo!
Descargar
El código fuente de la aplicación que se muestra en este artículo está disponible para descargar: ajax-demo.war (1,52 MB).
Referencias
http://www.getahead.ltd.uk/dwr--Getahead IT Consulting.
"Ajax: un nuevo enfoque para las aplicaciones web", por Jesse James Garrett (Adaptive Path, febrero de 2005).
"HTML y XML dinámicos: Objeto XMLHttpRequest" (Conexión de desarrollador de Apple).
Texto original de
Introducción a Ajax
Subtitúlame, jajaja~