Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What am I missing in the XMLHttpRequest?

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!

like image 340
Ferdy89 Avatar asked Mar 20 '10 12:03

Ferdy89


2 Answers

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
like image 120
Quentin Avatar answered Sep 27 '22 22:09

Quentin


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.

like image 31
Daniel Vassallo Avatar answered Sep 27 '22 22:09

Daniel Vassallo