Traducción de Artículo de Ajax XIV

Dominar AJAX, Parte 3: Peticiones y respuestas Avanzandas en AJAX
Ganar una comprensión completa de los códigos de estado de HTTP, de los estados READY, y del objeto de XMLHttpRequest
Nivel: Introductorio
Brett McLaughlin (brett@oreilly.com), Autor y Editor, O´Reilly y Asociados.
14 Feb 2006

Para muchos desarrolladores Web, hacer peticiones simples y recibir respuestas simples es todo lo que siempre necesitaron, pero para desarrolladores que quieran dominar Ajax, se requiere un entendimiento completo de códigos de estado de HTTP, estados Ready y el objeto XMLHttpRequest. En este artículo Brett McLaughlin te va a mostrar los diferentes códigos de estado y va a demostrar como los maneja cada navegador y va a mostrar peticiones menos usadas que se pueden hacer con Ajax

En el último artículo de esta serie, proporcioné una sólida introducción al objeto XMLHttpRequest, la pieza central de una aplicación Ajax que maneja peticiones para aplicaciones o scripts del lado servidor y tambien trata con información devuelta por ese componente del lado servidor. Toda aplicación Ajax usa el objeto XMLHttpRequest, por eso vas a querer estar intimamente familiarizado con él, para realizar tus aplicaciones Ajax y para realizarlas bien.
En este artículo, me muevo más allá de los fundamentos del artículo pasado y me concentro más en detalle sobre tres parte claves de este objeto de petición:

• Los estados Ready de HTTP
• Los códigos de estado de HTTP
• Los tipos de peticiones que podes hacer

Cada uno de estos es considerado generalmente parte de la cañería de una petición; como resultado, poco detalle se registra sobre estos temas. Sin embargo vas a necesitar ser fluido en estados Ready, códigos de estado, y peticiones si querés hacer mas que solo salpicar en programación Ajax. Cuando algo anda mal en tu aplicación -- y las cosas siempres andan mal-- entender estados Ready, como hacer una petición de cabeceras o que significa un código de estado 400 puede hacer la diferencia entre 5 minutos de eliminar errores y 5 horas de frustración y confusión.
Miraré estados READY de HTTP primero.
Introduciendonos mas profundo en los estado ready de HTTP
Debés recordar del articulo anterior que el objeto XMLHttpRequest tiene una propiedad llamada readyState. Esta propiedad asegura que un servidor ha completado una petición y típicamente una función de rellamada usa la informacion del servidor para actualizar un formulario web o página. El listing 1 muestra un ejemplo simple de esto (también en el último artículo de la serie)

Listing 1.Tratar con una respuesta del servidor en una funcion de rellamada.

function updatePage(){
if(request.readyState==4){
if (request.status==200){
var response = request.responseText.split("|");
document.getElementById("order").value=response[0];
document.getElementById("address").innerHTML=response[1].replace(/\n/g."<br />");)
} else
alert ("El estado es " + request.status);
}
}

Este es definitivamente el uso más común (y el mas simple) de los estado ready. Como seguramente adivinaras por numero "4", hay varios otros estado ready (tambien viste esta lista en el último artículo):

• 0: La petición no está inicializada (antes de llamar a la funcion open()).
• 1: La petición esta establecida pero no enviada (antes de que hayas llamado a send()).
• 2: La petición fue enviada y está en proceso (podes normalmente obtener los contenidos de cabecera de la respuesta en este punto)
• 3: La petición está en proceso , a veces alguna información parcial está disponible de la respuesta, pero el servidor no ha terminado con esa respuesta.
• 4: La respuesta esta completa, podes tomar la respuesta del servidor y usarla.

Si deseas ir mas alla de los fundamentos de la programación en Ajax, necesitas saber no solo estos estados sino cuando ocurren y como podes usarlos. Sobre todo, necesitas aprender en qué estado de una petición encuentras cada estado READY. Desafortunadamente, esto es bastante poco intuitivo y también implica algunos casos especiales.
Estados ready ocultos
El primer estado ready, identificado por la propiedad del readyState 0 (readyState== 0), representa una petición no inicialidada. Tan pronto como llames a open() en tu objeto petición, esta propiedad se establece a 1. Como casi siempre llamas a open() tan pronto como inicializas tu petición, es raro ver readyState==0. Es más el estado ready sin inicializar es bastante inútil en aplicaciones prácticas.
No obstante, en el interés de ser completo, comprobar en el listing 2 que demuestra cómo conseguir el estado READY cuando es 0.

