title: how to show progress immediately using ajax?
body: <p>I have a demo using jQuery ajax to invoke web service，at the same time，another of a request shows the progress.</p>
  
  <p>Why it not show progress immediately, while the last to show all the progress.
  The code like this:
  WebService.ashx(c#)：</p>
  
  <pre><code>public class WebService : IHttpHandler
  {
      public void ProcessRequest(HttpContext context)
      {
          string invoke = string.Empty;
          string jsoncallback = string.Empty;
  
          if (!string.IsNullOrEmpty(context.Request["invoke"]))
              invoke = context.Request["invoke"].ToString().Trim();
          if (!string.IsNullOrEmpty(context.Request["jsoncallback"]))
              jsoncallback = context.Request["jsoncallback"].ToString().Trim();
  
          context.Response.ContentType = "application/x-javascript; charset=utf-8";
          switch (invoke.ToLower())
          {
              case "call":
                  int currentValue = 0;
                  int TotalValue = 100;
                  HttpContext.Current.Cache.Remove("progress");
                  HttpContext.Current.Cache.Insert("progress", currentValue + "," + TotalValue, null, 
                      DateTime.Now.AddMinutes(60),System.Web.Caching.Cache.NoSlidingExpiration);
  
                  for (int i = 1; i &lt;= TotalValue; i++)
                  {
                      currentValue = i;
                      //TODO...
                      HttpContext.Current.Cache.Insert("progress", currentValue + "," + TotalValue, null,
                          DateTime.Now.AddMinutes(60), System.Web.Caching.Cache.NoSlidingExpiration);
                      Thread.Sleep(100);
                  }
                  context.Response.Write(string.Format("{0}({{error:{1}, message:\"{2}\"}})", jsoncallback, false.ToString().ToLower(), "finished."));
                  break;
              case "progress":
                  string progress = "100,100";
                  if(HttpContext.Current.Cache["progress"] != null)
                  {
                      progress = HttpContext.Current.Cache["progress"].ToString();
                  }
                  context.Response.Write(string.Format("{0}({{error:{1}, message:\"{2}\"}})", jsoncallback, false.ToString().ToLower(), progress));
                  break;
              default:
                  context.Response.Write(string.Format("{0}({{error:{1}, message:\"{2}\"}})", jsoncallback, false.ToString().ToLower(), "parameter error."));
                  break;
          }
      }
  
      public bool IsReusable
      {
          get{return false;}
      }
  }
  </code></pre>
  
  <p>and the page:</p>
  
  <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
   &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt;
   &lt;style&gt;
      .ProgressBar {
          position:relative;
          margin-top:30px; 
          margin-bottom:20px;
          margin-left:240px;
          width: 220px;
          border: 1px solid #B1B1B1;
          overflow: hidden;
      }
      .ProgressBar div {
          position:relative;
          background: #2BD029;
          color: #333333;
          height: 15px;
          line-height: 15px;
          text-align:left;
      }
      .ProgressBar div span {
          position:absolute;
          width: 220px; 
          text-align: center;
          font-weight: bold;
      }
   &lt;/style&gt;
   &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
      var intervalID;
  
      function RequestProcess(){
          $.getJSON("http://localhost:4397/webservice.ashx?invoke=progress&amp;jsoncallback=?", function(data) {
              var progress = data.message;
              var position = parseInt(progress.split(",")[0] / progress.split(",")[1] * 100);        
              if(isNaN(position))
                  position = 0;
              $('#divMessage').append("&lt;br/&gt;"+position);
              if (position &gt;= 100) stopRequestProcess();
              $('.ProgressBar &gt; div').css({ "width": position + "%" });
              $('.ProgressBar &gt; div &gt; span').html(position + "%");
              $('#ProgressInfo').html(position &gt;= 100 ? "finished" : position);
          });
      }
      function stopRequestProcess(){
          clearInterval(intervalID);
      }
  
      $(document).ready(function(){
          $('#btnStart').click(function(){
              $('#divMessage').html('');
              $.ajax({
                  type: "GET",
                  url: "http://localhost:4397/webservice.ashx?invoke=call&amp;jsoncallback=?",
                  dataType: "jsonp",
                  async: false,
                  error: function(xhr, ajaxOptions, thrownError) {
                      stopRequestProcess();
                  },
                  success: function(response) {
                      stopRequestProcess();
                      $('.ProgressBar &gt; div').css({ "width": "100%" });
                      $('.ProgressBar &gt; div &gt; span').html("100%");
                      $('#ProgressInfo').html("finished");
                  }
              });
  
              intervalID = setInterval(RequestProcess, 500); 
          });
      });
   &lt;/script&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
          &lt;div&gt;
              &lt;div&gt;
                  &lt;div class="ProgressBar" style="*margin-left:0px"  align="left"&gt;
                      &lt;div style="width:0%;*margin-left:0px"&gt;&lt;span&gt;0%&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="ProgressInfo" class="ProgressInfo"&gt;processing...&lt;/div&gt;
              &lt;/div&gt;
              &lt;button id="btnStart" name="btnStart"&gt;start&lt;/button&gt;
          &lt;/div&gt;
          &lt;br/&gt;Progress Information:&lt;br/&gt;
          &lt;div id="divMessage"&gt;&lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>