Traducción de Artículo sobre Ajax III

Una Palabra sobre seguridad
¿Qué pasa con la seguridad? Los Navegadores actualesle dan al usuario la habilidad de manejar sus niveles de seguridad, apagar la tecnología JavaScript, y desabilitar cualquier numero de opciones en su navegador. En esos casos, tu código no va a trabajar bajo ninguna cirscunstancia. Para esas situaciones, vas a tener que manejar los problemas con gracia, es por lo menos un artículo en si mismo, uno que voy a enfrentar mas tarde (Va a ser una serie larga, ¿no?, no te preocupes vas a dominar todo esto antes de que termines). Por ahora, estas escribiendo código robustos, pero no perfecto, que es genial para empezar a entender Ajax. Vas a volver sobre los detalles más finos.

Pedido/respuesta en un mundo Ajax
Entonces ahora ntendes Ajax y tenés una básica idea sobre el objeto XMLHttpRequest y como crearlo. Si has leido en detalle, ya te habrás dado cuenta que es la tecnología JavaScript la que se comunica con cualquier aplicación Web en el servidor, más que tu formulario HTML siendo aceptado directamente para esa aplicación.
¿Cuál es la parte que falta? Como usar realmente el XMLHttpRequest. Como es código crítico que vas a usar de alguna manera en toda aplicación Ajax que escribas, hace un paseo rápido por como luce un modelo básico de petición/respuesta con Ajax.
Hacer una Petición
Tenés tu nuevo objeto XMLHttpRequest brillante; vamos a dar una vuelta en él. Primero, necesitás un método JavaScript que tu web pueda llamar (como cuando un usuario ingrese texto o seleccione una opción de un menú). Despues, vas a seguir las mismos puntos básicos en casi todas tus aplicaciones Ajax:

1. Obtener toda la información que necesites del formulario web
2. Construir la URL para conectarlo
3. Abrir una conección con el Servidor
4. Establecer una función para que el servidor ejecute cuando este hecho.
5. Mandar la petición.

El Listing 5 es un ejemplo de un método Ajax que hace especificamente esas cosas, en ese orden.

Listing 5. Hacer una petición con Ajax

function callServer() {
// Toma la ciudad y el estado del formulario web
var ciudad = document.getElementById("ciudad").value;
var estado = document.getElementById("estado").value;
//Solamente continua si hay valores para ambos campos
if((ciudad==null) || (ciudad=="")) return;
if((estado==null) || (estado=="")) return;
//Construir la URL para conectarse
var url = "/scripts/getZipCode.php?ciudad="+escape(ciudad)+" />
//open a connection to the server
xmlHttp.open("GET", url, true);
//Establecer una función para que el servidor ejecute cuando esté hecho
xmlHttp.onreadystatechange = updatePage
//Mandar la petición
xmlHttp.send(null);
}

Mucho de esto se explica solo. La primera parte del código usa JS básico para extraer los valores de algunos campos del formulario. Despues el código establece un script PHP como el destino para conectarse. Ver como el URL del script es especificado y luego la ciudad y el estado (del formulario) son adosados a el usando simples parametros GET.
Despues, la conexión es abierta; este es el primer lugar donde ves el XMLHttpRequest en acción otra vez. El método de conexión es indicado (GET), tal como la URL para conectarse. El último parametro, cuando es establecido a Verdadero (true), solicita una conexión asincrónica (así haciéndolo Ajax). Si usaras falso (false), el código esperaría en el servidor cuando se hace la petición y no continuaría hasta una que respuesta sea recibida. Estableciéndolo a Verdadero (true) , tus usuarios pueden todavia usar el formulario (y hasta llamar otros métodos JS) mientras el servidor está procesando este pedido en el fondo.
La propiedad onreadystatechange del xmlHttp (recuerda, es tu instancia del objeto XMLHttpRequest) te permite decirle al servidor que hacer cuando termine de ejecutar (lo cual puede ser en cinco minutos o en cinco horas). Como el código no va a esperar al servidor, vas a necesitar hacerle saber al servidor que hacer para que puedas responderle. En este caso un método especifico, llamado updatePage(), va a ser accionado cuando el servidor termine de procesar tu pedido.
Finalmente, send() es llamdo con el valor null. Como ya agregaste la información para mandar al servidor (la ciudad y el estado) en el URL de petición, no necesitás mandar nada en la petición. Entonces esto dispara tu petición y el servidor puede hacer lo que le pediste que haga.
Si no tomas nada más fuera de esto, te das cuenta cuan fácil y simple es esto! Aparte de poner la naturaleza asincrónica del Ajax dentro de tu cabeza, es relativamente una tarea simple. Vas a apreciar cuanto te libera para concentrarte en aplicaciones e interfaces atractivas, más que en complicado código de petición/respuesta HTTP.
El código en el listing 5 es tan fácil como se ve. La información es texto simple y puede ser incluído como parte del URL. GET manda el pedido mejor que el más complicado POST. No hay XML con contenido de cabecera para agregar, sin información para mandar en el cuerpo de la petición, ésta es una utopía Ajax en otras palabras.
A no temer; Las cosas se van a poner mas complicadas a medida que esta serie avance. Vas a aprender como mandar peticiones POST, como establecer tipos de cabeceras y contenidos, como codificar XML en tus mensajes, comoagregar seguridad a tu petición... La lista es bastante larga! No te preocupes por las complicaciones por ahora; poné tu cabeza en las bases, y rápidamente vas a construir un completo arsenal de herramientas Ajax.
Manejar la respuesta Ahora necesitás tratar con la respuesta del servidor. Realmente solo necesitás saber dos cosas en este punto:

• No hacer nada hasta que la propiedad xmlHttp.readyState sea igual a 4
• El servidor va a colocar su respuesta en la propiedad xmlHttp.responseText.

La primera de ellas -estados correctos- avanza sobre el tema principal de el próximo artículo; vas a aprender sobre las etapas de una petición HTTP, más de lo que quisieras saber. Por ahora, si simplemente chequeas un determinado valor (4), las cosas van a andar (y vas a tener mas expectativas de ver el próximo artículo). El segundo ítem -usar la propiedad xmlHttp.responseText para obtener la respuesta del servidor- es fácil. El Listing 6 muestra un ejemplo de un método que el servidor puede llamar, basado en los valores enviados en el Listing 5.

Listing 6. Manejar la respuesta del servidor

function updatePage(){
if (xmlHttp.readyState == 4){
var respuesta = xmlHttp.responseText;
document.getElementById("CodigoPostal").value = response
}
}

Otra vez, este código no es tan difícil ni complicado. Espera al servidor para llamarlo en el estado correcto y usa el valor que el servidor le devuelve (en este caso, el código postal para la ciudad y estado que ingresó el usuario) para establecer el valor de otro campo del formulario. El resultado es que el campo CodigoPostal de pronto aparece con el código postal, pero el usuario nunca tuvo que apretar un botón. Esa es la sensación de aplicación de escritorio que hablabamos antes. Respuesta rápida, sensación dinámica y más todo con un poco de código Ajax.
Los lectores observadores notarán que el campo CodigoPostal es un campo de texto normal. Una vez que el servidor devuelve el código postal, los usuarios puede sobreescribir el valor. Es intencional por dos razones: para mantener simples las cosas en el ejemplo y para mostrarte que a veces querés habilitar a los usuarios a sobrescribir lo que el servidor dice. Mantengan ambas cosas en mente; son importantes el el buen diseño de interfaces de usuario.