Listing 2. Obtener el estado ready 0

function getSalesData() {
//crear el objeto petición
createRequest();
alert("El estado Ready es " - request.readyState);
//Establecer (inicializar) la petición
var url = "/boards/servlet/updatePage";
request.send(null);
}

En este ejemplo simple, getSalesData() es la función que tu página Web llama para empezar una petición (como cuando un botón es presionado). Observar que tienes que comprobar el estado READY antes de que se llame a open() . La figura 1 demuestra el resultado de ejecutar esta aplicación.

Figura 1: Un estado ready en 0

Obviamente, esto no te hace mucho de bueno; hay muy pocas veces en que necesitarás cerciorarse de que open() no se haya llamado. El único uso para este estado READY en el casi-verdadero-mundo de programación de Ajax es si haces peticiones múltiples usando el mismo objeto de XMLHttpRequest a través de funciones múltiples. En esa situación (algo inusual), puede ser que desees asegurarse de que un objeto de la petición esté en el estado sin inicializar( readyState== 0) antes de hacer nuevas peticiones. Esto esencialmente se asegura de que otra función no esté utilizando el objeto al mismo tiempo.

Cuando 0 es igual a 4
En el caso de uso donde las funciones múltiples de Javascript utilizan el mismo objeto de petición, comprobar si hay un estado READY en 0 para asegurarse de que el objeto de la peticiónno esté en uso puede resultar ser problemático. Puesto que el readyState== 4 indica una petición terminada, encontrarás a menudo los objetos depetición que no se están utilizando con su estado READY todavía fijado en 4 -- los datos del servidor fueron utilizados, pero nada ha ocurrido desde entonces para reajustar el estado READY. Hay una función que reajusta un objeto de la petición llamado abort(), pero realmente no fue pensada para este uso. Si tenes que utilizar funciones múltiples, puede ser que sea mejor crear y utilizar un objeto de petición para cada función más que compartir el objeto a través de funciones múltiples.

Ver el estado READY de una petición en curso
Aparte del estado READY en 0, tu objeto de petición debe pasar con cada uno de los otros estados READY en una petición y respuesta típica, y finalmente terminar con un estado READY de 4. Éso es cuandola línea if(request.readyState == 4) del código que ves en la mayoría de las funciones de rellamada entra; asegura que el servidor terminó y es seguro actualizar la página Web o tomar una acción basada en la información del servidor.
Es una tarea trivial realmente ver este proceso tal como ocurre. En vez de solamente de ejecutar el código en tu rellamada si el estado READY es 4, solamente muestra el estado READY cada vez que tu rellamada sea llamada. Como ejemplo del código que hace esto, comprobar el listing 3.

Listing 3. Comprobar el estado Ready

function updatePage(){
//mostrar el estado Ready actual
alert("updatePage() llamado con un estado ready en " + request.readyState);
}

Si no estás seguro de cómo conseguir este funcionamiento, necesitarás crear una función para llamar desde tu página Web y para hacer que envíe una petición a un componente del lado servidor (tal como la función que fue demostrada en el listing 2 y a través de los ejemplos en el primero y segundo artículos en esta serie). Cerciorarte de que cuando estableciste tu petición, fijaras la función de rellamada al updatePage (); para hacer esto, fijar la propiedad onreadystatechange de tu objeto petición al updatePage ().
Este código es una gran ilustración de exactamente qué significa el onreadystatechange -- el estado READY de la petición cambia cada vez, se llama el updatePage () y ves una alarma. Figura 2 demuestra un ejemplo de esta función siendo llamada, en este caso con un estado READY de 1.

Figura 2 Un estado ready en 1

Probá este código vos mismo. Ponelo en tu página Web y luego activá tu evento (presionar un botón, salir de un campo con Tab, o cualquier metodo que hayas establecido como disparador el una petición). Tu función de rellamada se va a ejecutar varias veces -- cada vez que el estado ready de la petición cambie-- y vas a ver un alerta por cada estado ready. Esta es la mejor manera de seguir una petición en cada una de sus etapas.