title: How to show progress bar when calling AJAX?
body: <p>I am developing a mobile app using <code>phonegap</code> (<code>JQ + Html</code> ). In my app, consuming <code>REST</code> webservice using <code>AJAX</code> calls.When service invoke, I am showing a progress bar animated GIF image . The problem is, browser freezes when calling AJAX. So the progress bar is not showing. </p>
  
  <p>In ‘<code>beforeSend</code>’ i am showing the progress bar image and after ‘<code>complete</code>’ i am hiding the progress bar image. </p>
  
  <p>I am also trying <code>async: true</code> . But it execute service as asynchronously. In my app,  asynchronous execution is not suit. Because asynchronous execution will not wait for ajax executing. My app should wait until the ajax execution complete. In that process time I want show progress bar.</p>
  
  <p>Here is my code.  </p>
  
  <pre><code>$.ajax({
      type: "POST",
      dataType: "json",
      contentType: "application/json",
      accepts: "application/json",
      beforeSend: function() {
          StartPBar():
      },
      data: JSON.stringify(RQ),
      async: false,
      url: URL,
      complete: function() {
          stopPBar();
      },
      success: function(res, status, xhr) {
          try {
              RS = res;
          } catch (e) {
              alert(e);
          }
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert("Excpetion " + errorThrown + XMLHttpRequest);
      }
  });
  </code></pre>
  
  <p>Any suggestion to show the progress bar stay on screen until the process is fully complete? Any help would be appreciated. Thanks</p>