What is Google AJAX API?

Google’s AJAX APIs let you implement rich, dynamic web sites entirely in JavaScript and HTML. You can add a map to your site, a dynamic search box, or download feeds with just a few lines of JavaScript.

In human terms, it loads common JavaScript frameworks such as MooTools, jQuery, Prototype, jQuery UI and of course even Google Maps without having to have the (.js) files on your server.

That’s great, but what does that mean for me?

Bandwidth, bandwidth, bandwidth, cache headers, and bandwidth.

Because jQuery, like images, must be downloaded onto the users computer before it can be used. If you have a slow server this can be a painful process especially if you use multiple JavaScript libraries.

Google is lightning fast, always. To have one, maybe two less items to download from your server not only saves bandwidth, but it saves you time. You don’t have to go to jQuery and download the latest version, upload it to your server, and type in the path to the (.js) file. You also don’t have to worry about having relative or absolute URLs due because of pretty URLs (seo friendly URLs).

You just add a two lines of code to the head of your template, sometimes even one, and you’re done. Google automatically sends a request to their server to download all of the JavaScript you’re requesting, cache the headers, and return it back to you.

Even better yet, the code is cleaner. You only need one line of code to load in multiple JavaScript libraries instead of your usual 3-5 lines of code.

Enough already, just show me how

Glad you asked. Below is the example XHTML page used to load in jQuery and execute a test function to ensure that it works.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">$(document).ready(function(){$(".expanded").hide();$("a").click(function(){$(".expanded").fadeIn(600);});})</script>
 
<p class="expanded">Who uses paragraphs anymore?</p>
 
<a href="#">Expand!?</a>

Now, we’ve loaded in jQuery and are able to get cracking away. However, what if we want to add more than one library? Simple. All we do is add another instance of google.load();. Below is an example with both jQuery and jQuery UI.

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

Want to use the latest version of jQuery so you never have to update the code to match the latest version? No problem use this instead.

<script type="text/javascript">google.load("jquery", "1.3");</script>

What this says is: “Find the latest stable release that starts with 1.3.x”. In our case it automatically found v1.3.2.

Pretty nifty eh? What’s even better is that jQuery THEMSELVES are using Google’s server to call their own JavaScript library. If you view the source code of http://www.jquery.com/ you’ll see on Line 9 the following code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

This is also another way of calling jQuery from Google’s servers.

That’s it! Enjoy one less heavy server request.