aNieto2K

Hace unos meses hablabamos de los cambios en Google Reader para adaptarlo a las posibilidades del iPhone/iPod Touch.

Estás mejoras ayudaban a los usuario de estos dispositivos a ver claramente los artículos sindicados sin tener que ampliar o reducir el contenido para poder leerlo.

Ahora la gente de Google Reader estrena un nuevo rediseño enfocado más aún a facilitar esta tarea, mediante el uso de Ajax, consigue mitigar las recargas de páginas y se centra únicamente en el contenido.

Podemos ver una demos, pulsando aqui.

Via Ajaxian, descubro Using.js, un script que nos permite usar javascript ondemand sin ningún tipo de complicaciones. Para los que no sepan que es el Javascript on Demand, es aquel javascript que cargamos cuando lo necesitamos y no al principio de la ejecución de la página.

De esta forma, ya hemos visto alguna vez que podemos optimizar el javascript que enviamos a cada usuario, dependiendo de lo que el usuario necesite. Con using, hacer esto es todavía más fácil.

Declaramos los scripts a usar

Lo primero que hemos de hacer, es declarar en el header las posibles librerías que vayamos a usar, para ello usaremos el método register() al que le informaremos un identificador que lo relacionará con la URL del script.

using.register("jquery", "/scripts/jquery-1.2.3.js");

Usando los scripts declarados

Para usar el script definido, deberemos indicar el identificador que queremos usar, y en ese momento cargará el script desde la URL que informamos con anterioridad.

using("jquery"); // loads jQuery and de-registers jQuery from using
$("a").css("text-decoration", "none");

Usandolo los scripts asincronamiente

Otra opción interesante es la de usar los script de forma asincrona, para ello tendremos que indicarlo en la declaración del script.

using.register("jquery", true, "http://cachefile.net/scripts/jquery-1.2.3.js");
using("jquery", function() {
$("a").css("text-decoration", "none"); //async callback
});

Descargar / Demo

Cuando trabajamos con Javascript nos encontramos que por culpa de las diferencias entre los diferentes navegadores, tenemos que condicionar nuestro código dependiendo de estas diferencias. Para ello, y por la comodidad y claridad que aportan al código, los frameworks javascript llegan, y en masa, para hacer felices y fáciles las horas que dedicamos a este lenguaje.

Personalmente siempre que puedo, los evito. Por lo menos para hacerlo yo, aunque sea solo una vez, pero la comodidad de uso y la seguridad de que va a funcionar en la mayoría de casos, engancha.

Por eso, si estamos pensando en usar uno de ellos para nuestras aplicaciones, debemos conocer las posibles alternativas de las que podemos hacer uso.

