• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A World Beyond Ajax Accessing Googles Ap Is From Flash And Non Java Script Environments

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






Total Views
Views on SlideShare
Embed Views



1 Embed 4

http://www.slideshare.net 4



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

    • 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(quot;videoBarHorizontalquot;), GSvideoBar.PLAYER_ROOT_FLOATING, {largeResultSet : false, horizontal : true}); videobar.execute(“ytchannel:nbaquot;);
    • 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(samples, quot;sampleSlideshowquot;, { linkTarget : google.feeds.LINK_TARGET_BLANK, fullControlPanel : true });
    • Customers
    • Google AJAX Language API Translate Detect Language
    • Sample google.language.translate(quot;Hello Worldquot;, quot;enquot;, quot;esquot;, 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.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 }
    • 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>
    • 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=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>
    • 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=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 })
    • 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>
    • 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