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

Facebook

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