AJAX: В ожидании ответа?

Question

Я использую глобальные переменные для передачи ответа от вызова AJAX:

window.response = null; // most recent response from XMLHttpRequest

// the callback function for XMLHttpRequest
function userObjFromJSON() {
    if (this.readyState == 4) {
        var json = eval('(' + this.responseText + ')');
        window.response = json;
    }
    else {
        indicateLoading();
    }
}

// loads the info for this username on the page
function loadUsernameInfo(username) {
    clearPage();
    getUserInfo(username);
    var profile = window.response; // most recent json response (what if it hasn't come in yet?)
    window.response = null;
    if (profile) {
        indicateLoaded(username);
        fillInProfileInfo(profile);

        getTweets(username);
        var tweets = window.response; // most recent json response (what if it hasn't come in yet?)
        if (tweets) {
            fillInTweets(tweets, MAX_TWEETS);
            var mentions = mentionedUsers(tweets, MAX_TWEETS);
            fillInMentioned(mentions);
        }
        else {
            indicateUnavailableTweets();
        }
    }
    else {
        indicateInvalidUsername(username);
    }
}

Проблема в том, что к тому времени, когда функция контроллера хочет начать заполнять информацию, вызов AJAX еще не всегда возвращался. (Если я медленно прохожу через отладчик, он работает нормально.) Что я могу сделать, чтобы обойти это?

Я пробовал что-то вроде этого:

getUserInfo(username);
while (window.response == null); // infinite loop here
var profile = window.response; // most recent json response

Но из-за этого мой браузер не отвечает.

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

Answer 1

Лучшей практикой здесь было бы поместить код, который у вас есть в loadUsernameInfo, в обратный вызов для самого вызова AJAX, вместо того, чтобы полагаться на глобальную переменную. Таким образом, когда ваш ответ возвращается, обратный вызов, который выполняется, вместо того, чтобы просто установить переменную window.response, будет фактически обновлять ваш интерфейс и выполнять любые другие связанные задачи.

Другой способ сделать то же самое - просто позвонить loadUsernameInfo из существующего обратного вызова, например:

// the callback function for XMLHttpRequest
function userObjFromJSON() {
    if (this.readyState == 4) {
        var profile = eval('(' + this.responseText + ')');
        loadUsernameInfo(username, profile);
    }
    else {
        indicateLoading();
    }
}

Надеюсь, это поможет!

Answer 2

Ваш XMLHttpRequest должен использовать событие onreadystatechange. например:

var xmlHttp=new XMLHttpRequest();
xmlHttp.onreadystatechange=function(){
    if( xmlHttp.readyState!=4 || (xmlHttp.status!=200 && xmlHttp.status!=304))return;
    callback(xmlHttp.responseText);

}

Где callback () - это функция, которую вы хотите вызвать. Значение ReadyState, равное 4, означает, что контент завершил загрузку. И две записи статуса должны убедиться, что URL не выдал ошибку.

Answer 3

function userObjFromJSON() {
if (this.readyState == 4) {
    var json = eval('(' + this.responseText + ')');
    window.response = json;
// why dont you call needed function here ?
}
else {
    indicateLoading();
}

}

Почему вы не вызываете все необходимые функции при установке window.response?

В худшем случае вы можете использовать window.setTimeout для ожидания ответа ajax, но лучший способ - использовать события.