A World Beyond AJAX: Accessing Google's APIs from Flash and other Non-JavaScript EnvironmentsVadim Spivak5/29/2008
Introduction
APIsGoogle AJAX Search API
Google AJAX Feed API
Google AJAX Language API
GoalsShow 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
RESTful Data Access Layer
JavaScript Runtime Layer
JavaScript Controls and UI elements
AJAX APIs
Why?
Restricted or no access to JavaScript
Tighter integration
Latency sensitive application
Flash
Android
Silverlight
iPhone
Interface
RESTfulHTTP
Read Only
JSONLightweight
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
ReferrerSpecify the URL where the API results are being displayed
Fall back to homepage URL if necessary
Optionally specify API key
Limitations
Examples
Faster AJAX
<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>
Traditional example
Faster AJAXDOMContentLoaded
Faster than OnLoad
Cross browser
google.setOnLoadCallback(fn, onDomContentLoaded)
Faster AJAXJSON 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
<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>
Updated example
Response returned before OnLoad or DOMContentLoaded
1 request vs. 3 requests (10K less in size)
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
ActionScript 3HTTPService
MXML
corelib
In Flash
News Bar
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) {}}
Code snippet
Demo
Server Side
Facebook Application
Google App Engine
Google AJAX Language API
Translated Wall Attachments
Server Side
URL Fetch API
simplejson
gminifb
Translated Wall Attachments
Server SideCode 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 Documentationhttp://code.google.com/apis/ajaxsearch
http://code.google.com/apis/ajaxfeeds
http://code.google.com/apis/ajaxlanguage
Complete source code for the presented exampleshttp://code.google.com/p/google-ajax-examples