title: Ajax onreadystatechange function readyState
body: <p>I have a script on my page that receives raw JSON data for an image back from Flickr.
  I want to use readyState to provide live feedback as it's taking place.</p>
  
  <p>What my current code is able to do is check that the readyState is 4 and the status is 200. When this is true it adds the raw JSON data to the page.</p>
  
  <p>Code: </p>
  
  <pre><code>function sendRequest (request) {
  
     //Request is the URL string to flickr containings tags entered by the user.
  
      x = new XMLHttpRequest();
      x.open("GET", request,false);
      x.send(null);
  
  
  
                  if (x.readyState==4 &amp;&amp; x.status==200)
                  {
                  document.getElementById("resultsContainer").innerHTML="Raw JSON Data: &lt;br&gt;"+x.responseText+"&lt;br&gt;&lt;br&gt;";
                  } 
  
  
  }
  </code></pre>
  
  <p>As you can see it adds the value received back to the resultsContainer div. I tried to add feedback in the same div like this: </p>
  
  <pre><code>if(x.readyState==3){
  document.getElementById("resultsContainer").innerHTML="Processing Request";
  }
  </code></pre>
  
  <p>But it has no effect. I am wondering why it successfully recognises the ready state 4, but not three? </p>
  
  <p>I understand there is an onreadystatechange function and tried to use it but it never executed any of the code, i.e didn't work.</p>
  
  <p>How can I perform an action while the request is happening (readyState == 3) ?</p>
  
  <p>EDIT: </p>
  
  <pre><code>CURRENT CODE:
  
  function sendRequest (request) {
  
      x = new XMLHttpRequest();
      x.open("GET", request,true);
      x.send();
  
      x.onreadystatechange = function () {
  
          if (x.readyState==4 &amp;&amp; x.status==200){
              document.getElementById("resultsContainer").innerHTML="success &lt;br&gt;"+x.responseText;
          } 
  
          if(x.readyState==3){
              document.getElementById("getIms").value="Processing";
          }
  
      }
  
  
  
  }
  </code></pre>
  
  <p>The element getIms' value changes to processing only when the value is returned and added
  to the results container.</p>