What am I missing in the XMLHttpRequest?

Question

Hi guys, 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

+1 to both Daniel and David for the correct answers, I'd like to add in the comment that there's very few cases (unless you just want to learn JS better) that you should be directly using xhr vice using a library like jQuery which has been tested and proved by millions of developers around the world. It also has a lot of other useful features that'll help you with your ajax development (like animations and DOM manipulation).

Paul

Answer 4

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.