More Related Content Similar to Mashing up JavaScript (20) More from Bastian Hofmann (20) Mashing up JavaScript14. • JavaScript Apps
• CORS and OAuth2
• Local Storage
• OEmbed and Caja
• WebSockets, ActivityStrea.ms and
PubsubHubbub
• OExchange
29. Cross-Origin Resource
Sharing
Client Backend
client.net api.twitter.com
AJAX
Access-Control-Allow-Origin: *
http://www.w3.org/TR/cors/
30. var html="<ul>";
for (var i=0; i < viewers.length; i++) {
html += "<li>" + viewers[i].displayName
+ "</li>";
}
html += "<ul>";
document.getElementById("#div").innerHTML =
html;
Where is the error?
33. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});
34. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});
35. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});
36. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});
37. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});
38. this.bind('getFeed', function() {
var that = this;
$.ajax({
url: 'http://..._timeline.json',
success: function(response) {
feed = response;
that.trigger('renderFeed');
}
});
});
this.bind('renderFeed', function() {
this.feed = feed;
this.partial('js/templates/feed.ms');
});
39. this.bind('getFeed', function() {
var that = this;
$.ajax({
url: 'http://..._timeline.json',
success: function(response) {
feed = response;
that.trigger('renderFeed');
}
});
});
this.bind('renderFeed', function() {
this.feed = feed;
this.partial('js/templates/feed.ms');
});
40. this.bind('getFeed', function() {
var that = this;
$.ajax({
url: 'http://..._timeline.json',
success: function(response) {
feed = response;
that.trigger('renderFeed');
}
});
});
this.bind('renderFeed', function() {
this.feed = feed;
this.partial('js/templates/feed.ms');
});
41. this.bind('getFeed', function() {
var that = this;
$.ajax({
url: 'http://..._timeline.json',
success: function(response) {
feed = response;
that.trigger('renderFeed');
}
});
});
this.bind('renderFeed', function() {
this.feed = feed;
this.partial('js/templates/feed.ms');
});
42. this.bind('getFeed', function() {
var that = this;
$.ajax({
url: 'http://..._timeline.json',
success: function(response) {
feed = response;
that.trigger('renderFeed');
}
});
});
this.bind('renderFeed', function() {
this.feed = feed;
this.partial('js/templates/feed.ms');
});
43. this.bind('getFeed', function() {
var that = this;
$.ajax({
url: 'http://..._timeline.json',
success: function(response) {
feed = response;
that.trigger('renderFeed');
}
});
});
this.bind('renderFeed', function() {
this.feed = feed;
this.partial('js/templates/feed.ms');
});
44. <ul>
{{#feed}}
<li>
<p>{{{statusnet_html}}}</p>
<p>{{created_at}}
{{#user}}
{{name}}
{{/user}}
</p>
</li>
{{/feed}}
</ul>
45. <ul>
{{#feed}}
<li>
<p>{{{statusnet_html}}}</p>
<p>{{created_at}}
{{#user}}
{{name}}
{{/user}}
</p>
</li>
{{/feed}}
</ul>
46. <ul>
{{#feed}}
<li>
<p>{{{statusnet_html}}}</p>
<p>{{created_at}}
{{#user}}
{{name}}
{{/user}}
</p>
</li>
{{/feed}}
</ul>
47. <ul>
{{#feed}}
<li>
<p>{{{statusnet_html}}}</p>
<p>{{created_at}}
{{#user}}
{{name}}
{{/user}}
</p>
</li>
{{/feed}}
</ul>
51. OAuth 2
+----------+ Client Identifier +----------------+
| |>---(A)-- & Redirection URI --->| |
| | | |
End <--+ - - - +----(B)-- User authenticates -->| Authorization |
User | | | Server |
| |<---(C)--- Redirect URI -------<| |
| Client | with Access Token | |
| in | in Fragment +----------------+
| Browser |
| | +----------------+
| |>---(D)--- Redirect URI ------->| |
| | without Fragment | Web Server |
| | | with Client |
| (F) |<---(E)--- Web Page with ------<| Resource |
| Access | Script | |
| Token | +----------------+
+----------+
http://tools.ietf.org/html/draft-ietf-oauth-v2
54. this.get('#Login', function() {
var consumerKey = 'abc....';
window.open('http://status.net/api/oauth2/
authorize?response_toke=token&client_id=' +
consumerKey);
});
55. this.get('#Login', function() {
var consumerKey = 'abc....';
window.open('http://status.net/api/oauth2/
authorize?response_toke=token&client_id=' +
consumerKey);
});
62. this.post('#Entry', function() {
var that = this;
$.ajax({
url: 'http://status.net/.../
update.json?oauth_token=' +
oauth2.store['access_token'],
type: 'POST',
data: {
'status': that.params['comment']
},
success: function() {
that.redirect('#/');
}
});
});
63. this.post('#Entry', function() {
var that = this;
$.ajax({
url: 'http://status.net/.../
update.json?oauth_token=' +
oauth2.store['access_token'],
type: 'POST',
data: {
'status': that.params['comment']
},
success: function() {
that.redirect('#/');
}
});
});
64. this.post('#Entry', function() {
var that = this;
$.ajax({
url: 'http://status.net/.../
update.json?oauth_token=' +
oauth2.store['access_token'],
type: 'POST',
data: {
'status': that.params['comment']
},
success: function() {
that.redirect('#/');
}
});
});
65. this.post('#Entry', function() {
var that = this;
$.ajax({
url: 'http://status.net/.../
update.json?oauth_token=' +
oauth2.store['access_token'],
type: 'POST',
data: {
'status': that.params['comment']
},
success: function() {
that.redirect('#/');
}
});
});
66. this.post('#Entry', function() {
var that = this;
$.ajax({
url: 'http://status.net/.../
update.json?oauth_token=' +
oauth2.store['access_token'],
type: 'POST',
data: {
'status': that.params['comment']
},
success: function() {
that.redirect('#/');
}
});
});
67. this.post('#Entry', function() {
var that = this;
$.ajax({
url: 'http://status.net/.../
update.json?oauth_token=' +
oauth2.store['access_token'],
type: 'POST',
data: {
'status': that.params['comment']
},
success: function() {
that.redirect('#/');
}
});
});
79. {
"provider_url":"http://www.youtube.com/",
"title":"Jupiter Jones -
Das Jahr in dem ich schlief (Musik Video)",
"html":"u003cobject width="500" height="306"u003e
u003cparam name="movie" value="http://www.youtube.com/v/
OyJd2qsRkNk?version=3"u003eu003c/paramu003eu003cparam name=
"allowFullScreen" value="true"u003eu003c/paramu003e
u003cparam name="allowscriptaccess" value="always"u003e
u003c/paramu003eu003cembed src="http://www.youtube.com/v/
OyJd2qsRkNk?version=3" type="application/x-shockwave-flash
" width="500" height="306" allowscriptaccess="always
" allowfullscreen="true"u003eu003c/embedu003eu003c/object
u003e",
"author_name":"St182",
"height":306,
"thumbnail_width":480,
"width":500,
"version":"1.0",
"author_url":"http://www.youtube.com/user/Stinkfist182",
"provider_name":"YouTube",
"thumbnail_url":"http://i4.ytimg.com/vi/OyJd2qsRkNk/
hqdefault.jpg",
"type":"video",
"thumbnail_height":360
}
87. PubSubHubbub
retrieves Atom feed with Hub URL
subscribes
for feed
acks
Hub
subscription
pings every posts sth
subscriber
http://code.google.com/p/pubsubhubbub/
89. <entry>
<activity:object-type>http://activitystrea.ms/schema/1.0/
note</activity:object-type>
<id>http://status.net.xyz:8061/index.php/notice/20</id>
<title>hello from client</title>
<content type="html">hello from client</content>
<link rel="alternate" type="text/html" href="http://
status.net.xyz:8061/index.php/notice/20"/>
<activity:verb>http://activitystrea.ms/schema/1.0/post</
activity:verb>
<published>2011-05-23T21:07:33+00:00</published>
<updated>2011-05-23T21:07:33+00:00</updated>
<link rel="ostatus:conversation" href="http://status.net.xyz:
8061/index.php/conversation/20"/>
<georss:point>52.52437 13.41053</georss:point>
<link rel="self" type="application/atom+xml"href="http://
status.net.xyz:8061/index.php/api/statuses/show/20.atom"/>
<link rel="edit" type="application/atom+xml"href="http://
status.net.xyz:8061/index.php/api/statuses/show/20.atom"/>
<statusnet:notice_info local_id="20" source="api"
favorite="false"repeated="false"></statusnet:notice_info>
</entry>
92. PubSubHubbub
retrieves Atom feed with Hub URL
subscribes
for feed
acks
Hub
subscription
pings every posts sth
subscriber
http://code.google.com/p/pubsubhubbub/
100. Notification
retrieve Stream with Hub
Ajax: request WebSockets:
Subscription new Post
subscribe at hub
challenge
ack
new post new post
107. <?xml version='1.0' encoding='UTF-8'?>
<XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'
xmlns:hm='http://host-meta.net/xrd/1.0'>
<hm:Host>www.meinvz.net</hm:Host>
<Link
rel="http://oexchange.org/spec/0.8/rel/resident-target"
type="application/xrd+xml"
href="http://www.example.com/oexchange.xrd" >
</Link>
</XRD>
108. <?xml version='1.0' encoding='UTF-8'?>
<XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0">
<Subject>http://www.example.com/linkeater</Subject>
<Property
type="http://www.oexchange.org/spec/0.8/prop/vendor">
Examples Inc.</Property>
<Property
type="http://www.oexchange.org/spec/0.8/prop/title">
A Link-Accepting Service</Property>
<Link
rel= "icon" href="http://www.example.com/favicon.ico"
type="image/vnd.microsoft.icon" />
<Link
rel= "http://www.oexchange.org/spec/0.8/rel/offer"
href="http://www.example.com/linkeater/offer.php"
type="text/html" />
</XRD>