Javascript AJAX 类问题

Question

您好，我不确定如何描述这个问题，所以我希望代码能够解释我的问题。 ajax 函数调用的 php 脚本 ( phppage.php ) 只不过是 echo hello world 。

当alert('a')行留在带有ajax函数的recall函数中时，代码将按预期工作，最后一行会弹出消息“hello world”。然而，alert('a') 行被注释掉，最后一行不会给出“hello world”，而是给出值 13，如构造函数中设置的那样。

我正在 firefox 3.6.18 上尝试此操作，

如有任何帮助，我们将不胜感激。

function A() {
    this.b = 13;
    function finish(context,response) {
        context.b = response;
    }
    ajax(finish,this);
}

A.prototype = {
    constructor: A
}

function ajax(callback,context) {
    var http = new XMLHttpRequest();
    var url = "phppage.php";
    http.open("GET", url, true);
    http.onreadystatechange = recall;
    function recall() {
        alert('a');
        if(http.readyState == 4 && http.status == 200) {
            callback(context,http.responseText);
        }
    }
    http.send(null);
}

var d = new A();
alert(d.b);

Answer 1

我发现您的代码存在一些问题。第一个是你的完成函数，你对上下文变量所做的事情是非常糟糕的风格，Javascript 有一个称为闭包的功能，可以为你清理一切。你的构造函数应该看起来更像这样：

function A() {
    this.b = 13;
    //this is how you should be storing contexts
    var that = this;
    function finish(response) {
        that.b = response;
    }
    ajax(finish);
}

即使在构造函数 A 返回之后，finish 也可以访问它。而且你也不需要 A 下的原型东西。它实际上什么也没做。

最后，我们可以稍微整理一下您的 AJAX 函数，使其看起来像这样：

function ajax(callback) {
    var http = new XMLHttpRequest();
    var url = "phppage.php";
    http.open("GET", url, true);
    http.onreadystatechange = function() {
        alert('a');
        if(http.readyState == 4 && http.status == 200) {
            callback(http.responseText);
        }
    }
    http.send(null);
}

注意，这都是未经测试的代码，因此不能保证它会起作用，但我认为它会为您指明正确的方向。

编辑：

现在我查看您的代码，我意识到它可能正在工作，只是您异步调用 ajax，因此它立即返回，并且在返回 b 之前您正在回显 b 的值。

可能想尝试：（

http.open("GET", url, false);

但是我上面的所有评论仍然应该考虑，因为它们真的会清理一些东西）