Introducción al XMLHttpRequestPara 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.
No te preocupes si no las entendés todas (o algunas para el caso) vas a aprender sobre cada método y propiedad en próximos artículos. Lo que deberías sacar de esto es una buena idea de que hacer con XMLHttpRequest. Observa que cada uno de esos métodos y propiedades se relacionan con mandar una petición y tratar con la respuesta. De hecho, si mirás cada método y propiedad de XMLHttpRequest, estarán todas relacionadas a ese tan simple modelo petición/respuesta. Por eso claramente, no vas a aprender sobre un sorprendente objeto GUI nuevo o alguna clase de avance super secreto para crear interacción con el usuario; vas a trabajar con simples peticiones y simples respuestas. Puede ser que no suene exitante, pero el uso cuidadoso de este objeto puede cambiar totalmente tus aplicaciones.
La simplicicidad de lo nuevoPrimero, 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 XMLHttpRequest<script language="javascript" Type="text/javascript">
var request= new XMLHttpRequest();
</script>
No 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)
Listing 2. Crear un nuevo objeto XMLHttpRequest
XMLHttpRequest request= new XMLHttpRequest();
Entonces 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.
Manejo de errorEn 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 error
<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>
Asegurate de entender cada uno de estos pasos:
- 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.
Es bastante simple; es mas largo de leer y escribir, que de entender para la mayoría de los desarrolladores JavaScript y Web. Ahora tenes una piesa de código a prueba de error que crea un objeto XMLHttpRequest y hasta te avisa si algo sale mal.
Lidiar con MicrosoftTodo 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 Microsoft
<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>
Es fácil perderse en estos vericuetos, por eso los guio a traves de ellos un paso por vez:
- 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.
Has esos cambios a tu código y prueba las cosas en IE otra vez; deberías ver el formularioque creaste (sin mensaje de error). En mi caso, resulto algo como en la figura 2.
Figura 2: Internet Explorer trabajando normalmente
Etiquetas: Ajax
