javascript - why does this piece of js throw a DOM Exception? - Stack Overflow

admin管理员组

文章数量:1334342

I can't figure out why this fiddle throws

Uncaught Error: InvalidStateError: DOM Exception 11

function url(){
 return '/echo/js/?js=' + 5 + Math.floor(Math.random()*900);
}

function poll(done){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.status === 200 && xhr.readyState === 4){
            var foo = xhr.responseText;
            done(parseInt(foo));
        }
    };
    xhr.open('get',url(),false);
    xhr.send(null);
}

var button = document.querySelector('#poller');
var price = document.querySelector('#price');

button.addEventListener('click', function(){
    poll(function(data){
        price.innerText = data;
    });
},false);

I can't figure out why this fiddle throws

Uncaught Error: InvalidStateError: DOM Exception 11

function url(){
 return '/echo/js/?js=' + 5 + Math.floor(Math.random()*900);
}

function poll(done){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.status === 200 && xhr.readyState === 4){
            var foo = xhr.responseText;
            done(parseInt(foo));
        }
    };
    xhr.open('get',url(),false);
    xhr.send(null);
}

var button = document.querySelector('#poller');
var price = document.querySelector('#price');

button.addEventListener('click', function(){
    poll(function(data){
        price.innerText = data;
    });
},false);

• javascript
• xmlhttprequest

Share Improve this question Follow asked Mar 25, 2013 at 19:20 bevacquabevacqua 48.6k5656 gold badges174174 silver badges286286 bronze badges 9

• 1 Your fiddle works well for me. On which line do you get that error message? – Bergi Commented Mar 25, 2013 at 19:26
• after clicking the button – bevacqua Commented Mar 25, 2013 at 19:26
• @EricLeschinski Not true, readyState is immediately available...it's a property of XMLHttpRequest – Ian Commented Mar 25, 2013 at 19:27
• And why are you sending a synchronous request (false third parameter) yet using the onreadystatechange method? – Ian Commented Mar 25, 2013 at 19:30
• 1 If you look at the MDN docs, it says not to use onreadystatechange with synchronous requests... developer.mozilla/en-US/docs/DOM/XMLHttpRequest#Properties – Ian Commented Mar 25, 2013 at 19:32

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 8

The problem is the status not available when the readyState is 0/1

You need to reverse the order in your if.

if(xhr.readyState === 4 && xhr.status === 200){

The spec says it should return zero "If the state is UNSENT or OPENED, return 0 and terminate these steps.", but for some reason some browsers do this "Throws an "InvalidStateError" exception if the state is not OPENED or if the send() flag is set." which is what setRequestHeader does. Also your code is weird that you would use it with a synchronous request.

So the issue here is the browser is not returning zero like the spec says so. Changing the order in the if statement prevents the browser from reaching that point since the first check fails.

And the bug on WebKit

本文标签： javascriptwhy does this piece of js throw a DOM ExceptionStack Overflow