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 Facebook Silverlight

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