Contenido

Google Ajax Libraries API, ajax sobre la arquitectura Google

27 May

+ 16

Hoy, la comunidad de desarrolladores web ha saltado de alegría al ver el anuncio por parte de Google, de su nuevo proyecto, Google Ajax Libraries API.

Sin duda Google dispone, hoy en día, de una infrastructura capaz de resistir a todos los usuarios de internet accediendo simultáneamente, pues es muy inteligente por su parte, ofrecerla para que fines como este. Con Google Ajax Libraries API, podremos acelerar la carga de nuestro Javascript y tener de forma estandarizada los más importantes frameworks javascript.

Actualmente la lista es la siguiente:

* No son frameworks JS, pero tambien están disponibles dentro de Google Ajax Libraries API.

Aunque conociendo a Google, no descartaría que fueran añadiendo nuevas librerías.

¿Como usarlo?

Para usar este nuevo invento, tenemos 2 opciones:

1) Cargar la librería directamente

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

De esta forma estaremos cargando directamente desde los servidores de Google la versión 1.6.0.2 de Prototype. Si queremos cargar cualquier otra librería, cargaremos la ruta correspondiente:

//jQuery
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

// Prototype
http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js

//Script.aculo.us
http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js

//MooTools
http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js

//Dojo
http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js

2) Cargarmos mediante el sistema de carga de Google Ajax Libraries API, google.load().

< strong><script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");

// on page load complete, fire off a jQuery json-p query
// against Google web search
google.setOnLoadCallback(function() {
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",

// on search completion, process the results
function (data) {
if (data.responseDate.results &&
data.responseDate.results.length>0) {
renderResults(data.responseDate.results);
}
});
});
</script>

Como podemos observar en negrita, vemos que la ruta del javascript que hemos de cargar es diferente y no hace referencia a ninguna librería, ya que simplemente contiene el código necesario para que podamos cargar la librería que deseemos.

La función google.load()

google.load(name, version, opt);

La función google.load() es la clave para entender el sistema anterior, ya que ella es la que se encarga de cargar la librería que solicitemos.

google.load("jquery", "1");

Esta función recibe 3 parámetros, el primero indica la librería que queremos cargar, pudiendo ser cualquiera de estos casos.

google.load("jquery", "1.2.3");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

El segundo, indica la versión de la librería que queremos cargar. Este parámentro es un poco especial, ya que si indicamos que queremos la versión 1.2 de jQuery, Google automáticamente devolverá la ultima versión disponible de la rama 1.2. De igual forma si indicamos la versión 1, nos devolverá la más alta de la rama 1, osea la 1.2.3. Esto nos permite trabajar con versiones antiguas, o más nuevas dependiendo del tipo de desarrollo que estemos efectuando.

El último parámetro será usado para las opciones personalizadas de cada unos de los framework, por ejemplo, MooTools, jQuery y Dojo permite solicitar el código sin comprimir.

google.load("mootools", "1.11", {uncompressed:true});

Usandolo con herramientas de Google

Algo que tambien me ha gustado ha sido que la función google.load(), integre la posibilidad de cargar el API de Google Maps, Google Ajax Search, Google AJAX Feed API o Google data APIs. Algo que nos permite reducir considerablemente las llamadas a las diferentes API’s para cargar el código.

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
    <script type="text/javascript">
      google.load("maps", "2");
      google.load("search", "1");

      // Call this function when the page has been loaded
      function initialize() {
        var map = new google.maps.Map2(document.getElementById("map"));
        map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

        var searchControl = new google.search.SearchControl();
        searchControl.addSearcher(new google.search.WebSearch());
        searchControl.addSearcher(new google.search.NewsSearch());
        searchControl.draw(document.getElementById("searchcontrol"));
      }
      google.setOnLoadCallback(initialize);
    </script>

  </head>
  <body>
    <div id="map" style="width: 200px; height: 200px"></div>
    <div id="searchcontrol"></div>
  </body>
</html>
  • muy bueno, lo lei el otro día en Ajaxian, aquí dejo un ejemplo usando MooTools.

    google.load(«mootools», «1.11»);
    google.setOnLoadCallback(function() {
    window.addEvent(‘resize’, function() {
    alert(«redimensionando»);
    });
    });

    Unicamente se carga MooTools y se añade un evento de resize a la ventana, cuando esta se redimensiona el alert salta, más que nada para que se compruebe como sin tener que descargar MooTools podemos hacer uso de el 🙂

  • No se… el segundo método de carga ( usando google.load() ) a lo mejor vale la pena en algunos casos, pero no siempre.

    Seguramente cargar así otros APIs de Google sea mucho más cómodo, pero ¿cargar por ejemplo Mootools o jQuery de esta manera beneficia en algo?

  • @dehiv: Hombre, como mínimo la potencia de la infrastructura de Google. Al igual que delegamos las imagenes, a FlickR, ImageShack,… delegamos a Google el Javascript y nos olvidamos del JS, transferencia,…

    Cambiar de versión, sería tan simple como cambiarla directamente desde el google.load() e incluso podríamos definir una rama muy abierta y estar siempre a la última sin necesidad de cambiar nada.

    No se me ocurren, ahora mismo, nada más.

  • Hey!! no lo han notado? les ha pasado como a mi? en los ejemplos de google ponía jquery 1.2.6 y me sorprendió un montón.

    Pues si.. en la página de Jquery hay versión nueva…a ver quien me dice que trae … y cuando hicieron el cambio porque se me había pasado del todo.

  • @aNieto2k: Si, si como decía, habrá casos en los que será muy util, y lo que comentas de poder «desentenderte» (por decirlo de alguna forma, 🙂 ) de las versiones puede ser interesante… pero yo, a primera vista, también veo algunos detalles que creo que se podrían mejorar.. y que seguro que lo harán, por ejemplo:
    si no me quivoco, el utilizar google.setOnLoadCallback(….), que vendría a ser como usar un evento onLoad de toda la vida, supone perder la potencia del evento DomReady de Mootools o Ready de jQuery.

    Supongo que igual que pasa con todo, habrá que valorar para cada proyecto si conviene o no utilizarlo.

  • La idea está muy bien.

    Si se popularizan tanto estos frameworks se podrían hasta estandarizarlos e incrustarlos de alguna manera en los navegadores.

    Esto sería un primer paso, pero ¿que garantía tengo yo de que ese archivo no me lo va a modificar o borrar google? ¿Hasta que punto es conveniente usarlo?

    Voy a seguir leyendo e informándome …

  • Prefiero que mis paginas dependan unicamente de posibles errores de mi servidor. De esta forma mis paginas dependen de los posibles errores de mi servidor y de los posibles errores del servidor de google.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.