A World Beyond AJAX:
Accessing Google's APIs from
Flash and other Non-
JavaScript Environments
Vadim Spivak
5/29/2008

Introduction
APIs
Google AJAX Search API
Google AJAX Feed API
Google AJAX Language API
Goals
Show how easy it is to use the RESTful interface
Go through several use cases where the traditional
JavaScript library does not work
Latency sensitive websites
Flash/Silverlight
Server-side

Google AJAX Search API
Web
Video
News
Image
Local
Book
Blog

Sample
var videobar = new GSvideoBar(
document.getElementById(\"videoBarHorizontal\"),
GSvideoBar.PLAYER_ROOT_FLOATING,
{largeResultSet : false, horizontal : true});
videobar.execute(“ytchannel:nba\");

Customers

Google AJAX Feed API
Load
Find
Lookup

Sample
var feed =
\"http://www.google.com/uds/solutions/slideshow/sample.rss\";
var slideshow = new GFslideShow(samples, \"sampleSlideshow\",
{ linkTarget : google.feeds.LINK_TARGET_BLANK,
fullControlPanel : true });

Customers

Google AJAX Language API
Translate
Detect Language

Sample
google.language.translate(\"Hello World\", \"en\", \"es\",
function(result) {
alert(result.translation);
}
);

Customers

The Basic Blocks
JavaScript Controls and UI elements
JavaScript Runtime Layer
AJAX APIs
RESTful Data Access Layer

Why?
Restricted or no access to JavaScript
Tighter integration
Latency sensitive application
Flash Silverlight
Facebook
iPhone Android

Interface
RESTful
HTTP
Read Only
JSON
Lightweight
Text Based
Compact
Language Independent

Sample API Request
curl “http://ajax.googleapis.com/ajax/services/feed/load?
v=1.0&num=1&q=http://digg.com/rss/index.xml\"
{
\"responseData\": {
\"feed\": {
\"title\": \"Digg\",
\"link\": \"http://digg.com/\",
\"entries\": [
{
\"title\": \"LittleBigPlanet Killzone\",
\"publishedDate\": \"Wed, 07 May 2008 21:20:09 -0700\",
\"content\": \"Just to show off how ...\"
}
]
}
},
\"responseDetails\": null,
\"responseStatus\": 200
}

crossdomain.xml
Allows cross-domain requests in Flash and Silverlight
http://ajax.googleapis.com/crossdomain.xml
<?xml version=\"1.0\"?>
<!DOCTYPE cross-domain-policy SYSTEM \"http://www.macromedia.
com/xml/dtds/cross-domain-policy.dtd\">
<cross-domain-policy>
<allow-access-from domain=\"*\" />
</cross-domain-policy>

Fine Print
Referrer
Specify the URL where the API results are being displayed
Fall back to homepage URL if necessary
Optionally specify API key
Limitations

Examples

Faster AJAX
Traditional example
<script src=\"http://www.google.com/jsapi\"
type=\"text/javascript\"></script>
<script language=\"Javascript\" type=\"text/javascript\">
google.load(\"feeds\", \"1\");
google.setOnLoadCallback(OnLoad);
function OnLoad() {
var feed = new google.feeds.Feed(
\"http://www.digg.com/rss/index.xml\");
feed.load(FeedLoaded);
}
function FeedLoaded(result) {
//...
}
</script>

Faster AJAX
DOMContentLoaded
Faster than OnLoad
Cross browser
google.setOnLoadCallback(fn, onDomContentLoaded)

Faster AJAX
JSON with Padding
Callback
$ curl \"http://ajax.googleapis.com/ajax/services/feed/load?
callback=FeedLoaded&v=1.0&num=1&q=http://digg.com/rss/index.xml\"
FeedLoaded({
\"responseData\": {
\"feed\": {
\"title\": \"Digg\",
\"entries\": [
{
\"title\": \"LittleBigPlanet Killzone\",
\"content\": \"Just to show off how ...\"
}
]
}
},
\"responseDetails\": null,
\"responseStatus\": 200
})

Faster AJAX
Updated example
Response returned before OnLoad or DOMContentLoaded
1 request vs. 3 requests (10K less in size)
<script language=\"Javascript\" type=\"text/javascript\">
function FeedLoaded(result) {
//...
}
</script>
<script src=\"
http://ajax.googleapis.com/ajax/services/feed/load?
callback=FeedLoaded&v=1.0&num=1&
q=http://digg.com/rss/index.xml\">
</script>

Demo
Traditional
Traditional with onDOMContentLoaded
Direct JSON-P

News Bar
Popular solution built using Google AJAX Search API
Simple yet makes static content more sticky
Limited to sites who allow third party JavaScript widgets

News Bar
In Flash
ActionScript 3
HTTPService
MXML
corelib

News Bar
Code snippet
var service:HTTPService = new HTTPService();
service.url = 'http://ajax.googleapis.
com/ajax/services/search/news';
service.request.v = '1.0';
service.request.q = ‘Playstation';
service.resultFormat = 'text';
service.addEventListener(ResultEvent.RESULT, onServerResponse);
service.send();
private function onServerResponse(event:ResultEvent):void {
try {
var json:Object = JSON.decode(event.result as String);
// now display the results...
} catch(ignored:Error) {
}
}

Demo

Server Side
Translated Wall Attachments
Facebook Application
Google App Engine
Google AJAX Language API

Server Side
Translated Wall Attachments
URL Fetch API
simplejson
gminifb

Server Side
Code snippet
def translate(s, lang):
params = {
'v' : '1.0',
'q' : s,
'langpair' : '|%s' % lang
}
response = urlfetch.fetch('http://ajax.googleapis.com/ajax/'
'services/language/translate?%s' % urllib.urlencode(params))
data = simplejson.loads(response.content)
if data['responseStatus'] != 200:
return 'Error translating message.'
else:
return data['responseData']['translatedText'])

Demo

Reference
General Documentation
http://code.google.com/apis/ajaxsearch
http://code.google.com/apis/ajaxfeeds
http://code.google.com/apis/ajaxlanguage
Complete source code for the presented examples
http://code.google.com/p/google-ajax-examples