Ajax o el milagro de Xmlhttprequest

Por dactivo el 9 de Septiembre, 2005, 8:53 en Ajax
Todo programador sabe apreciar la originalidad y buen hacer con el que Gmail, Google Groups, Google Suggest, Google Maps... se han programado, y todos los que saben un poquito hablan del maravilloso mundo del xmlhttprequest. Es como el amigo que uno tiene que hizo una cosa sorprendente pero que nadie conoce.
En este artículo voy a intentar explicar un poco los entresijos de algo que puede ser verdaderamente beneficioso para cualquier cerebrito que quiera mejorar la navegación de sus páginas.

En primer lugar resaltemos algunas de las prestaciones que luce este nuevo planteamiento:

-xmlhttprequest es un objeto que nació en el Internet Explorer 5 como un ActiveX, y que después pasó a formar parte de los principales navegadores: Mozilla, Safari etc...
Es un objeto que se crea desde javascript, y que apunta a una página en el servidor.

- no hace falta moverse de página para actuar en el servidor y responder al cliente. Para poner un símil, hace lo que las llamadas en Actionscript dentro de un flash hacen a otras páginas sin que el cliente lo perciba.

-xmlhttprequest además de poder actuar en el servidor, puede devolver datos, por ejemplo, XML, pero también texto que podemos utilizar a nuestro antojo. En el primer caso, por ejemplo, podríamos utilizar el DOM para reestructurar la web a partir de un documento xml, y en el segundo caso, si utilizamos texto, podría mandar de vuelta la confirmación de que todo fue bien en el servidor.

-Por último y no menos importante, hay una limitación de seguridad, y es que no se puede hacer una llamada a una página que no tenga el mismo dominio que la página que contiene el javascript. Es decir, que no podemos llamar a un web service directamente.

Todo esto llevado al séptimo arte es el motor principal de Gmail con un javascript supersofisticado,  y creo que cualquiera puede apreciar la rapidez y amenidad con que se navega en el popular proveedor de correo.

Pero bueno, dejémonos de prolegómenos y hinquémosle el diente al asado!!!

    1.- Creemos este formulario:

<form id="detalles" name="detalles" method="post">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td nowrap="nowrap" class="items">Metatags:</td><td>
        <textarea cols="40" rows="2" name="metatags" id="metatags"></textarea>
        </td>
        </tr>
        <tr>
        <td nowrap="nowrap" class="items">Descripción:</td><td>
        <textarea cols="40" rows="2" name="descripcion" id="descripcion"></textarea>
        </td>
        </tr>
        <tr>
        <td nowrap="nowrap" class="items">Descripción larga:</td><td>
        <textarea cols="40" rows="2" name="descripcionlarga" id="descripcionlarga"></textarea>
        </td>
        </tr>
        </table>
        <div id="grabar" class="buttons1"><a href="#">Grabar</a></div>
</form>

    2.-Como habremos visto, el hyperlink de "Grabar" es una llamada a una función updateDatos. Esta función pone en marcha todo el tinglado!!.

