Virtual Developer Workshop: Containerized Development with Docker
Introducing the Google AJAX APIs: AJAX Search and AJAX Feed
- 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.
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/):
|Note: In the above example, YOUR-KEY would be replaced with the one generated for you.|
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:
is used to execute the "onLoad( )" function that both initializes the search controls and executes an initial search using:
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.
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