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>
