lunes, mayo 29, 2006

Traducción de Artículo de Ajax XII

Códigos de estado del HTTP
A pesar del exito aparente en el código del listing 12, todavía hay un problema -- que pasa si el servidor responde a tu petición y termina de procesar, pero reporta un error? Recuerda, el código del lado servidor debería tener en cuenta si esta siendo llamado por Ajax, JSP, un formulario HTML común, o cualquier otro tipo de código; solo tiene los métodos especificos Web tradicionales de reportar información. Y en el mundo Web, códigos HTTP pueden tratar con varias cosas que pueden pasar en una petición.
Por ejemplo, has ingresado una petición para una URL, escribis mal la URL, y recibes un código de error 404 que indica que la página está perdida. Este es uno de tantos códigos de error que una petición HTTP puede recibir como estatus (ver Recursos por un link a una lista completa de códigos de estado). 403 y 401, ambos indican información segura u prohibidaesta siendo accedida, también son comunes. En cada uno de esos casos, son códigos que resultan de una
respuesta completa. En otras palabras, el servidor completa la petición (significa que el estado ready es 4), pero es probable que no devuelva la informacion deseada por el cliente.
Además del estado ready, tambien necesitas chequear el estado HTTP. Estas buscando al código de estado 200 que simplemente significa correcto. Con un estado ready 4 y un código de estado de 200, estas listo para procesar la información del servidor y esa información debería ser lo que pediste (y no un error u otro tipo de información problemática). Agrega otro control de estado a tu método de rellamado como se muestra en el listing 14.
Listing 14. Controlar el código de estado HTTP

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

Para agregar un manejo de error más robusto --con minimas complicaciones-- deberias agregar un control o dos para otros códigos de estado; ver la version modificada de updatePage() en el listing 15.
Listing 15. Agregar algún control de error liviano.

function updatePage() {
if (request.readyState == 4)
if (request.status == 200)
alert("Server is done!");
else if (request.status == 404)
alert("Request URL does not exist");
else
alert("Error: status code is " + request.status);
}

Ahora cambiar el URL en tu getCustomerInfo() a una URL no existente y vean que pasa. Deberias ver una alerta que te diga que el URL que solicitaste no existe -- perfecto! Dificilmente vaya a controlar toda condición de error, pero en una cambio simple que cubre el 80% de los problemas que pueden ocurrir en una típica aplicación Web.

Leer el texto de respuesta
Ahora que te aseguraste de que la petición fue procesada completamente (a traves del estado ready) y el servidor te da una respuesta normal y lista (a traves de el código de estado), podes finalmente trabajar con la información devuelta por el servidor. Esta es convenientemente almacenada en la propiedad responseText del objeto XMLHttpRequest.
Detalles sobre como se ve el texto en responseText, en terminos de formato o tamaño, es intensionalmente vago. Esto permite al servidor establecer este texto a virtualmente cualquier cosa. Por ejemplo, un script puede retornar valores separados con coma, otro valores separados con pipe (el pipe es el caracter |) y otro podria retornar una larga cadena de texto. Todo está en el servidor.
En el caso del ejemplo usado en este artículo, el servidor devuelve la última orden del cliente y luego su dirección, separadas por el simbolo |. La orden y la dirección son usados para establecer los valores de elementos en el fomulario; el listing 16 muestra el código que actualiza la pantalla.

Listing 16. tratar con la respuesta del servidor.

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

Primero, el responseText es extraido y separado en los simbolos | usando el metodo JavaScript split(). El arreglo de valores resultante, es volcado en response. El primer valor --la última orden del cliente-- se accede en el arreglo como response[0],y es establecido como el valor del campo con un ID "orden". El segundo valor en el arreglo, en response[1] es la dirección del cliente y requiere un poco más de procesamiento. Como las lineas en la direccion están separadas por separadores de linea normales (el caracter \n), el código necesita remplazar estas con separadores de lineas estilo XHTML, <br />s. Esto se realizo a traves del uso de la funcion replace() junto con una expresion regular. Finalmente, el texto modificado se establece como el HTML interior de un div en el fomulario HTML. El resultado es que el formulario es actualizado de repente con la información del cliente, como puedes ver en la figura 4.
The Break Neck form after retrieving customer data

Antes de concluir, otra propiedad importante del XMLHttpRequest se llama responseXML. Esta propiedad contiene (podes adivinar?) una respuesta XML en el evento de donde el servidor elija responder con XML. Trabajar con una respuesta XML es un tanto distinto que trabajar con una repuesta de texto plano, e involucra análisis, el Modelo de Objetos de documento (DOM) y otras varias consideraciones. Vas a aprender más sobre XML en un artículo futuro. Además, por que responseXML comunmente aparece en discuciones alrrededor de responseText, vale la pena mencionarlo acá. Para muchas aplicaciones simples de Ajax es todo lo que necesitas, pero pronto vas a aprender a manejar XML a travez de aplicaciones Ajax también.

Etiquetas: