如何制作一个高效的基于 ajax 的 javascript 脚本

Question

当脚本通常依赖于一些 ajax 或服务器响应时，我通常会像这样或类似的东西在 javascript 中构建我的脚本。我真的不认为这是最有效的处理方式，那么执行这些类型的脚本的更好方式是什么？

function someclass() {

    //some internal variables here
    this.var1 = null;
    this.var2 = null;
    ...

    //some ajax function which gets some critical information for the other functions
    this.getAJAX = function() {
        self = this;
        urls = "someurlhere";
        //jquery ajax function
        $.ajax({
            type: "GET",
            url: url,
            dataType: 'json',
            complete: function (xhr, textStatus) {
                //get the response from the server
                data = JSON.parse(xhr.responseText);
                //call the function which will process the information
                self.processAJAX(data);
            }
         })

    this.processAJAX = function(data) {
        //set some of the internal variables here
        //according to the response from the server

        //now that the internal variables are set,
        //I can call some other functions which will
        //use the data somehow
        this.doSomething();
    }

    this.doSomething = function() {
        //do something here
    }

}

所以我会使用这样的脚本：

//instantiate the class
foo = new someClass();

//get the information from the server
//and the processAjax function will eventually
//call the doSomething function
foo.getAjax();

所以我真的不喜欢这样，因为在使用脚本时并不清楚发生了什么。我希望能够做这样的事情：

//instantiate the class
foo = new someClass();

//get info from the server
//in this example, the processAJAX function will not call the doSomething
foo.getAjax();

//do something
foo.doSomething();

但这不起作用，因为通常来自服务器的响应需要一些时间，所以当调用 doSomething 时，还没有必要的信息，因此，该函数没有做它应该做的事情。

如何做到这一点？

我确信答案已经在 StackOverflow 上的某个地方，但是我找不到任何东西，所以我会很感激，无论是答案还是指向可以解释这一点的资源的链接，都可能在 StackOverflow 上。任何帮助表示赞赏。谢谢。

Answer 1

标准模式是接受一个回调函数到你的异步方法，当操作完成时类负责调用。

function someclass() {
    this.getAJAX = function(callback) {
        this.afterAJAXCallback = callback;
        ...
    });

    this.processAJAX = function(data) {
        ...
        if (this.afterAJAXCallback) this.afterAJAXCallback();
    }
}

然后你可以使用闭包回调来构建你的代码，就像使用 jQuery 的 $.ajax 时一样：

foo = new someClass();
foo.getAjax(function() {
    foo.doSomething();
});

Answer 2

听起来您想要一个 ajax 事件侦听器或回调。做一些搜索，你会找到一些解决方案。其中很多都是基于 jQuery 的，但如果 jQuery 不适合您的应用程序，当然也可以不使用它。

对于 jQuery，相关文档位于 http://api.jquery.com/jQuery.ajax/。它不称它为事件监听器，但请参阅有关context 的部分和succes 的回调。

另一种可能性是同步而不是异步进行 ajax 调用。 （同样，做一些搜索，你会发现很多东西。）如果你走那条路，你要小心确保同步调用基本上不会让你的应用挂起等待响应。

Answer 3

如果您使用XMLHttpRequest() synchronous，您可以按照自己喜欢的方式进行操作。