Traducción de Artículo sobre Ajax

Este artículo se encuentra originalmente en IBM y lo encontré vía kblog y es una traducción cuyo unicos objetivos son practicar mi inglés y aprender Ajax. Aclaro que solo es una traducción de alguien que apenas está estudiando. Se aceptan aportes, correcciones, críticas, etc.
Dominar Ajax, Parte 1: Introducción a Ajax
Entender Ajax, un acercamiento productivo a la construcciones de sitios web, y como trabajan.
Nivel: Introductorio
Brett McLaughlin (brett@oreilly.com, Autor y Editor, O´Reilly y Asociados.
06 dic 2006

Ajax, que consiste en HTML, JavaScript tecnology, DHTML y DOM, es un excepcional acercamiento que te ayuda a transformar interfases web pesadas en aplicaciones interactivas Ajax. El autor, un experto en Ajax, demuestra como esas tecnologías trabajan juntas -desde una breve descripción a una vista detallada- para hacer el desarrollo web extremadamente eficiente una facil realidad. Tambien revela los conceptos centrales de Ajax, incluido el XMLHttpRequest object.

Cinco años atras, si no sabías XML, eras el patito feo a quien nadie hablaba. Dieciocho meses atrás, Ruby tomo popularidad y los programadores que que no sabían que estaba pasando con Ruby no eran bienvenidos en el dispenser(1). Hoy, si queres estar en lo último de la tecnología, AJAX es donde.
Sin Embargo, Ajax es mucho mas que solo un capricho; es un poderoso adelanto para la construcción de sitios web y no es tan duro como aprender un nuevo lenguaje completo.
Antes, voy a profundisar en que es Ajax, aunque, vamos a gastar solo unos momentos en entender que hace ajax. Cuando escribes una aplicación hoy, tenés dos opciones básicas:

• Aplicaciones de Escritorio


• Aplicaciones Web

Ambas son familiares, las aplicaciones de escritorio generalmente vienen en CD (o a veces se bajan de un sitio web) y se instalan completamente en tu computadora. Se puede usar Internet para descargar actualizaciones, pero el codigo que ejecutan esas aplicaciones reside en tu escritori. Aplicaciones Web- y no hay sorpresas aquí- se ejecutan en un servidor web en algún lugar y accedés a la aplicación con tu navegador Web.
Más importante que donde se ejecuta el código para esas aplicaciones es, sin embargo, como las aplicaciones se comportan y como se interactúa con ellas. Las aplicaciones de escritoriogeneralmente son un poco mas rápidas (se ejecutan en tu computadora, no tenés que esperar a la conexión de internet), tienen interfaces de usuario grandiosas (generalmente interactuan con tu sistema operativo) y son increiblemente dinamicas. Podés clickea, apuntar, tipear, desplegar menus y submenus y navegar por ella casi sin esperas.
Por otro lado, las aplicaciones web generalmente son actualizadas al segundo y proveen servicios no podrías tener nunca en tu escritorio (pensemos en Amazon.com y ebay). Sin Embargo, con el poder de la Web vienen las esperas: espera a que el servidor responda, espera a que las pantalla se actualicen, espera de la peticiones para volver y generar una nueva pagina.
Obviamente esto es un poco una simplificación, pero tenés la idea básica. Como probablemente ya estarás sospechando, Ajax trata de disminuir el espacio entre la funcionalidad e interactividadde la aplicación de escritorio y de la siempre-actualizada aplicacion Web. Podés usar interfaces de usuario dinamicas y controles mas lujososcomo los que encontrás en las aplicaciones de escritorio, pero disponibles en uan aplicación Web.
entonces, que estas esperando? Empezá a mirar a Ajax y como transformar tu pesada interface Web a aplicaciones Ajax de rápidas respuestas.
Vieja tecnología, nuevos trucos
Cuando se entra a Ajax, La realidad es que involucra un monton de tecnologías, para estar mas allá de los fundamentos, necesitas insistir en varias tecnologías diferentes (Esto es la razón por la cual pase algunos artículos iniciales de esta serie describiendo cad auna de ellas). La buena noticia es que probablemente ya conoscas un parte decente sobre varias de estas tecnologías, mejor todvía, la mayorías de esas tecnologías individuales son faciles de aprender, ciertamente no tan difícil como un lenguaje de programación entero como Java or Ruby.
Acá están las tecnologías básicas implicadas en en las aplicaciones Ajax:

• HTML se usa para construir formularios web e identificar campos para usar en el resto de la aplicación.
• El código JavaScript es el código base ejecutado por las aplicaciones Ajax y ayuda a facilitar la comunicación con las aplicaciones servidor.
• DHTML o HTML dinámico, ayuda a actualizar los formularios dinámicamente. Vas a usar div, span y otros elementos de HTML dinámico para comentar(2) tu HTML
• DOM, Modelo de Objetos de Documento, va a ser usado (vía código Javascript) para trabajar con ambos: La estructura del HTML y en algunos casos el XML devuelto por el servidor.

Vamos a desglosarlos para tener una mejor idea de que hacen cada uno. Voy a indagar mas en cada uno de ellos en futuros artículos. Ahora focalicemos en familiarizarnos con esos componentes y tecnologías. Cuanto mas familiarizado estés con este código, más facil va a ser moverse desde conocimiento ocacional sobre estas tecnologías a dominarlas (y realmente mejorar(3) el desarrollo de tu aplicación web).
El objeto XMLHttpRequest
El primer objeto que vas a querer entender es probablemente el que te es más nuevo, se llama XMLHttpRequest. Es un objeto de JavaScript y se crea tan simple como se muestra en Listing 1

Listing 1: Crear un nuevo objeto XMLHttpRequest

<script languaje="javascript" type="text/javascript">
var xmlHttp=new XMLHttpRequest();
</script>

Voy a hablar mas sobre este objeto en el próximo artículo, pero por ahora tengan en cuenta que este es el objeto que maneja todas las comunicaciones con el servidor. Antes de seguir, para y piensa: es la tecnología javascript a travez del objeto XMLHttpRequest la que habla con el servidor. No es el flujo normal de las aplicaciones y es donde Ajax toma mucha de su magia.
En una aplicación web normal, los usuarios completan formularios y hacen click en el botón de Submit. Entonces el formulario completo es enviado al servidor, el servidor transfiere el procesamiento a un Script (generalmente PHP, o Java o puede ser un proceso CGI o algo similar) y cuando el escrip está hecho, devuelve un pagina completamente nueva. Esa página puede ser HTML con un nuevo formulario, con algo de información completada, o puede ser una confirmación o capás una página con algunas opciones selecionadas basadas en información ingresada en el formulario original. Por supuesto, mientras el script o programa en el servidor esta procesando y devolviendo el nuevo formulario, los usuarios tienen que esperar. Sus pantallas se limpiaran y luego se redibujaran con la información que vuelve del servidor. Aca es donde la interactividad entra en juego: los usuarios no obtienen respuesta instantanea y ciertamente no sienten que estén trabajando en una aplicación de escritorio.
Ajax esencialmente pone la tecnología JavaScript y el objeto XMLHttpRequest entre tu formulario Web y el servidor. Cuando los usuarios completan formularios, es información es enviada a algun código JavaScript y no directamente al servidor. En cambio el código Javascript toma la infomación del formulario y manda una petición al servidor. Mientras esto está pasando, el formulario en la pantalla del usuario no se mueve, refresca, centellea, desaparece o para. En otras palabras, el código JavaScript manda el código en secret, el usuario no se da cuenta que la petición ha sido hecha. Todavía mejor, la peticion es enviada asincronicamente, que significa que tu JavaScript (y el usuario) no esperan sin hacer nada a que el servidor responda. Entonces los usuarios pueden continuar ingresando información, moviendose en la pantalla, y usando la aplicación.
Luego, el servidor devuelve la información a tu código JavaScript (todavía esperando en el formulario Web) que decide que hacer con esa información. Puede actualizar campos de formularios en la marcha, dando ese sensacion de inmediatoa tu aplicación, los usuarios obtienen información sin que sus formularios hayan sido aceptados o refrescados. El código JavaScript puede demas tomar la información, realizar algunos cálculos y mandar otra petición, todo sin la intervensión del ususario! Este es el poder del XMLHttpRequest. Puede comunicarse de ida y vuelta con el servidor todo lo que quiera, sin que el usuario se entere de que eso está pasando. El resultado es un experiencia dinámica, de respuesta rápida, y altamente interactiva como la de una aplicación de escritorio, pero con todo el poder de internet detrás.
Agregar algo de JavaScript
Una vez que manejes XMLHttpRequest , el resto de tu código JS va a parecerte un poco aburrido. De hecho, vas a usar código JS solo para algunas tareas básicas:

• Tomar la información del formulario: el código Js hace simple sacar la información fuera de tu formulario y lo mandarla al servidor.
• Cambiar valores en el formulario: tambien es simple actualizar un formulario, desde los valores de los campos elegidos para reemplazar imagenes en la marcha.
• Analizar HTML y XML: vas a usar código JS para manipular el DOM (ver la siguiente sección) y para trabajar con la estructura de tu formulario HTML y cualquier información XML que devuelva el servidor.

Para lso dos primeros items, vas a necesitar familiarizarte con el método getElementById() como se muestra en listing 2

Listing 1: Tomar y establecer valores de campo con código JS

//Tomar el valor del campo "telefono" y ponerlo en una variable llamada telefono
var telefono = document.getElementById("telefono").value;

// Establecer algunos valores en un formulario usando un arreglo llamado respuesta
document.getElemenById("orden").value= respuesta[0];
document.getElemenById("direccion").value= respuesta[1];

No hay nada particularmente destacable acá y eso es bueno! Debes empezar a darte cuenta que no hay nada tremendamente complicado sobre esto. Una vez que manejes XMLHttpRequest , mucho del resto de tu aplicación Ajax va a ser código JavaScript simple como el que se muestra en el listing 2, mesclado con un poco de HTML inteligente. Entonces, a veces hay un poco de trabajo de DOM... por eso vamos a mirar eso.


Mañana sigo... bye.






(1) water cooler gossip: conversación o chusmerío que se forma alrededor del dispenser de agua en las oficinas.
(2) to mark up: to write notes or instructions for changes on a piece of writing, music etc.
(3) blowing the doors off: expresion que no encontré traducción.