Techno Paper: Google Introduces AJAX Libraries API

With plenty of open source AJAX libraries out there (and increasing), Google has come up with the idea of host the most popular once. This will developers instant access to AJAX libraries like jQuery, Dojo etc. Web developers ; I would say mostly people who have blogs and wikis hosting on free services like blogger, wordpress etc, will now be able to use these libraries by just loading them using the new API.

AJAX Libraries API will simply help you to loading architecture for the most popular open source Java Script libraries. These libraries are hosted on Google's servers. Developers can use Google's API loader's google.load method to load the library. Presently, Google hosts the following Java Script libraries:

jQuery
Dojo
prototype
script.aculo.us
MooTools

And Google promises to keep the list growing! Google has struck a deal with all these libraries to host the latest versions as they release. But I am not sure for how long they will retain the old versions. The major advantage of using this API will be the ability to access these open source libraries even without hosting them. Also, you will be able to use features from multiple libraries in your blog or web site. I am the major reason for Google to come up this library API and hosting them is to enable these Java Script libraries to their App Engine. With these libraries at developers disposal developers will be able to embed lot of UI and client side features to the web applications they develop.

All these look good, but did Google miss somebody? Or did they ignore them? I am talking about Ext JS. Ext has been recently "hot" on web for wrong reasons! I was just wondering Google really missed them or ignored them? And I don't have to comment on YUI. I am sure, Yahoo's java script library is not going to make to the list!Polities aside; lets have look at how to use this library!

Introducing google.load() Method
Google with its vast API set, has a very simple API loading technique. To use the basic API you need to load a JS from the URL http://www.google.com/jsapi. Some API will require you to have the Google API key. But the AJAX library do not require one. Developers load the necessay Java Script files on the client side using a simple method google.load(). For example; if we need to load jQuery version 1.2.3:


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

Ok, so now I have the jQuery library load. How do I use it? Google also provides a callback function which is invoked once the module (library) is loaded. The callback method is specified by google.setOnLoadCallback(myMethod) method. And finally, myMethod will have all my logic!

Trying an example!
To have a feel of the need API, I just tried out some simple tasks using jQuery. Here is the example and its source:

<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.3");

google.setOnLoadCallback(function() {

 $("a").click(function() {
     alert("Hello world!");
   });

 $("#sam").click(function() {
  alert("display");
  $("#hidden").show();
 });

});
</script>
</head>
  <body> 
   The content begins.. <br/>
   <div class="divStyle newStyle">
 <a href="http://www.google.com">This</a> is a test </div>   <br/>
   <div id="sam"> This is another Test <div id="hidden" style="display:none">hidden text</div></div>
   The content ends.. <br/>
  </body>
</html>

I will give a demo on adding some useful components and widgets from these libraries later. Till then bye!

Techno Paper

May 28, 2008

Google Introduces AJAX Libraries API

No comments :