1. Prototype (http://www.prototypejs.org/)

Pese a ser la más usada, es la que menos conozco de las más conocidas. Famosa por su peso y la integración con script.aculo.us. Muchisima documentación.

Ejemplo

//Nuevo elemento
var a = new Element(’a', { ‘class’: ‘foo’, href: ‘/foo.html’ }).update(”Next page”);
//Ajax
new Ajax.Request(’/some_url’,
{
method:’get’,
onSuccess: function(transport){
var response = transport.responseText || “no response text”;
alert(”Success! \n\n” + response);
},
onFailure: function(){ alert(’Something went wrong…’) }
});

Documentación / Descargar

2. MooTools (http://mootools.net/)

El primer framework que me enamoró, sin duda llegué atraido por la vistosidad de Moo.fx. Destinada principalmente para complementar el diseño de las aplicaciones web, con una gran cantidad de efectos. Todo ello sin descuidar las funcionalidades del día a día. Importante tener en cuenta la nueva versión 1.2 que será completamente diferente.

Ejemplos

// Crear un elemento
new Element(’a', {
’styles’: {
‘display’: ‘block’,
‘border’: ‘1px solid black’
},
‘events’: {
‘click’: function(){
//aaa
},
‘mousedown’: function(){
//aaa
}
},
‘class’: ‘myClassSuperClass’,
‘href’: ‘http://mad4milk.net’
});
//Ajax
var myAjax = new Ajax(url, {method: ‘get});
myAjax.request();

Documentación / Descargar

3. jQuery (http://jquery.com/)

Mi nuevo amor, hace cosa de un mes, que en los ratos libres voy migrando heySilver a jQuery. Intentando aprender los grandes y mejorando el código semana a semana. Sin lugar a dudas he descubierto que pese a no disponer de muchos efectos ni transiciones, dispone de todo lo necesario para hacer lo más fácil posible el trabajo diario.  La posibilidad de usar xPath y Selectores CSS para encontrar elementos de nuestro HTML es simplemente una maravilla.

// Nuevo elemento
$(”#elemento span”).append(’<p class=”clase”><a href=”…”>Enlace</a></p>’);
// Ajax
$.ajax({
type: “POST”,
url: “some.php”,
data: “name=John&location=Boston”,
success: function(msg){
alert( “Data Saved: ” + msg );
}
});

Documentación / Descargar

4. MochiKit (http://www.mochikit.com/)

Nunca he tenido la oportunidad de meterle mano, quizas ha sido por falta de tiempo, quizas por falta de interes o quizas la poca claridad del código, pero si revisamos la documentación nos damos cuenta de que no es un framework que podamos desechar sin por lo menos dedicarle un par de semanas.

//Nuevo elemento
P({”class” : “clase”});
//Ajax
var url = “/src/b/bo/bob/MochiKit.Async/META.json”;
var d = loadJSONDoc(url);
var gotMetadata = function (meta) {
if (MochiKit.Async.VERSION == meta.version) {
alert(”You have the newest MochiKit.Async!”);
} else {
alert(”MochiKit.Async ”
+ meta.version
+ ” is available, upgrade!”);
}
};
var metadataFetchFailed = function (err) {
alert(”The metadata for MochiKit.Async could not be fetched :(”);
};
d.addCallbacks(gotMetadata, metadataFetchFailed);

Documentación / Descargar

5. Script.aculo.us (http://script.aculo.us/)

Aunque técnicamente es un complemento de prototype, ya que sin él no funciona, es posiblemente más famoso que el propio Prototype. Con él todos los efectos, transiciones y transformaciones son mas fáciles desde que script. aculo.us apareció.

//Nuevo elemento
element = Builder.node(’p',{className:’error’},’An error has occurred’);
// Ajax
new Ajax.Request(’/foo/bar’, {method:’post’, postBody:escape(’thisvar=true&thatvar=Howdy’)});

6. Rialto (http://rialto.improve-technologies.com/wiki/)

Otra gran desconocida de este mundillo de líneas de código, pese a no estar compuesta de una gran cantidad de funcionalidades diarias, está cargado de widgets de fácil instalación que merece la pena ver.

//Nuevo Elemento (Combo)
var comb = new rialto.widget.Combo([["value1","text1"],["value2","text2"],["value3","text3"]],”MyComb”,5,10,100,CADRE2,{position:”absolute”,heightItem:25,suggest:false,enable:true});
//Ajax
var remote=new rialto.io.AjaxRequest({
url:’rialtoModel.xml’,
method: ‘get’,
callBackObjectOnSuccess:this,
withWaitWindow:false,
onSuccess: this.parseXmlForListValue
}) ;

Documentación / Descargar

7. Dojo (http://dojotoolkit.org/)

Documentación / Descargar

8. Spry Framework (http://labs.adobe.com/technologies/spry/)

Documentación / Descargar

9. ASP.NET Ajax Framework (http://asp.net/ajax/)

Documentación / Descargar

10. Clean Ajax (http://sourceforge.net/projects/clean-ajax/)

Documentación / Descargar

11. YUI (http://developer.yahoo.com/yui/)

Documentación / Descargar

12. Ext (http://extjs.com/)

Documentación / Descargar

13. Base2 (http://code.google.com/p/base2/)

Documentación / Descargar

14. DOMAssistant (http://domassistant.com/)

Documentación / Descargar

Muchos, pero muchos más.

Uno de los problemas con los que nos encontramos al usar Ajax en nuestras aplicaciones es que nos es imposible acceder, mediante javascript, a contenidos de otro servidor usando el el objeto XMLHTTPRequest(), debiendo recurrir a alternativas algo “sucias”, por ello la W3C decidió dotar a este objeto la posibilidad de trabajar en cross-domain, osea entre diferentes dominios. Esto facilitaría, por ejemplo la lectura de feeds, o cualquier tipo de contenido servido por páginas externas a nuestro dominio.

La aparición del primer borrador por parte de la W3C, hizo que los principales navegadores centraran su atención en esta nueva funcionalidad y se pusieran manos a la obra para dotar a sus navegadores de tan esperada y necesaria funcionalidad.

Con la aparición de un navegador que dije que no volvería a nombrar proximamente, apareció otra vez el dilema. XDomainRequest() ha sido el desencadenante, al alejarse del estandar ofrecido por la W3C.

Según la página del propio Microsoft, el uso de este nuevo objeto sería así:

// 1. Creamos el objeto XDR
xdr = new XDomainRequest();

// 2. Abrimos la conexión con el servidor usando el método POST
xdr.open(”POST”, “http://www.contoso.com/xdr.txt“);

// 3. Enviamos información al servidor
xdr.send(”data to be processed”);

Como podemos ver, esto se parece a la actual forma de usar el objeto XMLHttpRequest() con la diferencia del nombre del objeto y de que la url a la que solicitamos la información se trata de una URL absoluta en lugar de una relativa.

Algo similar a lo propuesto por la W3C, que era extender al objeto XMLHttpRequest() con la capacidad de acceder a servidores remotos sin necesidad de modificar el código existente.

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.anieto2k.com/.../datos.php", true);
xhr.onreadystatechange = function(){
  if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
      document.body.innerHTML = "Respuesta: " + xhr.responseText;
    } else {
      document.body.innerHTML = "ERROR";
    }
  }
};
xhr.send(null);

Como podemos ver la diferencia nos hace recordar el odiado ActiveX() y las condiciones tan feas que hemos de hacer para hacer compatibles nuestros navegadores. ¿Ahora con la nueva versión tendremos que añadir una línea más?

var ajax =  function() {
  if (windows.XDomainRequest) { //IE8
	return new XDomainRequest();
  } else if (window.XMLHttpRequest) { //FF, Opera, IE7
    	return new XMLHttpRequest();
  } else if (window.ActiveXObject) { //IE6
  	return new ActiveXObject(’Microsoft.XMLHTTP’)
  } else { //No Ajax Compatibles
    	alert(”No hay ajax”);
   	return null;
  }
}

¿Nos encontramos con un nuevo ActiveX() (versión exclusiva para Internet Explorer 6.0) o será el nuevo innerHTML (Aceptado como parte del estandar tras ser una invención de Microsoft)?

Con este título la gente de IBM nos muestra un artículo bastante interesante en el que vemos una forma muy interesante de hacer nuestras llamadas asincronas mediante javascript (Ajax), principalmente se trata de una función que como veremos más adelante inteta cubrir todos los flancos que pueden hacer fallar la experiencia asincrona.

Función propuesta completa

function getResource(uri, data_callback, error_callback, timeout) {
    var tryAgain = function () {
      getResource(uri, data_callback, error_callback, timeout);
    }
    var r = new XMLHttpRequest();
    var timer = setTimeout(
        function() {
            r.abort();
            r.onreadystatechange = null;
            setTimeout(tryAgain, timeout);
        },
        timeout);
    r.open("GET", uri, true);
    r.onreadystatechange = function() {
        if (r.readyState != 4) {
            return;
        }
        clearTimeout(timer);  // readyState==4, borramos timer
        if (r.status==200) {  // "OK status"
              data_callback(r.responseText);
        }
        else if (r.status==304) {
            // "Not Modified": No modificamos la salida
        }
        else if (r.status >= 400 && r.status < 500) {
            // Posible error, posible URI erronea
            error_callback(r)
        }
        else if (r.status >= 500 && r.status < 600) {
            // Server error, volvemos a lanzar con un poco de demora
            setTimeout(tryAgain, timeout);
        }
        else {
            error_callback(r);
        }
    }
    r.send(null);
    return r;
}

Función detallada

Empezando de arriba a abajo, tenemos la variable tryAgain, que no es más que la definición de una función que hace la misma llamada que hemos hecho inicialmente. Esta variable será usada para lanzar la función en caso de necesitar relanzarla por algún motivo.

var tryAgain = function () {
     getResource(uri, data_callback, error_callback, timeout);
   }

Sobre la variable r, recae la responsabilidad de albergar el objeto XMLHttpRequest() que hará posible el asincronismo. Aunque yo propongo algo más completo para asegurarnos que IE6 no se quede fuera de juego.

var r = new XMLHttpRequest();
//Más completo
var r = (XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject(’Microsoft.XMLHTTP’);

Ya con el objeto principal cargado, declaramos la variable timer, que al igual que tryAgain solo será llamada en el caso en se requiera. Esta función se encargará abortar la transacción asíncrona al cubrir el tiempo timeout dado.

var timer = setTimeout(
        function() {
            r.abort();
            r.onreadystatechange = null;
            setTimeout(tryAgain, timeout);
        },
        timeout);

Una vez preparado el camino con las variables necesarias para el funcionamineto, solo nos queda hacer la llamada, en este caso por GET, y controlar los valores retornados para accionar una funcionalidad u otra.

Tratando la respuesta

Al igual que en el ejemplo anterior, la respuesta tambien debería ser tratada teniendo en cuenta un timeout que nos evitará demoras innecesarias. Para ello definiremos nuestra función usando una estructura similar a esta.

var other_data = null;
function processData(this_data) {
    var delay = 1000;     // Esperamos 1 segundo
    if (other_data == null) {
        setTimeout(function() { processData(this_data); }, delay);
        return;
    }
    // Tenemos this_data y other_data
    displayThisAndThat(this_data, other_data);
    // Reseteamos other_data, ya la hemos usado
    other_data = null;
}
// Ejemplo de uso
getResource(uri2,processData,errorData, 5000);

Una de las limitaciones que Ajax es el no poder acceder a datos de un dominio diferente al que estamos. Esto en la mayoría de casos nunca te lo plantearías, pero debería ser posible acceder a sitios externos, por ejemplo API’s, desde el navegador de nuestro cliente aunque sea un dominio diferente al propio.

Hasta ahora la solución era usar un script en tu local a modo de lector de la página externa y devolver el resultado, algo que no siempre podríamos llevar a cabo. Por eso nace Ajax Cross Domain, una aplicación que nos permite hacer esto sin tener que instalar nada en nuestro servidor,únicamente llamar al script que se encarga de obtener los datos y para procesarolos nos ofrece una mini API que nos permitirá trabajar con ellos igual que si fueran de nuestro dominio.

Ejemplo

<script type="text/javascript" src="http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri=(http://216.92.176.52/?name=john)“></script>
<script type=”text/javascript”> alert(ACD.responseText);
</script> 

¿Como funciona?

Como vemos en la imagen, al llamar al script, este controla si se trata de una llamada a tu propio dominio o si es externo, en caso de ser externo gestionará la forma de generar un objeto ACD con los datos procedentes de la petición.