CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Google’s Mission
As you may know, Google’s mission is to organize the world’s information and make it universally accessible and useful. This article discusses how Google is doing just that by providing easy to use JavaScript-based APIs that allow a wide range of web developers, from experts to casual bloggers, to integrate rich and compelling Google provided search and feed data seamlessly into their web pages. More specifically, this article reviews the overall architecture of Google’s AJAX Search and AJAX Feed APIs and shows how to use the technologies they provide. As you’ll see with this article, integrating cool search and Internet feed technologies ranging from traditional web searches to compelling multimedia searches is actually very easy to do without even requiring a hard core AJAX programming background.
Introducing the Google AJAX APIs: AJAX Search and AJAX Feed
Have you ever wanted to integrate rich, multimedia, search, or feed based Internet content into your web applications/pages only to realize that creating your own AJAX infrastructure for doing this turned out to be a daunting task? Fortunately, Google provides a solution to this by providing very easy to use JavaScript APIs known as the AJAX Search and AJAX Feed APIs. These APIs are cousins to the popular Google Maps API and are functionally similar in that you can use them to easily insert rich AJAX content into your pages simply by adding small amounts of JavaScript code.
The AJAX Search API allows you to easily integrate some very powerful and diverse Google based search mechanisms or “controls” onto a Web page with relatively minimal coding. These include:
- Web Search: This is a traditional search input field where, when a query is entered, a series of text search results appear on the page.
- Local Search: With Local Search, a Google Map is mashed together with a search input field and the search results are based on a specific location.
- Video Search: The AJAX Video Search provides the ability to offer compelling video search along with accompanying video based search results.
Other search controls also included in the AJAX Search API are Google News Search, Blog Search, and Book Search; each offer enhanced and specialized search capabilities.
The AJAX Feed API is an Internet feed-based technology that allows web developers to pull down any RSS or Atom feed and integrate it into their web pages purely via JavaScript, all without requiring access to a server. In addition to raw data access to Internet feeds, Google also provides custom solutions built on top of the feed mechanism and offers rich feed-based solutions including a feed driven slideshow control.
Getting Started with the Google AJAX APIs
To get a feel for how to use Google’s AJAX APIs, you’ll review a simple “HelloWorld” AJAX Search application that integrates Google’s powerful search mechanism into a custom web page.
A HelloWorld AJAX Search Example
Getting started with an AJAX Search example is a two-step process. The first step, as with any of Google’s AJAX APIs, involves generating an API key for your usage of the API. This can be accomplished by going to Google’s developer web site, http://code.google.com, and generating an API key. A Google API key allows you to use the AJAX APIs on a particular web site or domain.
After generating a key, you then can create your own HelloWorld example with the AJAX API. Fortunately, this is just a matter of copying and pasting a provide example from http://code.google.com.
Here is the core part of a HelloWorld example provided in the AJAX Search Web site at code.google.com in the samples section (http://code.google.com/apis/ajaxsearch/samples.html/):
<html>
<head>
<script src="www.google.com/uds/api?file=uds.js&v=1.0
&key=YOUR-KEY" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function onLoad() {
// Create a search control
var searchControl = new GSearchControl();
// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());
// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute("VW Beetle");
}
GSearch.setOnLoadCallback(onLoad);
//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading</div>
</body>
</html
In reviewing this code example, you first note that an external JavaScript file, uds.js, is downloaded into the page. The uds.js file provides some of the behind-the-scenes plumbing for enabling the search mechanism into your page. Notice that, to download this file, an API key is passed as an argument to the host providing the JavaScript file.
| Note: In the above example, YOUR-KEY would be replaced with the one generated for you. |
In addition to including the core uds.js file into the page, an additional bit of custom JavaScript is needed to specify some specifics such as what type of search mechanism and some additional settings such as how to render itself on the page.
Notice the first line of code:
var searchControl = new GSearchControl();
It first creates a new base GSearchControl class. The next bit of code adds specific searcher options to the base control. As you can see, searchers for Local, Web, Video, Blog, News, and Book are added to the search control by using:
var localSearch = new GlocalSearch(); searchControl.addSearcher(localSearch); searchControl.addSearcher(new GwebSearch()); searchControl.addSearcher(new GvideoSearch()); searchControl.addSearcher(new GblogSearch()); searchControl.addSearcher(new GnewsSearch()); searchControl.addSearcher(new GbookSearch());
And finally, to execute an initial search as the page is loaded, the line:
GSearch.setOnLoadCallback(onLoad);
is used to execute the “onLoad( )” function that both initializes the search controls and executes an initial search using:
searchControl.execute("VW Beetle");
This results in the page rendering with an initial set of search results.
Figure 1: A HelloWorld AJAX Search
Notice the search results are nicely formatted with collapsible sections. There are also clickable icons that allow you to alter the appearance and behavior of the results.
Figure 2: AJAX Search customizable formatted results
The results number icon, 
, allows you to define how many results you want displayed ranging from 1, 4 to 8. The search options icon, 
, allows you to specify further search or reporting options such as changing the local search location, or how to sort the results, such as by date. The “X” to the right of the main search button allows for cancelling a search before it completes.
A HelloWorld AJAX Feed Example
In a similarly simple fashion, learning how to use the AJAX Feed API is best done using a HelloWorld type example. As with the AJAX Search API, there also exists plenty of code examples at the AJAX Feed API homepage at http://code.google.com/apis/ajaxfeeds/. Here is a simple example using the AJAX Feed API’s FeedControl.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/
jsapi?key="YOUR-KEY"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml",
"Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch",
"TechCrunch");
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feedControl">Loading</div>
</body>
</html>
As you can see, using the AJAX Feed FeedControl to pull down and display Internet feeds is done in a very similar manner as adding searchers to the AJAX Search control. When rendered on a web page, the AJAX Feed FeedControl renders feed items onto a page in a nicely formatted manner. If more than one feed is specified, their items can be stacked (as shown below) or placed in separate tabbed pages.
Figure 3: The AJAX Feed API in action
Before diving into more examples of how to use these rich AJAX solutions, it’s helpful to first review the underlying architecture of Google’s AJAX APIs that make these solutions possible.
The Architecture of Google’s AJAX APIs
In short, the Google AJAX APIs serve as an enhanced conduit to several of Google’s most popular hosted services. The hosted services such as Google Search or Google Maps can be accessed directly, but with AJAX APIs comes the ability to integrate these hosted services into anyone’s custom web pages.
Figure 4: The AJAX APIs architecture at a glance
The way the AJAX APIs work is by allowing any web page that is hosted on the Internet access to Google search (or feed) data through JavaScript code. The core JavaScript code that fetches the search or feed data can be as simple as Search.execute( ) or Feed.load( ). As the request is made to Google’s worldwide servers, a response of either Search data or prepared AJAX Feed data is streamed back to the Web page in either JSON (JavaScript Object Notation) or XML formats. Parsing of this data can either be done manually or automatically by using one of the provided UI controls that are built upon the lower level AJAX APIs. In fact, the AJAX APIs in general are architected in a layered fashion.
