Creando nuestra propia libreria Ajax, conociendo el objeto XMLHttpRequest

Que tal.
Justo hoy en mi clase de Sistemas Cliente/Servidor, el profesor hizo un comentario de lo importante que es el compartir información con los demás, y es que el conocimiento incrementa su validez cuando es pregonado y extensivo. La verdad es que pocas veces comparto información y conocimientos directamente con mis compañeros si es que ellos no me lo piden, así que el postear en este blog es la manera mas agradable y voluntaria para compartir conocimiento sin que muchos lo pidan XD

Para los que hablan el lenguaje de la web, por ahí les guste JavaScript (el manejo que tiene sobre el DOM me fascinó), pues para ellos aquí les muestro como es que JavaScript se convierte en el corazón de Ajax, que como sabemos Ajax no es una tecnología si no una sinergia o el uso asíncrono de varias tecnologías como JAvaScript, XML y algún lenguaje de servidor, entre ellos PHP,ASP.net, JSP,etc.

Bueno empezamos conociendo el objeto XMLHttpRequest, que es sobre el que gira el funcionamiento de Ajax, este objeto es necesario para realizar la comunicación con el servidor, está disponible como un objeto ActiveX en la pionera versión 5 de Internet Explorer. Un momento ¿qué es un ActiveX?, en brevísimas palabras es una tecnología desarrollada por Microsoft (por lo tanto tecnología propietaria) que le permite al desarrollador enriquecer el contenido de la página web con pequeñas aplicaciones o interacciones con el Servidor o el computador del usuario.

Para los que no conocen mucho las aplicaciones Ajax, pues corresponden a lo que se denomina la Web 2.0, antes cuando haciamos nuestras peticiones a un servidor web este nos devolvía una respuesta codificada en lenguaje HTML, la cual era recargada totalmente en el navegador, pero gracias a este Objeto XMLHttpRequest y al gran manejo que tiene JavaScript sobre el DOM hacen posible que la respuesta del servidor sea tratada, formateada y expuesta a disposición del programador para ser mostrada en cualquier bloque de la pagina, esto pues trae una mejor performance de las aplicaciones web.

Bueno empezamos creando nuestra libreria Ajax.

1.- Creamos un archivo de texto plano y lo renombramos con miAjax.js, utilizando cualquier editor de Textos, en mi caso uso SciTE, recomendable tambien notepad++ para los usuarios windows.Luego lo editamos...

2.- Creamos el objeto XMLHttpRequest y devolvemos en una funcion

 function doXmlHttpRequest(){
    try {
       req = new XMLHttpRequest(); /* p.e. Firefox */
    }catch(err1) {
         try {
             req = new ActiveXObject('Msxml2.XMLHTTP'); /* algunas versiones IE */
         }catch (err2) {
               try {
                  req = new ActiveXObject("Microsoft.XMLHTTP"); /* algunas versiones IE */
               }catch (err3) {
                    req = false;
               }
         }
    }
   return req;

 }

3.- Ahora las funciones que realizan las llamadas asíncronas al servidor por medio de los métodos GET y POST.

/*
* Este metodo recibe una url y una instancia objeto XmlHttpRequest y
* realiza la petición con el método GET.
*/
function requestGET(url, req) {

    myRand=parseInt(Math.random()*99999999);//para el cache del navegador

    req.open("GET",url+'&rand='+myRand,true);

    req.send(null);

}



/*
* Este metodo recibe una url,los parametros de consulta y una instancia objeto XmlHttpRequest y * realiza la petición con el método POST.
*/
function requestPOST(url, query, req) {
   req.open("POST", url,true);
   req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   req.send(query);

}

4.- Ahora el método que ejecuta una funcion recibiendo su nombre como parametro.

 function doFuncion(funcion,item) {
    eval(funcion + '(item)');
 }

5.- Esta es la función principal a la cual llamaremos en nuestras aplicaciones. la cual recibe una url, una cadena de consulta,el nombre de una función de respuesta, el nombre de una función de espera ( evidentemente para nuestras imágenes de "cargando"), método de envío y un parámetro que designa el tipo de respuesta que queremos del servidor, ya sea texto plano o Xml.

 //isXml: 0 si la respuesta es en texto..1 si la respuesta es en XML

/*
*Es imprescindible conocer los diferentes códigos de respuesta de parte del servidor.
*-El atributo readyState devuelve el estado actual del objeto XMLHttpRequest, cada vez  que *cambia el valor de readyState se lanza la función indicada en onreadystatechange.
*
*-El atributo onreadystatechange asigna la función que se ejecutará cada vez que readyState *cambie de valor.
*
*-El atributo statusText devuelve el código del estado HTTP de la transmisión devuelto por el
* servidor web.
*
*-El atributo responseText devuelve el texto del documento descargado del servidor en una
* petición con XMLHttpRequest.
*/
 function doAjax(url,query,funcionResp,funcionEspera,tipoReq,isXml) {
   var myreq = doXmlHttpRequest();// crea la instancia del objeto XMLHTTPRequest
   myreq.onreadystatechange = function() {
       if(myreq.readyState == 4) {
            if(myreq.status == 200) {
                var item = myreq.responseText;
                if(isXml==1) {
                  item = myreq.responseXML;
                }
                doFuncion(funcionResp, item);
            }
       }
       else
          doFuncion(funcionEspera,"");
    }
    if(tipoReq=='post') {
        requestPOST(url,query,myreq);
    } else {
        requestGET(url,myreq);
    }
  }

Como sabemos cuando el estado que devuelve el servidor es 200, significa que todo esta Ok, la información ya la hemos capturado en la variable "item".
Les recomiendo leer algunas anotaciones del protocolo http para entender mejor de que va esto:
link

Anexo el código fuente: aqui

En el post de mañana doy unos ejemplos para usar esta sencilla librería.
Bueno para darse una idea pueden tener un resultado como este XD..visita Vicux..(Comunidad Piurana de Software Libre)

//Dudas o Sugerencias :
luisan_182@hotmail.com
luantoc182@extpiura.com