Serial Asynchronous XmlHttpRequests ...

By default we should always favour asynchronous XHR to help the responsiveness of our Web applications. However, have you ever wanted a way to serialize your XHR calls because you needed to do things in sequence as B relied on what came back from A?

You could call a synchronous Ajax call, but that locks up the browser. Thibaud Lopez Schneider has written up his thoughts here showing the difference between synchronous Ajax:

He then went and created a simple example code generator at asynchronous.me. It is interesting to look at the code of the serialized version, and see that it doesn do anything complex.... just passes in the next function to run as a callback:
PLAIN TEXT
JAVASCRIPT:

   1.
   2.function run() {
   3.request1(function () {
   4.request2(function () {
   5.request3(function () {
   6.done();
   7.});
   8.});
   9.});
  10.}
  11.function request1(callback1) {
  12.// request 1
  13.print("request1");
  14.var xmlHttpRequest1 = new XMLHttpRequest();
  15.xmlHttpRequest1.open("GET", "something1?hello1", true);
  16.xmlHttpRequest1.onreadystatechange = function () {
  17.if (this.readyState == 4 && this.status == 200) {
  18.// response 1
  19.print("response1=" + this.responseText);
  20.// continue execution in the callback
  21.if (callback1) {
  22.callback1();
  23.}
  24.}
  25.};
  26.xmlHttpRequest1.send();
  27.}
  28.function request2(callback2) {
  29.// request 2
  30.print("request2");
  31.var xmlHttpRequest2 = new XMLHttpRequest();
  32.xmlHttpRequest2.open("GET", "something2?hello2", true);
  33.xmlHttpRequest2.onreadystatechange = function () {
  34.if (this.readyState == 4 && this.status == 200) {
  35.// response 2
  36.print("response2=" + this.responseText);
  37.// continue execution in the callback
  38.if (callback2) {
  39.callback2();
  40.}
  41.}
  42.};
  43.xmlHttpRequest2.send();
  44.}
  45.function request3(callback3) {
  46.// request 3
  47.print("request3");
  48.var xmlHttpRequest3 = new XMLHttpRequest();
  49.xmlHttpRequest3.open("GET", "something3?hello3", true);
  50.xmlHttpRequest3.onreadystatechange = function () {
  51.if (this.readyState == 4 && this.status == 200) {
  52.// response 3
  53.print("response3=" + this.responseText);
  54.// continue execution in the callback
  55.if (callback3) {
  56.callback3();
  57.}
  58.}
  59.};
  60.xmlHttpRequest3.send();
  61.}
  62.function done() {
  63.// end
  64.print("done");
  65.}
  66.
      

You can compare that approach to Dojo Deferred:
PLAIN TEXT
JAVASCRIPT:

   1.
   2.function run() {
   3.request1().addCallback(request2).addCallback(request3).addCallback(done);
   4.}
   5.function request1() {
   6.// request 1
   7.print("request1");
   8.var deferred = dojo.xhrGet({
   9.url: "something1?hello1",
  10.load: function (response) {
  11.// response 1
  12.print("response1=" + response);          
  13.}
  14.});
  15.return deferred;
  16.}
  17.function request2() {
  18.// request 2
  19.print("request2");
  20.var deferred = dojo.xhrGet({
  21.url: "something2?hello2",
  22.load: function (response) {
  23.// response 2
  24.print("response2=" + response);
  25.}
  26.});
  27.return deferred;
  28.}
  29.function request3() {
  30.// request 3
  31.print("request3");
  32.var deferred = dojo.xhrGet({
  33.url: "something3?hello3",
  34.load: function (response) {
  35.// response 3
  36.print("response3=" + response);
  37.}
  38.});
  39.return deferred;
  40.}
  41.function done() {
  42.// end
  43.print("done");
  44.}
  45.

 Original Source:
http://ajaxian.com/archives/serial-async-xhr