Tuesday, May 08, 2007

XMLHttpRequest AJAX Introducción

Hola de nuevo

Esta es una de mis primeras entradas, que quiero dedicar a lo que tiene que ver con AJAX.
Si quieren saber por donde va lo de AJAX y demás pueden visitar http://ajax.asp.net/default.aspx?tabid=47 donde vana
Encontrar toda clase de material para iniciarse en el tema.

Yo quiero que veamos AJAX desde un lado práctico, tocando ciertas partes fundamentales en la teoría.
Para esto comencemos con el objeto XmlHttpRequest, que dicen por ahí, es el corazón de la maquinaria de AJAX. Sin este Objeto volveríamos a los aburridos y viejos sitios estáticos. La idea es que veamos cómo va la movida de instanciar este objeto, sus sutiles diferencias, dependiendo de un browser y otro, y lo sencillo que es enviar una petición "server side", lo cual cómo apreciaremos es bastante sencillo para ser cierto.

Entonces aquí pueden ver el video, en uno de mis sitios favoritos, si señores YouTube, que se ha convertido en una Tool más de aprendizaje y por supuesto esparcimiento.



Ahora bien, que está pasando ahí debajo.

Si señores ese JavaScript, que si quieren probarlo deben colocar después de su etiqueta HTML y antes de su HEAD.
El método getHTTPRequestObject(), se encarga de instanciar adecuadamente el objeto XMLHttpRequest. La idea radica en que para IE, este se comporta como un objeto tipo ActiveX, pero ya todos conocemos los problemas de compatibilidad con los
otros browser. Por lo tanto la tarea de instanciamiento difiere un poco. Por ejemplo en el caso de IE actual, la línea que crea el objeto es xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); Si se fijan en mi video tengo un pequeño error y
es que me falta una P al instanciar dentro del primer catch(), así que simplemente disculpas. Pero bueno para la versión de mi IE, mi isntancia se crea en el segundo Try.
Ahora miren que si nuestra página es accedida por un browser tipo Mozilla o Safari, se utiliza:
xmlhttp = new XmlHttpRequest(); Esto es porque para esos browsers, el objeto es nativo, pre-construido.

En la página default.aspx, he puesto dentro del DIV un simple mensaje
XmlHttpRequest trabajando!!
Y finalmente he adicionado el archivo de texto "TextFile.txt" al proyecto web, el cual le inserto un texto cualquiera.

Por favor coloquen mucha atención a esta parte del script, donde está lo interesante:
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
alert(xmlhttp.responseText);
}
}
Si señores, es una llamada asíncrona, donde el valor 4 indica que la llamada se ha realizado con éxito. La función onreadystatechange sirve para monitorear el estado actual de la llama asíncrona.

Los posibles valores de este estado son:

0:Uninitialized
1:Loading
2:Loaded
3:Interactive
4:Complete

Bien, lentamente iremos viendo más cosas sobre este interesante objeto y por supuesto todo lo que trae AJAX para nosotros en este mar de información y tecnologías que están ahí esperando a que las explotemos.

1 comment:

Gabo said...

Maestrisimo, muy buen artículo, y pues si, adelante con Ajax que esta siendo muy útil y es uno de los núcleos de la Web 2.0


Un abrazo,

Gabo.