Lirida Kerçelli Ayşe Sezer The Google AJAX Search API
Goal of this presentation
Show what AJAX Search APIs can do on your pages.
Show how easy these APIs are to use.
Introduce you to the API’s layered architecture.
Show how powerful they are through advanced custom controls.
Encourage you to try the Google AJAX Search APIs.
What is AJAX?
AJAX (Asynchronous JavaScript and XML), or Ajax, is a web development technique used for creating interactive web applications.
Why AJAX?
The AJAX’ aim is to make web pages’ download appear faster by exchanging small amounts of data with the server behind the scenes .
What is Google AJAX Search API?
Easy way to add Google search to your page
Parallel search over Web, Local Listings, Google Video, and Blogs
Supports “Clipping” of Search Results
Technologies:• AJAX
• JSON
• HTML
• Free
Sample to left is:• ~9 Lines of JavaScript
• ~10 Lines of HTML
The "Hello, World" of Google AJAX Search API
function OnLoad() {
var sc = new GSearchControl();
sc.addSearcher(new GlocalSearch());
sc.addSearcher(new GwebSearch());
sc.addSearcher(new GvideoSearch());
sc.addSearcher(new GblogSearch());
sc.draw(searchContainer);
sc.execute(“bogazici”);
}
<body onload=“OnLoad()”>
<div id=“searchContainer”/>
</body>
Architecture Block Diagram
Google AJ AX Search API Block Diagram
J avaScript Object CallsHTTP GET
J SON Results
Application Layer
UI Layer – GsearchControl Extensible Searcher Layer
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
More from Google
More from you?
Search Servers Layer
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
More from Google
More from you?
J avaScript Object Call J avaScript Object Call Undocumented, Not Supported
Execution Timeline
Page 9
Search Flow
T0 T0.execute()
T0T0
GvideoSearch GwebSearch GlocalSearch GblogSearch
GvideoSearch GwebSearch GlocalSearch GblogSearch
T1 T1T1T1 T3
T4Search Complete Callback
T6
T5
Partial Completion, Results drawn as they become available
API Overview
GSearchControl – UI Layer to expose multiple search results
Common APIs
• .addSearcher() : add a searcher instance to the search control
• .draw() : bind a search control to your page
• .execute() : execute a parallel search across all searchers
• .setOnKeepCallback() : handler for receiving copies of search results
• .clearAllResults() : reset the search control
• .setLinkTarget() : control the link following behavior
Expected Operation Sequence
• sc = new GSearchControl();
• sc.addSearcher();
• sc.draw();
Architecture Block Diagram
Google AJ AX Search API Block Diagram
J avaScript Object CallsHTTP GET
J SON Results
Application Layer
UI Layer – GsearchControl Extensible Searcher Layer
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
More from Google
More from you?
Search Servers Layer
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
More from Google
More from you?
J avaScript Object Call J avaScript Object Call Undocumented, Not Supported
API Overview
UI-less object that executes type specific search
• GwebSearch() : search the web
• GlocalSearch() : local search results and geo-coding
• GblogSearch() : search blogs
• GvideoSearch() : search Google Video
Common APIs
• .execute() : execute a search
• .setSearchCompleteCallback() : handler for search completion event
• .setResultSetSize() : select number of results (small or large)
• .setLinkTarget() : control the link following behavior
Searcher Class Specific APIs
• .setSiteRestriction() : site restricted blog, web search
• .setCenterPoint() : local search scope control (string, map, or point)
Architecture Block Diagram
Google AJ AX Search API Block Diagram
J avaScript Object CallsHTTP GET
J SON Results
Application Layer
UI Layer – GsearchControl Extensible Searcher Layer
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
More from Google
More from you?
Search Servers Layer
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
More from Google
More from you?
J avaScript Object Call J avaScript Object Call Undocumented, Not Supported
What is a search result?
JavaScript Object
Uniform Properties (common across all searchers)
• .GsearchResultClass : indicates “type” of search result
• .html : HTML node containing microformat based result data
Domain Specific Properties
• .title : the results title
• .url : the associated page’s url
...
Architecture Block Diagram
Google AJ AX Search API Block Diagram
J avaScript Object CallsHTTP GET
J SON Results
Application Layer
UI Layer – GsearchControl Extensible Searcher Layer
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
More from Google
More from you?
Search Servers Layer
GlocalSearch
GwebSearch
GvideoSearch
GblogSearch
More from Google
More from you?
J avaScript Object Call J avaScript Object Call Undocumented, Not Supported
“Keep Handling” – How do I do it?
function OnLoad() {
var sc = new GSearchControl();
…
// establish keep handler
sc.setOnKeepCallback(this, MyKeepHandler);
…
}
function MyKeepHandler(result){
// clone the .html property
var node = result.html.cloneNode(true);
// append into my document
savedResults = document.getElementById(“saveArea”);
savedResults.appendChild(node);
}
How to use the search API within your web site
Sign up for an API key.
Include the URL for the Google AJAX Search API javascript library (http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABCDEFG).
This library includes objects and symbols for placing Google Search API results on your pages.
Be sure to include this library within a <script> tag before you attempt to use search control functionality.
Resources
Have a look at: Google Feed API, Google Map API
Google Code • http://code.google.com/
AJAX Search API Documentation and Samples• http://code.google.com/apis/ajaxsearch/
• http://code.google.com/apis/ajaxsearch/samples.html
• http://code.google.com/apis/ajaxsearch/signup.html
• http://ajaxsearch.blogspot.com/
• http://ycmpe450.cmpe.boun.edu.tr:81/ayse/
Search API Blog • http://googleajaxsearchapi.blogspot.com/
Search API Developer Forum• http://groups.google.com/group/Google-AJAX-Search-APIPage 24