Leo en Blogold, que a su vez hace referencia a EsLoMas:
IBM, Google, Oracle, Mozilla, Yahoo, Zend, Red Hat, Openwave y Novell, entre otras, se han unido para desarrollar un framework open source que permita estandarizar el desarrollo de aplicaciones basadas en ajax.
Sinceramente, me parece un poco peligroso volcarse completamente sobre AJAX. No sé, no me acaba de convencer. Va muy rápido, pero en ocasiones, la usabilidad y la accesibilidad se ven afectadas, y creo que esto es un punto crucial. Lo digo bajo la experiencia de usar GMail con un maldito proxy en el trabajo. Mi mayor problema son las pantallas que no refrescan en algunas ocasiones, y el botón Atrás.
Por desgracia, la única forma de saber hasta qué punto AJAX puede ser bueno o malo es dejando que pase tiempo. Por eso creo que se están apresurando demasiado. Espero equivocarme.
servido por gigo
1 comentario
compártelo
favorito
Acabo de leer, vía Enrique Dans, un artículo que habla acerca de la tecnología AJAX y sus problemas de usabilidad, que también son comentados en el blog de Alex Bosworth (en inglés).
Mi experiencia con AJAX es muy corta, pero poco a poco experimento los problemas que se comentan, por ejemplo, en Gmail. Yo conozco la web, sé cómo funciona y aprendo rápido a manejar este tipo de aplicaciones. Una persona no experta, como mi hermana o mi padre, creo que pueden perderse en estas aplicaciones en algunas ocasiones.
Ya lo dije en su día, AJAX es impresionante, pero crea problemas de accesibilidad y usabilidad que si el autor no es consciente de ellos y los soluciona, puede despistar a más de un usuario.
servido por gigo
3 comentarios
compártelo
favorito
Como me está picando la curiosidad de entender esto de AJAX, he decidido echar un vistazo a algún tutorial básico sobre AJAX y entender cómo demonios se puede recorrer un documento XML con Javascript, teniendo en cuenta que implementar y enviar un parser de XML en Javascript al navegador es muy costoso.
El secreto, que yo no conocía, es que se ha implementado, en los navegadores más utlizados (Internet Explorer, Firefox, etc.), un objeto XMLHttpRequest que se encarga de todo esto. Es decir, que basta con crear una instancia de este objeto para poder realizar peticiones HTTP al servidor en XML y recibir sus respuestas de modo asíncrono o síncrono.
Aunque siempre he criticado a Microsoft por ser unos copiones y por crear productos cerrados para atar al cliente, esta vez debo darles la enhorabuena por ser los primeros en crear este objeto que va a dar lugar a una nueva era de aplicaciones web nunca vistas hasta ahora. De todas formas, todavía debo seguir criticándoles su manía de crear tecnologías exclusivas para su navegador Internet Explorer, ya que la forma de crear instancias de este objeto es exclusivo para sistemas Windows, y por tanto diferente de otros navegadores que tratan de ser multiplataforma.
Comencemos.
La forma de crear una instancia de este objeto en cualquier navegador es:
var req = new XMLHttpRequest();
y en Microsoft Internet Explorer depende de ActiveX:
var req = new ActiveXObject("Microsoft.XMLHTTP");
Métodos
Los métodos de un objeto XMLHttpRequest son los siguientes:
- abort(): Aborta la petición actual.
- getAllResponseHeaders(): Devuelve todas las cabeceras (etiquetas y valores) como un string.
- getResponseHeader("headerLabel"): Devuelve el valor de la cabecera etiquetada como headerLabel.
- open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]): Abre una conexión a una URL, con un método HTTP (get o post), y otros parámetros opcionales.
- send(content): Envía la petición. Suele ser un String o un objeto DOM
- setRequestHeader("label", "value"): Crea un par etiqueta/valor para ser enviado en la cabecera de la petición.
Los métodos más importantes son open y send.
El método open prepara la conexión con el servidor. Para ello se le pasa la URL - absoluta o relativa - y el método HTTP, get o post, según si se recibe o se envía datos.
Por defecto, la conexión es asíncrona, es decir, la petición se realiza al servidor y el usuario puede seguir interactuando con la página sin que se dé cuenta. Si se quiere una conexión síncrona, se debe utilizar el parámetro asyncFlag=false, lo que hará que el navegador quede parado hasta recibir la respuesta del servidor. Esto es peligroso porque puede dejar colgado al navegador si hay algún tipo de error, por lo que se aconseja siempre utilizar conexiones asíncronas.
Propiedades
Las propiedades del objeto XMLHttpRequest son las siguientes:
- onreadystatechange: Guarda el nombre de la función Javascript que manejará los cambios de estado en la petición.
- readyState: Entero que codifica el estado actual de la petición
- 0 = No Inicializado
- 1 = Cargando
- 2 = Cargado
- 3 = Interactuando
- 4 = Completado
- responseText: Versión en forma de String de los datos devueltos por el servidor.
- responseXML: Objeto DOM compatible de la respuesta del servidor.
- status: Código de estado devuelto por el servidor, como 404 para No encontrado o 200 para Ok.
- statusText: Mensaje que acompaña al código de estado.
De estas propiedades, las más importantes on onreadystatechange, readyState, y la respuesta responseText / responseXML.
La primera, onreadystatechange, sirve para asociar el método Javascript que hayamos escrito para gestionar los cambios de estado de la petición. Es decir, como es una comunicación asíncrona, se necesita tener un método implmentado por nosotros que gestione los diferentes eventos, como por ejemplo, la llegada de la respuesta. Esta es la propiedad que sirve para decirle a XMLHttpRequest el nombre de ese método.
La segunda, readyState, es un número que informa del estado de la petición. El estado más interesante es el número 4, que recoge el momento en el que llega la respuesta del servidor para poder procesarla.
La respuesta viene en dos versiones diferentes: Una en un texto normal, almacenada en la propiedad responseText; y otra en un objeto estándar DOM, almacenado en la propiedad responseXML. Lógicamente, el medio más poderoso de procesar las respuesta, es mediante el objeto DOM, ya que puede ser recorrido a través de los métodos estandarizados por la W3C DOM. Date cuenta que este DOM es un documento en XML, no en HTML.
Código general
Sabiendo todo esto, podemos crear una función genérica para realizar una petición:
var req;
function loadXMLDoc(url) {
req = false;
// parte para cualquier navegador
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// parte para Internet Explorer / ActiveX
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send("");
}
}
Y otra función para procesar las respuestas:
function processReqChange() {
if (req.readyState == 4) {
if (req.status == 200) {
// ...Aquí irían la lógica necesaria
} else {
alert("Error recibiendo datos XML:\n" +
req.statusText);
}
}
}
Seguridad
Por motivos de seguridad, no se puede acceder a los ficheros locales a través del protocolo file:// sin tener que lidiar con configuraciones. Debido a esto no se pueden hacer test de páginas locales directamente, y lo mejor es instalar un servidor HTTP como Apache y hacer conexiones http://localhost/.
También, el dominio de la dirección del servidor ha de ser el mismo que el de la página que contiene el script que realiza la petición.
Un ejemplo sencillo
Un ejemplo sencillo que he mirado para entender la idea básica de todo esto es el que proporciona Apple. Se trata de una página sencilla que utiliza los RSS de iTunes para cargar unas listas. Mira el código fuente, y verás que es fácil de entender.
Nada más. Espero que este artículo haya servido para que tanto tú como yo nos iniciemos en esto de AJAX.
Artículos (en inglés) que he leído para entender esto:
servido por gigo
7 comentarios
compártelo
favorito
Últimamente no paro de leer una y otra vez la palabra AJAX en todo revista, foro o lista de correo sobre tecnologías web. Más o menos tenía una idea aproximada de lo que era AJAX pero es hoy cuando me he decidido a tratar de entenderlo.
Leyendo el artículo AJAX un nuevo acercamiento a aplicaciones Web del blog Denken Über me he formado una idea de lo que es y he confirmado mis sospechas de qué aplicaciones había por ahi ya hechas con esta tecnología.
¿Qué es AJAX?
AJAX es un acrónimo inglés que significa Asynchronous JavaScript + XML, es decir, no es un producto en sí, sino una técnica que utiliza varias tecnologías, del mismo modo que LAMP es Linux+Apache+MySQL+PHP.
Las tecnologías que se usan son:
Las gran mayoría de aplicaciones web hechas hasta ahora se basan en un modelo de petición, espera, y respuesta. El usuario pincha un enlace, espera la respuesta con una página en blanco, y luego recibe la página de respuesta. Aunque la página de respuesta sea prácticamente igual a la anterior, se le envía la página completa, lo que alarga la espera.
AJAX resuelve gran parte de estos problemas. Aprovecha los tiempos muertos del usuario para cargar datos en un segundo plano y así reducir la espera. Además, permite que el servidor envíe únicamente los datos de la página que cambian mediante XML (SOAP por ejemplo). No está obligado a enviar toda la página como hasta ahora. Esto acelera la experiencia de usuario ya que tiene que esperar mucho menos.
Esto se logra cargando en el navegador del usuario un motor AJAX escrito en Javascript. El motor normalmente se oculta en un marco o frame invisible. Cualquier acción del usuario es atendida por el motor en el propio navegador, y únicamente se hace una petición al servidor cuando es necesario.
Aplicaciones que usan AJAX
Como me temía, la empresa que está apostando fuerte por esta nueva tecnología es Google. Ya lo ha utilizado en GMail, Google Maps, Orkut, la nueva versión de Google Groups, y Google Suggest, entre otros. Además de Google, lo utiliza también el buscador de Amazon A9.com y Flickr. Por ejemplo, en Google Suggest es utilizado para sugerir palabras de búsqueda mientras se teclea.
Desventajas
En mi opinión, técnicamente es una auténtica maravilla. Solo hay que ver lo rápido que va GMail.
Un receloso del uso intensivo de Javascript, como soy yo, no puede evitar indicar algunas desventajas que también se han señalado en la Wikipedia:
- Disminuye la accesibilidad: No hacía falta ser muy listo para adivinar esto. Al depender de Javascript, la aplicación no puede ser accedida por un navegador que no tenga Javascript. GMail resuelve este problema ofreciendo una versión de la aplicación sin Javascript. De todas formas, hay que tener cuidado con esto. Además, meter el motor en un frame oculto, tampoco ayuda mucho a tener una página accesible.
- Disminuye la usabilidad: Los botones del navegador "Atrás" y "Refrescar" pueden funcionar mal en algunas ocasiones, ya que aunque el contenido cambia dinámicamente de un modo muy rápido, la página sigue siendo la misma. Por ejemplo, a veces, yo tengo que darle dos veces para refrescar la bandeja de entrada de GMail
Conclusión
La verdad es que AJAX es técnicamente sorprendente pero, a menos que se utilice con cuidado, no ayuda mucho a la comunidad que trata de concienciar a los desarrolladores acerca del desarrollo de páginas accesibles. Habrá gente que lo utilice y trate de minimizar los posibles impactos en la usabilidad y accesibilidad, y habrá otros que pasen olímpicamente y degraden aún más sus sitios web.
servido por gigo
10 comentarios
compártelo
favorito
