我在XMLHttpRequest中缺少什么？

Question

我是javascript和ajax世界的新手,但我正在努力学习.

现在我正在测试XMLHttpRequest,即使是最简单的例子我也无法工作.这是我正在尝试运行的代码

    <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>

而且我总是得到状态为0的警报.我已经阅读了大量关于此的网页,我不知道我错过了什么.我将不胜感激,谢谢!

Answer 1

您正在使用同源策略.

除非您的代码实际上在www.google.com上运行(这不太可能),否则会出错.

此外,虽然目前这不会给你带来麻烦,但这种做法很糟糕,并且会导致竞争条件,你在整个地方使用全局变量.

将xhr变量设为函数的本地变量

var xhr = new XMLHttpRequest();

并this在onreadstatechange方法内部参考它.

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

Answer 2

根据大卫的回答:

您必须使用相对路径保持在同一原始策略中.否则大多数浏览器只会返回一个空的responseText和status == 0.

作为一种可能的解决方法,您可以设置一个非常简单的反向代理(如果您使用的是Apache,则使用mod_proxy).这将允许您在AJAX请求中使用相对路径,而HTTP服务器将充当任何"远程"位置的代理.

在mod_proxy中设置反向代理的基本配置指令是ProxyPass.您通常会按如下方式使用它:

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

在这种情况下,浏览器将请求,/ajax/search?q=stack+overflow但服务器将通过充当代理来服务于此http://google.com/search?q=stack+overflow.