title: Loading Indicator on Synchronous Ajax
body: <p>I'm using ajax with jQuery on my site and need to show a progress  / loading indicator.</p>
  
  <p>My dilemna is this:</p>
  
  <ul>
  <li>Synchronous AJAX locks the browser, so I cant do anything (e.g. show a loading indicator) till the contents are returned, by which time it is too late</li>
  <li>I am using JSON as the return data type and setting async = true returns an empty response string</li>
  <li>my whole framework relies on the return type being JSON-formatted</li>
  </ul>
  
  <p>I cannot seem to find any way to get JS to give the user an indication that something is in progress, except for doing an alert(). (For some reason an alert does work).</p>
  
  <p>Any suggestions?</p>
  
  <p>My code:</p>
  
  <p>JS</p>
  
  <pre><code>var jqXHR = $.ajax(
  {
      type: "POST",
      url: url, 
  cache: false,
      data: params, // array of parameters
      async: false, // responseText is empty if set to true
      dataType: 'json',
      error: function()
      {
          alert("Ajax post request to the following script failed: " + url);
      }
  
  } ); 
  
  var html = jqXHR.responseText;
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>$return = array();
  $return['status'] = 1;
  $return['message'] = "some html here ...";
  echo json_encode($return);
  </code></pre>