Ajax y su ayudante Sarissa

Por dactivo el 19 de Septiembre, 2005, 14:12 en Ajax
En mi artículo anterior os hablaba de las prendas y virtudes de Ajax, y me quedé con la sensación de haberme quedado muy corto en mis explicaciones y en las implicaciones que conlleva este método (no lo llamaré tecnología tal y como explica Jesse James Garrett en http://www.adaptivepath.com/publications/essays/archives/000385.php.

No obstante, ahora que ya tenemos más o menos claro qué es Ajax, cómo se hace con javascript etc... Llega el "momento API"!!!!!

El momento API es el momento de perfeccionamiento de una técnica o de cualquier tipo de programación. Es el momento en el que todo ese código diseminado, "scattered", forma un conjunto y se vuelve algo profesional.

Yo he optado por tomar prestado una API que hasta el momento ha atendido todas mis necesidades. Se trata de la API de Sarissa:

https://sourceforge.net/projects/sarissa/

Es un proyecto "open source" con el que unificamos el uso de Ajax para diferentes navegadores, no sé si Opera y otros, pero sí para Mozilla e Internet Explorer, y KHTML(Konqueror y Safari).

APIs javascript

Quien nunca haya utilizado una API de javascript, pensará una API de javascript? Ese lenguaje horrible que no puede depurarse como los verdaderos lenguajes de programación?
Eso no puede traer nada bueno!!

Pues bien, se equivocan, por supuesto, javascript no es perfecto, pero conocer javascript para un programador web es como el volante para un conductor, y sin javascript, no hay programador web. Suena obvio pero no es tanto así, porque el programador web tiende a aferrarse al lenguaje de servidor y aunque en una gran empresa todo el trabajo está dividido y seguramente no le toque escribir ni una línea de javascript, para optimizar la navegación del usuario, resulta necesario al 100%.

Al igual que antes los locos del javascript debieron adaptarse a los descubrimientos más óptimos de las CSS, ahora que xmlhttpRequest está dando fuerte, a los programadores ya no les queda otra que aprender javascript o se quedarán obsoletos. De hecho, todos los programadores tenemos que reintepretar la web y la forma de programar, y se debe invertir un período en reflexiónar al respecto.


Beneficios de una API:
-Una API de javascript hace como cualquier otra API, centraliza el código, ahorra código y se edita con facilidad

porque sólo hay que modificarlo una vez.

Negativos de una API:
-El código se vuelve más difícil, el programador tiene que aprender nuevos códigos y sin una buena documentación es de difícil modificación.

Tomando todo esto en cuenta, yo principalmente opto por las APIs de javascript pero no las totalizadoras, que hacen todo lo que quieras en tu web, sólo en casos concretos, donde las diferencias de códigos entre navegadores se vuelve más dispar.

El caso más claro de una buen API es la maravillosa y famosa API de dhtmlcentral.com. Es una API que me ha acompañado siempre y que he mejorado con el tiempo.

Qué conseguimos con una API si javascript hace unas tareas muy sencillas? Pues simplemente, unificamos el javascript que utilizan todos los navegadores. Por ejemplo, para ocultar una capa se hace diferente en IE4 que en IE6, Mozilla o Netscape 4.5. Con la API de dhtmlcentral escribimos una línea y lo hace compatible para todos.

Esto mismo conseguimos con Sarissa, más otras tareas relacionadas con el DOM.

Sarissa, la API para Ajax

En este tutorial, voy a tratar 2 métodos de cargar XML con Ajax.
Uno utilizando XmlhttpRequest y otro cargando XML con el objeto load, que en IE pertenece al ActiveX Msxml2.DOMDocument, y que en Mozilla se implementa de otra manera.
No obstante, como decía más arriba, no nos vamos a preocupar de las diferencias entre navegadores porque Sarissa hará los deberes por nosotros.

El resultado con ambos métodos es el mismo. No obstante, xmlhttpRequest, nos ofrece un mejor control sobre el estado de la carga del xml, porque podemos utilizar la propiedad ReadyState.

Como último apunte, Sarissa no se implementa creando una clase Sarissa, sino que se llama de manera estática.

Empecemos de lleno:
1.-Bajamos la API de su web.

2.-Incluimos los js:
<script language="javascript" src="sarissa.js"></script>
<script language="javascript" src="sarissa_ieemu_xpath.js"></script>

3.-Creamos el formulario que describía en mi último tutorial sobre Ajax, pero incluyendo un nuevo enlace que llama a getDatosXML para cargar XML utilizando load:

<div id="lblError">
</div>
<form id="detalles" name="detalles" method="post">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td nowrap="nowrap" class="items" style="visibility:hidden">Metatags:</td><td>
        <textarea cols="40" rows="1" name="metatags" id="metatags"></textarea>
        </td>
        </tr>
        <tr>
        <td nowrap="nowrap" class="items" style="visibility:hidden">Descripción:</td><td>
        <textarea cols="40" rows="1" name="descripcion" id="descripcion"></textarea>
        </td>
        </tr>
        <tr>
        <td nowrap="nowrap" class="items" style="visibility:hidden">Descripción larga:</td><td>
        <textarea cols="40" rows="1" name="descripcionlarga" id="descripcionlarga"></textarea>
        </td>
        </tr>
        </table>
        <div class="buttons1"><a href="javascript:getDatos()">Llenar</a></div>
                <div class="buttons1"><a href="javascript:getDatosXML()">LlenarXML</a></div>
    
</form>

4.-Ahora incluyamos las funciones getDatos y getDatosXML:
var xmlhttp=null;

function getDatos(){
  if(xmlhttp && xmlhttp.readyState!=0 && xmlhttp.readyState!=4){
    alert("espere mientras la conexión anterior termina")
    return;
  }
strUrl="xmlhttp_select.cs.asp?docid=4"

xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", strUrl, true);
xmlhttp.onreadystatechange=handlergetDatos
xmlhttp.send(null);

}

function getDatosXML(){
strUrl="xmlhttp_select.cs.asp?docid=4"

respuestaXML= Sarissa.getDomDocument();
respuestaXML.async = false;
respuestaXML.load(strUrl);

        mostrarDatos(1)

}

Como vemos más arriba, hemos reducido mucho el código, ya no tenemos ninguna función que se encarga de crear la compatibilidad del objeto xmlhttpRequest. De esto se encarga Sarissa, que ha redefinido el objeto, un poco como se hace con los métodos en .Net con la propiedad "override".

De momento, ya vemos un ahorro de código, y además el sistema está mejorado porque Sarissa para IE, va a hacer un loop a través de los diferentes Activex que utiliza IE para crear el xmlHttpRequest hasta que encuentre el apropiado. Es decir, los activeX:

"Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP.

Para la función getDatosXml. También ahorramos porque la forma de crear el objeto, lo hará de modo conveniente dependiendo del navegador, y además para IE mejorará el método haciendo un loop buscando la clase apropiada entre:

"Msxml2.DOMDocument.5.0", "Msxml2.DOMDocument.4.0", "Msxml2.DOMDocument.3.0", "MSXML2.DOMDocument", "MSXML.DOMDocument", "Microsoft.XMLDOM"

En mi código, he incluido una mejora:

if(xmlhttp && xmlhttp.readyState!=0 && xmlhttp.readyState!=4){
    alert("espere mientras la conexión anterior termina")
return;
}

Con lo cual nos aseguramos que las diferentes conexiones no se pisan.


5.-Incluyamos la función que controla la carga de datos del xmlhttprequest:

function handlergetDatos(){

    if(xmlhttp.readyState==2)
    {
   
    document.getElementById("lblError").innerHTML="Cargando datos";
   
    }
   
    if(xmlhttp.readyState==3)
    {
   
    document.getElementById("lblError").innerHTML="Datos cargados";
   
    }
   

    if(xmlhttp.readyState==4)
    {
   
    document.getElementById("lblError").innerHTML="Carga de datos completada";
            if(xmlhttp.status==200)
            {

respuestaXML=xmlhttp.responseXML

mostrarDatos();

 
              }else{

                alert("no se encuentra el documento xml")
               
            }

    }


}


Aquí hemos mejorado la forma de hacer un seguimiento del estado de la conexión.

Un detalle a tener en cuenta es que al final la función mostrarDatos, va a utilizar el objeto respuestaXML. En el caso de cargarlo como documento XML usando load. La respuesta xml ya estaá contenida en el objeto mismo,pero en el caso de xmlhttpRequest, respuestaXML equivale a xmlhttp.responseXML.

Desde ese momento ambos XML son iguales y se tratan igual.

6.-Incluimos la función mostrarDatos:

function mostrarDatos(){
numNode=0;
document.getElementById("lblError").innerHTML="";
try{
if(respuestaXML.parseError!=0){
throw "Posible formato erróneo:" + respuestaXML.parseError;
}
        xmlmetatags=Sarissa.getText(respuestaXML.selectNodes("root/message/metatags")[numNode])
        xmldescripcion=Sarissa.getText(respuestaXML.selectNodes("root/message/descripcion")[numNode])
       

xmldescripcionlarga=Sarissa.getText(respuestaXML.selectNodes("root/message/descripcionlarga")[numNode])
   
        Sarissa.clearChildNodes(document.getElementById("metatags"))
        Sarissa.clearChildNodes(document.getElementById("descripcion"))
        Sarissa.clearChildNodes(document.getElementById("descripcionlarga"))
        document.getElementById("metatags").appendChild(document.createTextNode(xmlmetatags))
        document.getElementById("descripcion").appendChild(document.createTextNode(xmldescripcion))
        document.getElementById("descripcionlarga").appendChild(document.createTextNode(xmldescripcionlarga))
           
}
catch(e)
{
    document.getElementById("lblError").innerHTML="error cargando xml."+e+"<br>Lea la descripcíon del error y

póngase en contacto con su departamento técnico:<br>"+Sarissa.getParseErrorText(respuestaXML);
   
}

}

Esta es la función que crea la magia.

Después de haber comprobado que se ha cargado sin problemas, seguimos haciendo comprobaciones:

    if(respuestaXML.parseError!=0){

Con esto vamos a saber si el xml está mal formado.
Sarissa en este sentido nos ofrece 1 propiedad:
respuestaXML.parseError
que debería ser 0 si no hay error.

Y un método para recuperar el error:
Sarissa.getParseErrorText(respuestaXML)

Ahora es cuando utilizamos el segundo .js que incluimos sarissa_ieemu_xpath.js:
xmlmetatags=Sarissa.getText(respuestaXML.selectNodes("root/message/metatags")[numNode])

Con el método getText vamos a recuperar el valor del nodo que le indiquemos. Para eso utilizamos el selectNodes si hay

más de una misma etiqueta (en este caso metatags) con un índice (numNode), o si fuera sólo uno, selectSingleNode.

Fin
Hasta aquí llega mi tutorial, un método muy bueno que utiliza google, ver:
http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html

Es utilizar en vez de una respuesta xml, una respuesta de texto, y ejecutarla como javascript, así:
eval(_xmlHttp.responseText)

Pero el lado de la fuerza incluye muchos otros métodos relacionados con hojas de estilo XML ( http://www-128.ibm.com/developerworks/xml/library/x-xslt/?article=xr ) que exploraremos otro día.Sólo mostraros un ejemplo de diccionario basado en Google Suggests:
http://www.objectgraph.com/dictionary/


Miguel Ángel.
Programador.

 

| Referencias (0)