Javascript Анализ запросов AJAX

Question

1. Фон: В следующем клиентском скрипте на сервер отправляется запрос AJAX для данных из файла JSON, расположенного на сервере. Предпочтительный подход заключается в отправке одного запроса на все данные, требуемые на странице, в отличие от многих отдельных запросов на данные на всей странице.

2. Проблема: поскольку запросы AJAX выполняются асинхронно, предупреждение №2 в нижней части страницы выполняется во время загрузки страницы, когда предупреждение № 1, находящееся в запросе, запускается после загрузки страницы. В результате значение для game.game_nb в предупреждении № 2 «неопределено», а значение для game.game_nb в сообщении № 1 содержит действительные данные. Обратите внимание, что игровой объект имеет функциональную область действия.

3. Вопрос: Как настроить запрос AJAX таким образом, чтобы сообщение № 2 имело значение во время загрузки страницы? Я понимаю, что одним из подходов является запрос AJAX каждый раз, когда страница нуждается в данных из игрового объекта. Я бы предпочел не делать этого, основываясь на соображениях производительности и читаемости кода. Я проверил другие ответы на stackoverflow, но никто, кажется, не затрагивает эту конкретную проблему.

Цените любые мысли и предложения ...

{ // loadGame 
    var request = new XMLHttpRequest(); 
    path = setHTTPRequestPath("loadGame"); 
    request.open("POST", path, true); 
    request.setRequestHeader("header_nb", "108"); 
    request.setRequestHeader("header_nm", "loadGame"); 
    request.setRequestHeader("game_nb", gameNumber); 
    request.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); 
    request.send(null); 
    request.onreadystatechange = function() 
    { 
    if ((request.readyState === 4) && (request.status === 200)) 
    { 
     game = JSON.parse(request.responseText, "utf8"); 
     alert("alert #1: " + game.game_nb); 
    } 
    } 
} // eofcb 

alert("alert #2: " + game.game_nb); 

Answer 1

Как ты сам сказал, файл JSON находится на сервере, и game.game_nb заполняется в результате запроса. Таким образом, вы не получите результат при оповещении № 2, потому что в это время запрос ajax все еще находится в процессе.

После того, как вызов ajax будет выполнен, будет активирована динамическая функция для, onreadystatechange, которая даст правильный результат для предупреждения № 1.

Помните последовательность в вашем фрагменте кода:

• Отправить запрос Аякса.
• Выполнить предупреждение № 2 (Нет значения)
• Получите отклик.
• Выполнить предупреждение № 1 (со значением)