What am I missing in the XMLHttpRequest?

Question

I'm completely new to the javascript and ajax world but trying to learn.

Right now I'm testing the XMLHttpRequest and I can't make work even the simplest example. This is the code I'm trying to run

    <script type="text/javascript">
        function test() {
            xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200){
                    var container = document.getElementById('line');
                    container.innerHTML = xhr.responseText;
                } else {
                    alert(xhr.status);
                }
            }  

            xhr.open('GET', 'http://www.google.com', true);                  
            xhr.send(null); 
        }
    </script>

And I always get the alert with the status 0. I've read tons of webs about this and I don't know what am I missing. I will appreciate any help, thanks!

Answer 1

You are running into the Same Origin Policy.

Unless your code is actually running on www.google.com (which is unlikely), this is going to error.

Also, and while this isn't causing you a problem at the moment, it is poor practice and can lead to race conditions, you are using globals all over the place.

Make the xhr variable local to the function

var xhr = new XMLHttpRequest();

And refer to it with this inside the onreadstatechange method.

if (this.readyState == 4 && this.status == 200){
// etc etc