I talked about delegating rendering in Symfony for creating a JSON API. Now here’s a consumer: an Orkut opensocial gadget:
MobshareOrkutAPI = {
api_url: 'http://api.mobshare/api.php',
cache_time: 0, //0 to disable
makeCachedRequest: function(url, callback, params, refreshInterval) {
var ts = new Date().getTime();
var sep = "?";
if (refreshInterval && refreshInterval > 0) {
ts = Math.floor(ts / (refreshInterval * 1000));
}
if (url.indexOf("?") > -1) {
sep = "&";
}
url = [ url, sep, "nocache=", ts ].join("");
gadgets.io.makeRequest(url, callback, params);
},
call: function(module, action, params, callback) {
var options = {};
options[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
this.makeCachedRequest(this.api_url + '/' + module + '/' + action + '?' + params, callback, options, this.cache_time);
}
};
makeCachedRequest
has been plaigarized from the Opensocial documentation and it’s very useful to bust the cache for requests. Also, notice this line for setting the content-type to JSON:
options[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
This is how we access that API, a code fragment:
...
authenticate: function(alias, mobile_no, password) {
MobshareOrkutAPI.call('user', 'authenticate',
'alias=' + encodeURIComponent(alias) + '&mobile_no=' + encodeURIComponent(mobile_no) +
'&password=' + encodeURIComponent(password),
MyOrkutApp.login
);
}
...
login: function(orkut_response) {
response = orkut_response.data;
data_success = response['success'];
data_error = response['error'];
if(data_success) {
html = '<h2>Login Successful!</h2>';
html += '<p>Welcome: ' + data_success.name + '!</p>';
} else if(data_error) {
html = '<h2>Login Unsuccessful!</h2>';
html += '<p>' + data_error + '!</p>';
}
document.getElementById('mobshare_login').innerHTML += html;
},
...
Note that orkut_response.data
is automatically set by Orkut because you passed in the JSON content type; it parses the data received and creates a javascript object. Cool, ain’t it? It’s very easy to create a proper interactive Opensocial app this way.
Leave a Reply