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...
Google AJAX Search API

  Web
  Video
  News
  Image
  Local
  Book
  Blog
Sample
var videobar = new GSvideoBar(
document.getElementById(quot;videoBarHorizontalquot;),
GSvideoBar.PLAYER_ROOT_FLOATI...
Customers
Google AJAX Feed API

  Load
  Find
  Lookup
Sample
var feed =
quot;http://www.google.com/uds/solutions/slideshow/sample.rssquot;;
var slideshow = new GFslideShow(samp...
Customers
Google AJAX Language API

  Translate
  Detect Language
Sample
google.language.translate(quot;Hello Worldquot;, quot;enquot;, quot;esquot;,
function(result) {
alert(result.transl...
Customers
The Basic Blocks




JavaScript Controls and UI elements



JavaScript Runtime Layer

                                    ...
Why?

  Restricted or no access to JavaScript
  Tighter integration
  Latency sensitive application




       Flash      ...
Interface

  RESTful
     HTTP
     Read Only
  JSON
     Lightweight
     Text Based
     Compact
     Language Independe...
Sample API Request

curl “http://ajax.googleapis.com/ajax/services/feed/load?
v=1.0&num=1&q=http://digg.com/rss/index.xmlq...
crossdomain.xml

     Allows cross-domain requests in Flash and Silverlight
     http://ajax.googleapis.com/crossdomain.xm...
Fine Print

   Referrer
      Specify the URL where the API results are being displayed
      Fall back to homepage URL if...
Examples
Faster AJAX
 Traditional example

<script src=quot;http://www.google.com/jsapiquot;
type=quot;text/javascriptquot;></scrip...
Faster AJAX
DOMContentLoaded
   Faster than OnLoad
   Cross browser
   google.setOnLoadCallback(fn, onDomContentLoaded)
Faster AJAX
 JSON with Padding
      Callback

$ curl quot;http://ajax.googleapis.com/ajax/services/feed/load?
callback=Fe...
Faster AJAX
 Updated example
     Response returned before OnLoad or DOMContentLoaded
     1 request vs. 3 requests (10K l...
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...
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/servic...
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 =...
Demo
Reference

  General Documentation
     http://code.google.com/apis/ajaxsearch
     http://code.google.com/apis/ajaxfeeds
...
A World Beyond Ajax Accessing Googles Ap Is From Flash And Non Java Script Environments
Upcoming SlideShare
Loading in …5
×

A World Beyond Ajax Accessing Googles Ap Is From Flash And Non Java Script Environments

1,495 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,495
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

A World Beyond Ajax Accessing Googles Ap Is From Flash And Non Java Script Environments

  1. 1. A World Beyond AJAX: Accessing Google's APIs from Flash and other Non- JavaScript Environments Vadim Spivak 5/29/2008
  2. 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. 3. Google AJAX Search API Web Video News Image Local Book Blog
  4. 4. Sample var videobar = new GSvideoBar( document.getElementById(quot;videoBarHorizontalquot;), GSvideoBar.PLAYER_ROOT_FLOATING, {largeResultSet : false, horizontal : true}); videobar.execute(“ytchannel:nbaquot;);
  5. 5. Customers
  6. 6. Google AJAX Feed API Load Find Lookup
  7. 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. 8. Customers
  9. 9. Google AJAX Language API Translate Detect Language
  10. 10. Sample google.language.translate(quot;Hello Worldquot;, quot;enquot;, quot;esquot;, function(result) { alert(result.translation); } );
  11. 11. Customers
  12. 12. The Basic Blocks JavaScript Controls and UI elements JavaScript Runtime Layer AJAX APIs RESTful Data Access Layer
  13. 13. Why? Restricted or no access to JavaScript Tighter integration Latency sensitive application Flash Silverlight Facebook iPhone Android
  14. 14. Interface RESTful HTTP Read Only JSON Lightweight Text Based Compact Language Independent
  15. 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. 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. 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. 18. Examples
  19. 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. 20. Faster AJAX DOMContentLoaded Faster than OnLoad Cross browser google.setOnLoadCallback(fn, onDomContentLoaded)
  21. 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. 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. 23. Demo Traditional Traditional with onDOMContentLoaded Direct JSON-P
  24. 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. 25. News Bar In Flash ActionScript 3 HTTPService MXML corelib
  26. 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. 27. Demo
  28. 28. Server Side Translated Wall Attachments Facebook Application Google App Engine Google AJAX Language API
  29. 29. Server Side Translated Wall Attachments URL Fetch API simplejson gminifb
  30. 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. 31. Demo
  32. 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

×