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
IE 7
Firefox 2.0
