Traducción de Artículo de Ajax XI

Manipulación de respuestas del servidor
Hiciste tu petición, tu usuario esta trabajando felizmente en el formulario Web (mientras el servidor tranaha en la petición), y ahora el servidor termina de tratar la petición. El servidor se fija en la propiedad onreadystatechange y detecta que método llamar. Una vez que eso ocurre, podes pensar en tu aplicación como en cualquier otra, asincrónica o no. En otras palabras, no tenes que tomar ninguna acción especial escribiendo métodos que respondan al servidor; solo cambiá el formulario, enviá al usuario a otra URL o hacé lo que necesites con la respuesta del servidor. En esta sección nos centraremos en responder al servidor y luego tomar una acción típica --cambiar al vuelo parte del formulario que ve el usuario.
Rellamadas y Ajax
Ya viste como hacer saber al servidor que hacer cuando termina: fijar la propiedad onreadystatechange del objeto XMLHttpRequest al nombre de la funcion a ejecutar. Luego, cuando el servidor haya procesado la petición, va a llamar automaticamente esa función. Tampoco necesitás preocuparte de ningún parámetro para ese método. Vas a empezar con un método simple como en el Listing 12.

Listing 12. Código del método de rellamada

<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error al inicializar XMLHttpRequest!");
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}

function updatePage() {
alert("El servidor terminó!");
}
</script>

Esto solo dispara una alerta útil, para decirte cuando termina el servidor. Prueba este código en tu propia página, guarda la página y luego tirala en un navegador (si queres XHTML de este ejemplo, ver el listing 8) cuando ingreses un número de teléfono y dejes el campo, deberías ver la ventana de alerta (ver figura 3); pero si presionás OK va a aparecer otra vez... y otras.

Figura 3: Código de Ajax mostrando una ventana de alerta

Dependiendo de su navegador, vas a tener dos, tres, o aún cuatro alarmas antes de el formulario pare de mostrar alarmas. ¿Qué se está pasando? Resulta que no has considerado el estado ready del HTTP, un componente importante del ciclo de peticion/respuesta.
Estados ready de HTTP
Antes, dije que el servidor, una vez que termina con una petición, busca qué método llamar en la propiedad onreadystatechange de XMLHttpRequest. Eso es verdad, pero no es toda la verdad. De hecho, llama a ese método cada vez que el estado READY del HTTP cambia. ¿Qué significa? Bien, tenes que entender los estados READY del HTTP primero.
Un estado READY del HTTP indica el estado o situacion de una petición. Se utiliza para reconocer si se ha comenzado una petición, si se está contestando, o si el modelo de petición/respuesta ha terminado. Es también útil en la determinación de si es seguro leer cualquier texto o datos de la respuesta que un servidor pudo haber provisto. Necesitas saber sobre los cinco estados READY en tus aplicaciones Ajax.

• 0: La petición está sin inicializar (antes de que hayas llamado a open())
• 1: La petición esta seteada, pero no ha sido enviada (antes de que hayas llamado a send())
• 2: La petición fue enviada y está siendo procesada (normalmente podes obtener el contenido cabecera de la respuesta a este punto)
• 3: La petición está siendo procesada; a menudo alguna informacion parcial de la respuesta está disponible, pero el servidor todavía no ha terminado con esa respuesta.
• 4: La respuesta está completa; podes tomar la respuesta del servidor y usarla.

Como la mayoria de los asuntos de multi-navegador, estos estados ready son usados un poco incosistentemente. Esperarias ver siempre los estados ready moverse desde 0 a 1 a 2 a 3 a 4, pero en la práctica, es raramente el caso. Algunos navegadores nunca reportan 0 o 1 y saltan directamente al 2, después al 3 y luego al 4. Otros navegadores reportan todos los estados. Ademas otros van a reportar el estado 1 varias veces. Como ves en la ultima sección, el servidor llama al updatePage() varias veces, y cada invocación resulta en una caja de alerta mostrandose --probablemente no como querías!
Para la programación Ajax, el unico estado con el que necesitas tratar es el estado ready 4, que indica que la respuesta del servidor está completa y es segura para ver la información de respuesta y usarla. A cuenta de esto, la primera línea en el método de rellamada deberia ser como se muestra en el listing 13

Listing 13. Check the ready state

function updatePage() {
if (request.readyState == 4)
alert("Server is done!");
}

Este cambio comprueba para asegurarse de que el servidor realmente haya acabado con el proceso. Intenta ejecutar esta versión del código Ajax y solamente deberías obtener el mensaje alerta una vez, que es como debe ser.