title: Issue with multiple Synchronous ajax calls
body: <p>I need to fire synchronous ajax calls consecutively. </p>
  
  <p>After each call I'm updating a <em>DOM element</em>. </p>
  
  <p>Now this is where the issue occurs,the element gets updated only when all the calls are finished.</p>
  
  <pre><code>var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "analysis.py?id="+id, false);
  xmlhttp.send();
  document.getElementById("res").innerHTML = "Done id "+id;
  id+=10;
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "analysis.py?id="+id, false);
  xmlhttp.send();
  document.getElementById("res").innerHTML = document.getElementById("res").innerHTML+"Done id "+id;
  </code></pre>
  
  <p>The element dom shows : <code>Done id 1Done id 11</code> all at once instead of one after another as was expected i.e. The element is directly updated at the end of both calls.</p>
  
  <p>Edit 1:
  Hi guys, 
  Just found another issue with my code. The following code runs only the first ajax, after that the ajax calls seem to run but the work defined in analysis.py is not done for these calls.</p>
  
  <pre><code>var total = %d;
      function filldatabase(){
      var id = 1;
      callajax(id);
  }
  function callajax(id){
      $.ajax({
            url: "analysis.py?id="+id,
            context: document.body
      }).done(function() {
            $("#progress").html(Math.floor(((id/(total-5))*100))+"%%");
            $("#pbar").css("width", ((id/(total-5))*100) + "%%");
            if(id&lt;=1296){
                  callajax(id+10);
            }
            else{
              $("#res").html("Completed. Redirecting in 5 seconds...&lt;meta http-equiv='refresh' content='5;URL=get_comment.py'&gt;");
            }
        });
      }
  </code></pre>