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”); }

Architecture Block Diagram

Execution Timeline Page 9

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

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

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

“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 ( FG). This library includes objects and symbols for placing Google Search API results on your pages. Be sure to include this library within a tag before you attempt to use search control functionality.

Screen Shots and Demos

Building a “Lead List” using Search

Local Search Results contain lat/lng

Christmas List

Favorite Places List

Favorite Places List

Resources Have a look at: Google Feed API, Google Map API Google Code AJAX Search API Documentation and Samples Search API Blog Search API Developer Forum Page 24

Questions Page 25