jueves, febrero 23, 2006

Traducción del Artículo sobre Ajax II

Completar con DOM
Por último pero no menos importante, está el DOM, el modelo de objetos de documento. Para alguno de ustedes, escuchar sobre DOM puede ser un poco intimidante, no es usado regularmente por los diseñadores de HTML y es todavía mas inusual para codificadores de JS a no ser que estén en tareas de programación de gran embergadura. Donde se encuentra mucho DOM en uso es en sólidos programas de Java y C/C++; de hecho, probablemente por esto es que, DOM adquirió un poco de su reputación de ser difícil o duro de aprender.
Afortunadamente, usar DOM en tecnología JS es fácil y mayormente intuitivo. En este punto, normalmente muestro como usar DOM o por lo menos doy algunos ejemplos de código, pero eso sería un engaño. Verás, podés entrar bastante rápido en Ajax sin tener que lidiar con DOM y ese es el camino que les voy a mostrar. Volveré al DOM en un futuro artículo, pero por ahora, solo tené en cuenta que está ahí. Cuando empieces a enviar XML ida y vuelta entre código JS y el servidor y realmente cambies el formulario HTML, vasa volver a indagar en DOM. Es fácil obtener algo de Ajax efectivo sin él, así que postergalo por ahora.
Obtener el objeto Petición
Con una descripción básica adquirida, estás listo para para ver algunos detalles. Como XMLHttpRequest es cetral para las aplicaciones Ajax, y probablemente nuevo para muchos de ustedes, voy a empezar ahí. Como viste en Listing 1 debería ser bastante fácil crear este objeto y usarlo, correcto? Espera un minuto.
Trabajar con navegadores Microsoft
El navegador de Microsoft, Internet Explorer, usa el programa de análisis MSXML para trabajar el XML (puedes encontrar mas sobre MSXML en Recursos) Entonces cuando escribas aplicaciones Ajax que necesiten trabajar en Internet Explorer, vas a necesitar crear el objeto de una manera particular.
Sin Embargo, no es tan fácil. MSXML realmente tiene dos versiones diferentes dando vueltas dependiendo de la versión de la tecnología JS instaslada en Internet Explorer, por eso tenés que escribir el código que maneje ambos casos. Mirá en Listing 3 el código que necesitás para crear un objeto XMLHttpRequest en Navegadores Microsoft.
Listing 3: Tomar y establecer valores de campo con código JS
var xmlHttp = false
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
Todo esto no es exactamente lo que necesitamos, pero está bien. Vas a indagar en programación en JavaScript, manejo de Errores, compilación condicional y mas antes de que esta serie termine. Por ahora tenes que tener dos líneas básicas en tu cabeza:
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
y
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

Aislado, este código trata de crear el objeto usando una versión de MSXML; si falla, lo crea usando la otra versión. Lindo, no? Si ninguno de esos anda, la variable xmlHttp se establece a falso, para decirle a tu código que algo no esta andando. Si ese es el caso, probablemente tengas un navegador no-Microsoft y necesitas usar un código diferente para hacer el trabajo.
Trabajando con Mozilla y navegadores No-Microsoft
Si Internet Explorer no es tu navegador elegido o escribís código para navegadores No-Microsoft, entonces necesitás código diferente. De hecho, es la simple línea de código que viste en el listing 1:
var xmlHttp = new XMLHttpRequest object;
Esta línea mucho mas simple crea un objeto XMLHttpRequest en Mozilla, Firefox, Safari, Opera y casi todos los otros navegadores No-Microsoft que soporten Ajax de cualquier manera o moda.
Ponerlos juntos
La clave para soportar todos los navegadores. ¿Quién quiere escribir una aplicación que trabaje solo en internet explorer o una que trabaje solo en navegadores No-Microsoft ? Peor todavía, ¿querés escribir tu aplicación dos veces? Por supuesto que no! Entonces combiná tu código para que soporte a ambos. El Listing 4 muestra el código que hace solo eso:
Listing 4: Crear un objeto XMLHttpRequest de la forma multi-navegador
/*Crear un nuevo objeto XMLHttpRequest para comunicarse con el servidor*/
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version 5)
try {
xmlHttp = new ActiveObject("Msxml2.XMLHTTP"):
} catch (e) {
try {
xmlHttp = new ActiveObject("Microsoft.XMLHTTP"):
} catch (e2) {
xmlHttp = false
}
}
@end @*/
if (!xmlHttp typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
Por ahora, ingnorá los comentarios y etiquetas extrañas tal como @cc_on; son comandos de compliación especiales de JavaScript que vas a explorar en profundidad en mi próximo artículo, que va a estar focalizado especificamente en XMLHttpRequest. Este código puede dividirse en tres fases:
  1. Crear la variable xmlHttp patas referir el objeto XMLHttpRequest que vas a crear
  2. Tratar de crear los objetos en navegadores Microsoft:
    • tratar y crear el objeto usando el objeto Msxml2.XMLHTTP
    • Si eso falla, tratar y crear el objeto usando el objeto Microsoft.XMLHTTP
  3. Si xmlHttp no está todavía establecido, crear el objeto en la manera no-Microsoft
Al final de este proceso, xmlHttp debe referenciar a un objeto XMLHttpRequest válido, sin importar que navegador utilicen los usuarios.

-----------

Bien, hoy fue un poco menos, mañana veremos que pasa..




Etiquetas: