Ajax keeps site on the Loading

Question

I ve been trying to figure out how to make this work.

var request;

if(window.XMLHttpRequest){
    request= new XMLHttpRequest();  
}else{
    request = new ActiveXObject("Microsoft.XMLHTTP");
}


var handleStateChange = function () {
   switch (request.readyState) {
      case 0 : // UNINITIALIZED
      case 1 : // LOADING
      case 2 : // LOADED
      case 3 : // INTERACTIVE
      break;
      case 4 : // COMPLETED
      break;
      default: alert("error");
   }
}


/*request.onreadystatechange=handleStateChange;*/
request.onreadystatechange = function(){
    if((request.status === 200) && (request.readyState === 4)){
        console.log(request);
        document.writeln(request.responseText); 
    }

}
request.open('GET','data.txt');
request.send();

I found similar problems here in stackoverflow, but yet I havent figured out why its behaving this way (Im new to Ajax).

So the problem is, when I have request.open('GET','data.txt'); its causing the page to stay on loading mode and the console.log doesnt show anything.

I google around and found in stackoverflow this solution request.onreadystatechange=handleStateChange;

which seems to be fixing the problem. unfortunately it overrides the request.onreadystatechange = function(){}. Console works and the data.txt content wont show on the web.

If I comment it out, the content shows on the web, but the page keeps loading again.

I figured that its something to do with readyState and that by the time it reaches 4 the responseText is empty. But how can I get it to show the content and the console.log?

Thank you in advance for your time :)

@FrebinFrancis really why that is good and this xmlhttprequest is bad? any reasons other that syntactical sugar. — Jai, Sep 24 '15 at 08:33
@Metalbreath why do you need this: `handleStateChange` at all. — Jai, Sep 24 '15 at 08:35
see you will get much control over the XML http requests when using Ajax helpers, because they already done it for you. — Frebin Francis, Sep 24 '15 at 08:35
@Metalbreath you have commented out the outer one but another is inside too: `request.onreadystatechange=handleStateChange;`. — Jai, Sep 24 '15 at 08:37
@FrebinFrancis As I mentioned, Im new to Ajax. I just started learning the basics. I had no idea about ajax helpers but thank you for mentioning it. I will take a look at them. seems to be helpful :) — Metalbreath, Sep 24 '15 at 09:33
@Jai basically is the function I used for 'request.onreadystatechange=handleStateChange'. without it the website is on constant load and wont show any console results. but with it console works without showing any results on the website. I ve seen the extra bit of code after I made this post and I forgot to edit it. thank you for the notice (Edited) — Metalbreath, Sep 24 '15 at 09:37
@Metalbreath just posted an answer, may be you are using a wrong js method `writeln`. — Jai, Sep 24 '15 at 10:15

score 0 · Answer 1 · answered Sep 24 '15 at 10:14

but with it console works without showing any results on the website

As per your comment, I can suggest you that you are using a wrong method. There is no writeln method in javascript, instead you are suggested to use .write()(although not recommended).

change to this:

document.write(request.responseText);

or better:

document.body.innerHTML = request.responseText; // use this response contains html tags

or:

document.body.textContent = request.responseText; // use this response is just text

thats a nice information. Thank you. I havent even noticed. It seemed that my problem was caused by firebug. many get this problem. It works now. I hope it will stay this way :) — Metalbreath, Sep 24 '15 at 12:28

Ajax keeps site on the Loading

1 Answers1