Как сделать эффективный javascript-скрипт на основе ajax

Question

Я обычно структурирую свои скрипты в javascript, например, или что-то похожее, когда скрипт зависит от какого-то ajax или ответа сервера в целом. Я действительно не чувствую, что это самый эффективный способ сделать что-то, так что было бы лучшим способом сделать эти типы сценариев?

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();
    }
}

Затем вы можете использовать обратный вызов замыкания для структурирования вашего кода, так же, как при использовании $ .ajax в jQuery:

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

Answer 2

Если вы используете XMLHttpRequest() синхронный , вы можете сделать это так, как вам нравится.

Answer 3

Звучит так, будто вы хотите прослушиватель событий ajax или обратный вызов. Сделайте некоторые поиски для этого, и вы найдете некоторые решения. Многие из них будут основаны на jQuery, но, безусловно, возможно сделать это без jQuery, если это плохо подходит для вашего приложения.

Для jQuery соответствующая документация находится по адресу http://api.jquery.com/jQuery.ajax/. Он не называет это прослушивателем событий, но видит часть о context и обратный вызов для succes.

Другой возможностью было бы выполнять ваши ajax-вызовы синхронно, а не асинхронно. (Опять же, сделайте некоторые поиски, и вы найдете много вещей.) Если вы пойдете по этому пути, вы должны быть осторожны, чтобы убедиться, что синхронный вызов в основном не вешает ваше приложение в ожидании ответа.