Antes de ver dicha función debemos crear el javascript siguiente:

        function getHTTPObject()
        {
          var xmlhttp;
   
          if (!xmlhttp)
          {
                               
            if(window.XMLHttpRequest)
            {
                   
                    try
                    {
                       
                        xmlhttp = new XMLHttpRequest();
       
                    }
                   
                    catch(e)
                    {
       
                            alert("mensaje error 1.1")
                            xmlhttp = false;
                    }
    // branch for IE/Windows ActiveX version
            }
            else if(window.ActiveXObject)
            {
               
                       try
                       {
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                      }
                      catch(e)
                      {
                        try
                        {
                         
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                         
                        }
                        catch(e)
                        {

                        alert("mensaje de error 1.2")
                          xmlhttp = false;
                        }
                    }
            }
               
         }
        return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object


Lo que hemos hecho ha sido crear una instancia del objeto Xmlhttprequest, en el caso de Mozilla y Safari es el objeto XMLHttpRequest(), y en el caso de Internet Explorer, o ActiveXObject("Msxml2.XMLHTTP"); o ActiveXObject("Microsoft.XMLHTTP").

Todo lo demás son comprobaciones que son útiles para ofrecer una mayor capacidad de respuesta al cliente. Un buen sistema de aviso de errores, y esto lo digo para cualquier tipo de programación, debe contener el error y asignarle un número, que a su vez tendríamos referenciado, al estilo de programas de consola, para que el soporte técnico supiera enseguida de qué se trata.

Sigamos, creemos la función de updateDatos():

function updateDatos(){

 var urldatos = "xmlhttp_insert.cs.asp?"; // The server-side script
 var metaValue = document.getElementById("metatags").value;
 var descripValue=document.getElementById("descripcion").value;
 var descriplargaValue=document.getElementById("descripcionlarga").value;

    strUrl=urldatos + "metas=" +escape(metaValue) + "&descrip="+ escape(descripValue)+"&descriplarga="+escape(descriplargaValue);
   
    if(http)
    {   

            http.open("GET",strUrl, true);
            http.setRequestHeader('Accept','message/x-jl-formresult')
            http.send(null);

    }
    else
    {
   
            alert("Hubo un problema al conectar. Consulte con soporte técnico");

    }  
 
}


Aquí utilizamos la instancia del objeto xmlhttprequest y le asignamos la url de destino:
http.open("GET",strUrl, true);

El string con todos los parámetros están añadidos a "urldatos". Por cierto, siempre hacer escape!! ya que se pasa por GET y así le damos el formato adecuado a la cadena.

 http.onreadystatechange = handleHttpResponse;
http.send(null);

Controlamos el estado de nuestra conexión con la url de destino de esta manera. La función handleHttpResponse actuara según si la conexión prospera o no.

function handleHttpResponse() {

  if (http.readyState == 4) {
   
    // Split the comma delimited response into an array
   
   
    results = http.responseText;
     if (http.status == 200) {
           
            if(results=="OK" ){
               
              alert("OK:<br>Base de datos actualizada.");
           
            }
           
            else{
                   
             alert("Hubo un problema actualizando, inténtelo de nuevo, y si devuelve error, por favor, consulte soporte técnico");
           
            }
    }else{
       
       alert ("Hubo un problema actualizando, inténtelo de nuevo, y si devuelve error, por favor, consulte soporte técnico");
   
    }   
 
   
  }
}

"http.readyState == 4" nos dice que la conexión se ha realizado con éxito, y "http.status == 200" que la página existe. results=="OK", simplemente nos informa de cómo se realizó todo en el servidor.

Bueno, nada más me queda recomendaros el siguiente link donde se amplian bastantes conocimientos:

http://jibbering.com/2002/4/httprequest.html

y para los que queréis el código directamente, un ejemplo sencillito y que aproveche!!:

<script language="javascript" type="text/javascript">

        function getHTTPObject()
        {
          var xmlhttp;
   
          if (!xmlhttp)
          {
                               
            if(window.XMLHttpRequest)
            {
                   
                    try
                    {
                       
                        xmlhttp = new XMLHttpRequest();
       
                    }
                   
                    catch(e)
                    {
       
                            alert("No se puede realizar la actualización de datos, consulte con soporte técnico")
                            xmlhttp = false;
                    }
    // branch for IE/Windows ActiveX version
            }
            else if(window.ActiveXObject)
            {
               
                       try
                       {
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                      }
                      catch(e)
                      {
                        try
                        {
                         
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                         
                        }
                        catch(e)
                        {

                        alert("No se puede realizar la actualización de datos, consulte con soporte técnico")
                          xmlhttp = false;
                        }
                    }
            }
               
         }
        return xmlhttp;
}

   
   
    function supportsDynamicLabels()
        {
   
         return     document.getElementById &&   
        (window.attachEvent ||window.addEventListener) && 
         null == navigator.appVersion.match(/Safari/d+$/);    
       
         }

function handleHttpResponse() {

  if (http.readyState == 4) {
   
    // Split the comma delimited response into an array
   
   
    results = http.responseText;
     if (http.status == 200) {
           
            if(results=="OK" ){
               
                document.getElementById("loading").innerHTML="OK:<br>Base de datos actualizada.";
           
            }
           
            else{
                   
                    document.getElementById("loading").innerHTML="Hubo un problema actualizando, inténtelo de nuevo, y si devuelve error, por favor, consulte soporte técnico";
           
            }
    }else{
       
        document.getElementById("loading").innerHTML="Hubo un problema actualizando, inténtelo de nuevo, y si devuelve error, por favor, consulte soporte técnico";
   
    }   
   
    setTimeout('document.getElementById("loading").style.display="none"',1500);   
   
  }
}
        function getHTTPObject()
        {
          var xmlhttp;
   
          if (!xmlhttp)
          {
                               
            if(window.XMLHttpRequest)
            {
                   
                    try
                    {
                       
                        xmlhttp = new XMLHttpRequest();
       
                    }
                   
                    catch(e)
                    {
       
                            alert("No se puede realizar la actualización de datos, consulte con soporte técnico")
                            xmlhttp = false;
                    }
    // branch for IE/Windows ActiveX version
            }
            else if(window.ActiveXObject)
            {
               
                       try
                       {
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                      }
                      catch(e)
                      {
                        try
                        {
                         
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                         
                        }
                        catch(e)
                        {

                        alert("No se puede realizar la actualización de datos, consulte con soporte técnico")
                          xmlhttp = false;
                        }
                    }
            }
               
         }
        return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object

function updateDatos(){

document.getElementById("loading").style.display="block";

 var urldatos = "xmlhttp_insert.cs.asp?"; // The server-side script
 var metaValue = document.getElementById("metatags").value;
 var descripValue=document.getElementById("descripcion").value;
 var descriplargaValue=document.getElementById("descripcionlarga").value;

    strUrl=urldatos + "metas=" +escape(metaValue) + "&descrip="+ escape(descripValue)+"&descriplarga="+escape(descriplargaValue);
   
    if(http){   
   
//http.open("HEAD", "/faq/index.html",true);
//     http.onreadystatechange=function() {
  //if (http.readyState==4) {
            //alert("Status is "+http.status)
    //}
 //}
     
    http.open("GET",strUrl, true);
    http.onreadystatechange = handleHttpResponse;
    http.setRequestHeader('Accept','message/x-jl-formresult')
    http.send(null);
    }
    else{
   
    alert("Hubo un problema al conectar. Consulte con soporte técnico");
    }
   
 
}

     
     
    function addEvent(objObject, strEventName, fnHandler) {
      if (objObject.addEventListener)
        objObject.addEventListener(strEventName, fnHandler, false);
      else if (objObject.attachEvent)
        objObject.attachEvent("on" + strEventName, fnHandler);
    }


  function setupLabels() {

          
     addEvent(document.getElementById("grabar"),"click",updateDatos);
     
     }
     
     

         if (supportsDynamicLabels()) {
      addEvent(window, "load", setupLabels);
    }

       


</script>

<BODY>
<div id="loading" style="display:none;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 12px; LEFT: 50px; BORDER-LEFT: black 1px solid; WIDTH: 200px; COLOR: crimson; PADDING-TOP: 20%; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: verdana; POSITION: absolute; TOP: 50px; HEIGHT: 100px; BACKGROUND-COLOR: lightgrey; TEXT-ALIGN: center">
Actualizando
</div>
<div id="lblError">
</div>
<form id="detalles" name="detalles" method="post">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td nowrap="nowrap" class="items">Metatags:</td><td>
        <textarea cols="40" rows="2" name="metatags" id="metatags"></textarea>
        </td>
        </tr>
        <tr>
        <td nowrap="nowrap" class="items">Descripción:</td><td>
        <textarea cols="40" rows="2" name="descripcion" id="descripcion"></textarea>
        </td>
        </tr>
        <tr>
        <td nowrap="nowrap" class="items">Descripción larga:</td><td>
        <textarea cols="40" rows="2" name="descripcionlarga" id="descripcionlarga"></textarea>
        </td>
        </tr>
        </table>
        <div id="grabar" class="buttons1"><a href="#">Grabar</a></div>
</form>

| Referencias (0)
Etiquetas: , ,