Using Google’s Ajax APIs

To put it simply, Google’s Ajax APIs are cool and useful! I love checking out the Google Code site and seeing new APIs listed, just shows they’re really put a lot of effort into this area of their business.

Google has their different APIs categorized, one of these categories is Ajax, I wanted to write about these APIs in particular as they have real-world uses that can get off the ground quickly.

Google Loader (at the heart of the Ajax APIs)

Google has an asynchronous loading tool, google.load , which is used to load the code of APIs and Libraries. Asynchronous loading of additional JavaScript files is really important for the page’s DOM to be ready as quickly as possible (the reason I created a way to load Google Analytics asynchronously).

The Google Loader let’s you specify your dependencies and a callback function to call when they’ve been loaded and ready to use.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load( 'jquery', '1.2' );
	google.setOnLoadCallback(function(){
		$(document).ready(function(){

			$('body').css({ 'background':'green' });

		});
	});
</script>

The above will load the latest 1.2.x (in this case 1.2.6) version of the jQuery JavaScript library from Google’s CDN and run the jQuery code which will turn the body’s background green. The first script tag loads the core of Google’s JavaScript API on the page (this is required for all of the Ajax APIs and the Google Loader).

Using the Google Loader is the recommend way to load the different components of the Google Ajax APIs and non-Google JavaScript Libraries (e.g. jQuery).

If you plan on using any of the Google Ajax APIs, you should read the documentation on the Google Loader (it’s not that long).

Google Ajax Libraries API

I gave an example above of using the Google Loader to asynchronously load jQuery; the Ajax Libraries API also provides dynamic-asynchronous loading and CDN support for the following JavaScript libraries:

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• SWFObject

SWFObject is relatively a recent addition to this list. One major library you don’t see here is the Yahoo! User Interface (YUI) library, it doesn’t need to be here, YUI has integrated CDN hosting support provided by Yahoo!.

Update: Google Hosting YUI Files on ajax.googleapis.com

If you’re not using dynamic-asynchronous-CDN-hosted JavaScript library support start doing so! The benefits are pretty great. Note: HTTPS might be an issue with this type of hosted library support.

Google Ajax Feed API

This is the really cool one! I feel that the Google Ajax Feed API has so many real-world uses that make it the most valuable API in Google’s Ajax category. I use it on my personal website to fetch and display content that pertains to me from several of the different online communities I use.

I couldn’t say this better or agree more:

“With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API.

The Google AJAX Feed API takes the pain out of developing mashups in JavaScript because you can now mash up feeds using only a few lines of JavaScript, rather than dealing with complex server-side proxies. Making it easy to quickly integrate feeds on your website, as shown below.”

- http://code.google.com/apis/ajaxfeeds/

The feed API is extremely useful. You can pass a URL of a normal web page and it will discover feeds on that page, they can be in any standard feed format (Atom or RSS), and returned to your callback function is a JSON (or XML) representation of the feed and it’s content.

Feeds are universal and ubiquitous on the web making them a viable standard for communicating in a programmatic with web sites/apps.

The documentation for the Ajax Feed API is really useful and complete; you can get up and running with the feed API in minutes.

Photo Feed – Implementation of Google’s Ajax APIs

I thought it would be good to create a simple example to show the power of these Ajax APIs. What I’ve created is a web page which lists my 4 most recent photo albums from Picasa Web Albums. When you click on an album’s title-image it will display all the photos from that album below it.

View My Photo Feed

Since I utilized the Google Ajax APIs, the following is all the JavaScript code I had to write for this project:

(function(){

	function placePhotos( event ) {

		var album = $(this).parent('.Album');
		if ( ! album.hasClass('Flat') ) {
			event.preventDefault();
			album.append('<span class="Loader"></span>');
			getFeed( $(this).attr('href'), function( photos ) {
				album.find('.Loader').remove();
				album.addClass('Flat');
				for ( var i = 0; i < photos.feed.entries.length; i++ ) {
					createPhotoEl( photos.feed.entries[i] ).addClass('Photo').appendTo( album );
				}
			}, 100 );
		}

	}

	function placeAlbums( albums ) {

		var album;
		for ( var i = 0; i < albums.feed.entries.length; i++ ) {
			album = createPhotoEl( albums.feed.entries[i] ).appendTo('#albums');
			album.addClass('Album').addClass( i === 0 ? 'First' : '' );
			album.find('a').click( placePhotos );
		}

	}

	function createPhotoEl( entry ) {

		var link, img;
		img = $(entry.content).find('img');
		img.attr( 'alt', entry.title );
		link = $('<a></a>').append( img );
		link.attr( 'href', entry.link );
		return $('<li></li>').append( link );

	}

	function getFeed( url, callback, numEntries ) {

		google.feeds.lookupFeed( url, function() {
			var feed = new google.feeds.Feed( this.url );
			feed.setNumEntries( numEntries || 4 );
			feed.includeHistoricalEntries();
			feed.load( callback );
		});

	}

	google.load( 'jquery', '1.2' );
	google.load("feeds", "1", { 'nocss':true });
	google.setOnLoadCallback(function(){

		getFeed( 'http://picasaweb.google.com/eferraiuolo', placeAlbums );

	});

})();

APIs and Tools Used on Photo Feed:

• Google Loader
• Google Ajax Libraries API
• Google Ajax Feed API
• jQuery

Using the tools and APIs listed above and my JavaScript code along with a dash of CSS and graphics I was able to create this project is a short amount of time. I couldn’t imagine what it would take to create this project without being able to leverage code like this.