XMLHttpRequest not working

Question

The following code I am using to dynamically update the TextArea element in my HTML every 2 seconds without reloading the page. However, the alert(request.readystate) is returning undefined instead of a number 1-4. When I tried if(request) alert("Request object") it alerts the user "Request object" as expected. I have no clue why this isn't working and I have been trying to figure this out for hours!

My code:

<script type="text/javascript">

    function init(){
      var url="http://www.suchandsuch.net/ChatBowl/text.txt";
      var request= new XMLHttpRequest();
      request.open("POST",url,true);
      alert(request.readystate);
      request.onload= function(){
        if (request.readystate ==4 && request.status == 200){
          document.getElementById('textarea').innerHTML=request.responseText;
        }  
      }
        request.send(null);

     }


    var int=self. setInterval('init()', 2000);

  </script> 

I appreciated any help.

Answer 1

JavaScript is case sensitive and you typed the readyState wrong:

readyState not readystate

MSDN docs

And the callback function should be assigned to onreadystatechange :

var url="http://www.suchandsuch.net/ChatBowl/text.txt";
var request= new XMLHttpRequest();
request.onreadystatechange = function(){
    alert(request.readyState + " " + request.status);
    if (request.readyState ==4 && request.status == 200)
          document.getElementById('textarea').innerHTML=request.responseText;
    };

request.open("POST", url, true);
alert(request.readyState);  

request.send();

Answer 2

maybe instead of

request.onload= function(){

try

request.onreadystatechange = function(){