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

Answer 2

Following from David's answer :

You have to use a relative path to stay within the same origin policy. Otherwise most browsers will simply return an empty responseText and status == 0 .

As one possible workaround, you could set up a very simple reverse proxy (with mod_proxy if you are using Apache). This would allow you to use relative paths in your AJAX request, while the HTTP server would be acting as a proxy to any "remote" location.

The fundamental configuration directive to set up a reverse proxy in mod_proxy is the ProxyPass . You would typically use it as follows:

ProxyPass     /ajax/     http://google.com/

In this case, the browser would be requesting /ajax/search?q=stack+overflow but the server would serve this by acting as a proxy to http://google.com/search?q=stack+overflow .

Answer 3

In addition to the same origin policy issue, your alert is in an illogical place. When you use XMLHttpRequest, the function assigned to xhr.onreadystatechange will be called whenever readyState changes. readyState should change (in theory) from 0 (initialized) to 1 (sent) to 2 (loading) to 3 (interactive) to 4 (finished).

What your code does is check the readyState and see if the request is finished ( if (xhr.readyState == 4) ), and if not, alert the HTTP status code . Since the request hasn't been sent yet (or has just been sent), there shouldn't be an HTTP status yet.

Ideally, you should move the alert inside the if block, so it lets you know when it finishes.