24. Sequential Ajax (Sajax)
An Ajax pattern for handling multiple
asynchronous requests while maintaining
proper callback execution order.
25. Goals of Sequential Ajax (Sajax)
• Facilitate combination and manipulation of data from
multiple sources
• Speed loading of data, scripts, stylesheets using parallel
asynchronous HTTP requests
• Speed execution of callbacks by allowing them to fire as
soon as all previous data is available
• Fun
26. Three Flavors of Sajax
• Serial request / serial response
• Parallel request / random response
• Parallel request / serial response
60. Serial Request / Serial Response
// Request an article
$.getJSON('/article/1.json', function (article) {
// Request the related comments
$.getJSON('/article/1/comments.json', function (comments) {
// Join the data
article.comments = comments;
// Render the article and comments
render(article);
});
});
61. Serial Request /
Serial Response
• Pros
• Relatively readable
• Cons
• Slower
• Nested calls don’t
scale
62. Parallel Request / Random Response
var i = 0, n = 2, article, comments;
$.getJSON('/article/1.json', function (data) {
article = data;
if (++i == n) {
handleComplete();
}
});
$.getJSON('/article/1/comments.json', function (data) {
comments = data;
if (++i == n) {
handleComplete();
}
});
function handleComplete () {
article.comments = comments;
render(article);
}
66. Sexy is a jQuery plugin
A lightweight JavaScript library which provides parallel
request/serial response Sequential Ajax (Sajax) functionality
and a sleek facade to jQuery’s native Ajax methods.
67. Sexy is a standalone library
A lightweight JavaScript library which provides parallel
request/serial response Sequential Ajax (Sajax) functionality
and a sleek facade to jQuery’s native Ajax methods
JavaScript.
68. Sexy is a standalone library
A lightweight JavaScript library which provides parallel
request/serial response Sequential Ajax (Sajax) functionality
and a sleek facade to jQuery’s native Ajax methods
JavaScript (using jQuery’s native Ajax methods).
78. I WASN’T KIDDING!
If you are pregnant, have a serious heart
condition, or giggle uncontrollably at the word
“titillate”, you may want to hurry to Track A.
80. Sexy is Your Syntactic Sugar Mama
An expressive method for each supported data type:
html (url, callback)
json (url, callback)
jsonp (url, callback)
script / js (url, callback)
text (url, callback)
xml (url, callback)
style / css (url, callback)
81. Sexy is Patient
Requests can be deferred using an optional 2nd argument.
html (url, defer, callback)
json (url, defer, callback)
jsonp (url, defer, callback)
script / js (url, defer, callback)
text (url, defer, callback)
xml (url, defer, callback)
style / css (url, defer, callback)
82. Sexy is Flexible
Each method can also take a jQuery settings object.
html (settings)
json (settings)
jsonp (settings)
script / js (settings)
text (settings)
xml (settings)
style / css (settings)
83. callback (data, previous, next, status)
Each callback receives four arguments:
data response data of the current request
previous return value of the previous callback
next Ajax settings of the next request
status result status of the current request
111. var s = Sexy
.js('jquery.min.js')
.js('jquery.template.min.js')
.css('friends.css')
.text('friend.tpl')
.json('friends.json', function (data, tpl) {
// Send a new request for each friend (executed simultaneously)
$.each(data.friends, function (i, friend) {
s.json(friend.username + '.json', function (friend, friends) {
// Push onto the previously returned array
friends.push(friend);
// Until the last friend, return the augmented array to the next callback
if (i < data.friends.length - 1) {
return friends;
// When we reach the last friend, render the data and insert into the DOM
} else {
$.template(tpl, friends).appendTo('#friends');
}
});
});
// Instantiate the friends array
return [];
});
112. Known Issues
• Unable to detect error events for remote requests
• jsonp (remoteUrl)
• script (remoteUrl)
• style (remoteUrl)
• style (remoteUrl) fires the success callback even if the
request was unsuccessful (ie. 404)
113. Parallel Request / Serial Response
• Pros
• Faster
• Cleaner
• Prettier
• Cons
• Sexy.js adds
1.4Kb–4.6Kb to
your JavaScript
library
114. Parallel Request / Serial Response
• Pros
• Faster
• Cleaner
• Prettier
• Cons
• Sexy.js adds
1.4Kb–4.6Kb to
your JavaScript
library
115. Can’t get enough?
website http://sexyjs.com
slideshow http://www.slideshare.net/furf
download http://github.com/furf/Sexy
twitter @sexyjs or @furf
email furf@furf.com