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

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

3. Google AJAX Search API
Web
Video
News
Image
Local
Book
Blog

4. Sample
var videobar = new GSvideoBar(
document.getElementById(quot;videoBarHorizontalquot;),
GSvideoBar.PLAYER_ROOT_FLOATING,
{largeResultSet : false, horizontal : true});
videobar.execute(“ytchannel:nbaquot;);

5. Customers

6. Google AJAX Feed API
Load
Find
Lookup

7. Sample
var feed =
quot;http://www.google.com/uds/solutions/slideshow/sample.rssquot;;
var slideshow = new GFslideShow(samples, quot;sampleSlideshowquot;,
{ linkTarget : google.feeds.LINK_TARGET_BLANK,
fullControlPanel : true });

8. Customers

9. Google AJAX Language API
Translate
Detect Language

10. Sample
google.language.translate(quot;Hello Worldquot;, quot;enquot;, quot;esquot;,
function(result) {
alert(result.translation);
}
);

11. Customers

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

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

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

15. Sample API Request
curl “http://ajax.googleapis.com/ajax/services/feed/load?
v=1.0&num=1&q=http://digg.com/rss/index.xmlquot;
{
quot;responseDataquot;: {
quot;feedquot;: {
quot;titlequot;: quot;Diggquot;,
quot;linkquot;: quot;http://digg.com/quot;,
quot;entriesquot;: [
{
quot;titlequot;: quot;LittleBigPlanet Killzonequot;,
quot;publishedDatequot;: quot;Wed, 07 May 2008 21:20:09 -0700quot;,
quot;contentquot;: quot;Just to show off how ...quot;
}
]
}
},
quot;responseDetailsquot;: null,
quot;responseStatusquot;: 200
}

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

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

18. Examples

19. Faster AJAX
Traditional example
<script src=quot;http://www.google.com/jsapiquot;
type=quot;text/javascriptquot;></script>
<script language=quot;Javascriptquot; type=quot;text/javascriptquot;>
google.load(quot;feedsquot;, quot;1quot;);
google.setOnLoadCallback(OnLoad);
function OnLoad() {
var feed = new google.feeds.Feed(
quot;http://www.digg.com/rss/index.xmlquot;);
feed.load(FeedLoaded);
}
function FeedLoaded(result) {
//...
}
</script>

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

21. Faster AJAX
JSON with Padding
Callback
$ curl quot;http://ajax.googleapis.com/ajax/services/feed/load?
callback=FeedLoaded&v=1.0&num=1&q=http://digg.com/rss/index.xmlquot;
FeedLoaded({
quot;responseDataquot;: {
quot;feedquot;: {
quot;titlequot;: quot;Diggquot;,
quot;entriesquot;: [
{
quot;titlequot;: quot;LittleBigPlanet Killzonequot;,
quot;contentquot;: quot;Just to show off how ...quot;
}
]
}
},
quot;responseDetailsquot;: null,
quot;responseStatusquot;: 200
})

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

23. Demo
Traditional
Traditional with onDOMContentLoaded
Direct JSON-P

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

25. News Bar
In Flash
ActionScript 3
HTTPService
MXML
corelib

26. 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) {
}
}

27. Demo

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

29. Server Side
Translated Wall Attachments
URL Fetch API
simplejson
gminifb

30. 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'])

31. Demo

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