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
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!
