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

您正在遇到Same Origin Policy。

除非您的代码实际上在www.google.com上运行（这不太可能），否则会出错。

另外，虽然目前这不会给你造成问题，但这种做法很糟糕，并且会导致竞争条件，你在整个地方使用全局变量。

将xhr变量设为函数

的局部变量

var xhr = new XMLHttpRequest();

在this方法中使用onreadstatechange引用它。

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

Answer 2

来自David's answer：

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

作为一种可能的解决方法，您可以设置一个非常简单的reverse proxy（如果您使用的是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的代理来实现此目的。

Answer 3

除了相同的原始政策问题，您的alert处于不合逻辑的位置。使用XMLHttpRequest时，只要xhr.onreadystatechange发生更改，就会调用分配给readyState的函数。 readyState应该（理论上）从0（初始化）更改为1（发送）到2（加载）到3（交互式）到4（已完成）。

您的代码所做的是检查readyState并查看请求是否已完成（if (xhr.readyState == 4)），如果不是，alert HTTP status code。由于请求尚未发送（或刚刚发送），因此不应该有HTTP状态。

理想情况下，您应该移动alert块中的if，以便在完成时通知您。

我在XMLHttpRequest中缺少什么？

3 个答案: