Lirida Kerçelli Ayşe Sezer The Google AJAX Search API

Lirida KerçelliAyş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();




J SON Results

Application Layer


GlocalSearch

GwebSearch

GvideoSearch

GblogSearch

More from Google

More from you?


GlocalSearch

GwebSearch

GvideoSearch

GblogSearch

More from Google

More from you?


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)




J SON Results

Application Layer


GlocalSearch

GwebSearch

GvideoSearch

GblogSearch

More from Google

More from you?


GlocalSearch

GwebSearch

GvideoSearch

GblogSearch

More from Google

More from you?


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

...




J SON Results

Application Layer


GlocalSearch

GwebSearch

GvideoSearch

GblogSearch

More from Google

More from you?


GlocalSearch

GwebSearch

GvideoSearch

GblogSearch

More from Google

More from you?


“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.

Screen Shots and Demos

Building a “Lead List” using Searchhttp://www.google.com/uds/samples/random/lead.html

Local Search Results contain lat/lng

Christmas Listhttp://www.google.com/uds/samples/what-i-want/index.html

Favorite Places Listhttp://www.google.com/uds/samples/places/index.html

Favorite Places Listhttp://www.google.com/uds/samples/places/index.html

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

Questions

Page 25

Documents

Lirida Kerçelli Ayşe Sezer The Google AJAX Search API