Traducción de artículo sobre Ajax VI
Introducción al XMLHttpRequest
Para hacer que esta maravilla suceda, necesitás familiarizarte íntimamente con un objeto JavaScript llamado XMLHttpRequest. Este pequeño objeto -que realmente ha estado en varios navegadores hace bastante tiempo- es la clave de Web 2.0, Ajax y casi todo lo demás que vas a aprender en esta columa por lo próximos meses. Para darte una rápida vista, estos son solo algunos de los métodos y propiedades que vas a usar en este objeto:
- open(): establecer una nueva petición a un servidor
- send(): enviar una petición al servidor
- abort(): Escapar de la petición actual
- readystate: provee el estado correcto del HTML actual
- responseText: El texto que el servidor devuelve al responder una petición.
La simplicicidad de lo nuevo
Primero, necesitás crear una nueva variable y asignarle una instancia del objeto XMLHttpRequest. Eso es bastante simple en JavaScript; solo usa la nueva palabra clave con el nombre del objeto, como ves en el linsting 1
Listing 1. Crear un nuevo objeto XMLHttpRequestNo es tan difícil, ¿no?. Recuerda, JavaScript no requiere que ingreses algo en sus variables, por eso no necesitas nada como lo que ven en Listing 2 (que sería como deberías crear este objeto en Java)<script language="javascript" Type="text/javascript">
var request= new XMLHttpRequest();
</script>
Listing 2. Crear un nuevo objeto XMLHttpRequestEntonces creaste la variable en Javascript con var, dandole un nombre (como "request") y despues le asignaste una nueva instancia de XMLHttpRequest. En esete punto, ya estas listo para usar el objeto en sus funciones.XMLHttpRequest request= new XMLHttpRequest();
Manejo de error
En la vida real, las cosas puede ir mal y este código no provee ningún manejo de error. Una pequeña mejora es crear este objeto y tener una salida elegante si algo sale mal. Por ejemplo, muchos navegadores viejos (aunque no lo creas, la gente todavía sigue usando versiones viejas de Netscape Navigator) no soportan XMLHttpRequest y necesitás hacerles saber que algo anda mal. El listing 3 muestra como deberías crear este objeto para que si algo falla, tire una alerta de JavaScript.
Listing 3. Crear XMLHttpRequest con algunas habilidades de tratamiento de errorAsegurate de entender cada uno de estos pasos:<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (failed) {
request = false;
}
if (!request)
alert("Error al inicializar XMLHttpRequest!");
</script>
- Crear una nueva variable llamada request y asignarle un valor falso (false). Vas a usar falso como condición que signifique que el objeto XMLHttpRequest no haya sido creado todavía.
- Agregarlo en un bloque try/catch
- tratar y crear el objeto XMLHttpRequest
- Si eso falla (catch(failed)), asegurate que request todavía sea falso.
- Control si request es falso (si las cosas salen bien no lo será)
- Si hubo un problema (y request es falso), usa un alerta JavaScript para decirle al usuario que hubo un problema.
Lidiar con Microsoft
Todo esto se ve bastante bien... por lomenos hasta que pruebes tu código en Internet Explorer. Si lo haces, vas a obtener algo tan feo como en la figura 1:
figura 1: Internet Explorer reportando un error.Claramente, algo no está funcionando. Internet Explorer es duramente un navegador desactualizado y alrededor del 70% del mundo lo usa. En otras palabras, no harías bien en el mundo Web si no soportaras Microsoft e Internet Explorer! Por eso, necesitas una mejora diferente para lidiar con navegadores Microsoft.
Resulta que Microsoft soporta Ajax, pero llaman a su versión de XMLHttpRequest algo diferente. De hecho lo llaman de diferentes formas. Si estás usando una version nueva de IE, necesitas usar un objeto llamado Msxml2.XMLHTTP; algunas versiones mas viejas usan Microsoft.XMLHTTP. Necesitas soportar esos dos tipos de objetos (sin perder el soporte que ya tenes para los navegadores no-Microsoft). Revisa el listing 4 que agrega soporte para Microsoft al código que ya habías visto.
Listing 4. Agregar soporte para los navegadores MicrosoftEs fácil perderse en estos vericuetos, por eso los guio a traves de ellos un paso por vez:<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!");
</script>
- Crear una nueva variable llamada request y asignarle un valor falso (false). Usar el valor falso como condición para indicarque el objeto XMLHttpRequest no ha sido creado todavía.
- Agregar el bloque try/catch
- Probar y crear un objeto XMLHttpRequest
- Si falla (catch(trymicrosoft))
- Probar y crear un objeto compatible con Microsoft usando las más nuevas versiones de Microsoft (Msxml2.XMLHTTP)
- Si falla (catch(othermicrosoft)), probar y crear un objeto compatible con Microsoft usando la version mas vieja de Microsoft (Microsoft.XMLHTTP)
- Si aún falla, asegurate de que request siga establecida en falso
- Verifica si request es todavia falso (si las cosa están bien, no será)
- Si hay un problema (y request es falso), usa un alerta de Javascript para avisarles a los usuarios que hay un problema.
Figura 2: Internet Explorer trabajando normalmente
Etiquetas: Ajax
0 Decà algo:
Publicar un comentario
<< Casa?