title: Ajax and readyState
body: <p>I am trying to update my ajax request function to show the individual states of the response.  </p>
  
  <p>However all I get after I send the request is <code>readyState = 1</code> and then it jumps directly to  <code>readyState = 4</code> and I get the full response from the server.</p>
  
  <p>Why am I not getting readyStates 2 and 3?  </p>
  
  <p>When I experimented with native browser, e.g.</p>
  
  <pre><code>xmlhttp2 = new XMLHttpRequest()
  </code></pre>
  
  <p>Sending the same requests gets me readyStates 1, 2, 3, and 4 in my callback:</p>
  
  <pre><code>xmlhttp2.onreadystatechange
  </code></pre>
  
  <p>But with the JQuery ajax helper function does not. Why is this occuring?</p>
  
  <p>Here is my code:</p>
  
  
  
  <pre><code>var jqXHR = $.ajax(
  {
      data: requestForm, //my json request
      type: req_type, // could be post or get
      url: script, // php script
      async: true,
      success: function(response,textStatus, xhr) 
      {
            renderIt(response);
      },
  
      error: function( xhr, textStatus, errorThrown )
      {
          var errText = "&lt;b&gt;Error "+xhr.status+" : "+xhr.reponseText+" , "+textStatus+", "+errorThrown+" &lt;/b&gt;";
          $('#'+div).append(errText);
      }
  });
  
  jqXHR.fail(function( data, textStatus, jqXHR ) 
  {
     var errText = "&lt;b&gt;Error "+jqXHR.status+" : "+jqXHR.reponseText+" , "+textStatus+", "+" &lt;/b&gt;";
     $('#'+div).html(errText);
  });
  
  switch(jqXHR.readyState) 
  {
  case 1:
      $('#'+div).html("\n&lt;center&gt; Connected to Server...&lt;br/&gt; &lt;img src='images/loading.gif' height=30 width=30&gt;&lt;/center&gt;\n");
      break;
  case 2:
      $('#'+div).html("\n&lt;center&gt; Request Recieved...&lt;br/&gt; &lt;img src='images/loading.gif' height=30 width=30&gt;&lt;/center&gt;\n");
      break;
  case 3:
      $('#'+div).html("\n&lt;center&gt;  Receiving Responses.....&lt;br/&gt; &lt;img src='images/loading.gif' height=30 width=30&gt;&lt;/center&gt;\n");
      $('#'+div).append(xhr.responseText);
      break;
  default:
      $('#'+div).html("\n&lt;center&gt;  Awaiting Results.."+jqXHR.readyState+"&lt;br/&gt; &lt;img src='images/loading.gif' height=30 width=30&gt;&lt;/center&gt;\n");
      break;                                    
   } 
  </code></pre>