Хорошо, для целей этого вопроса я проигнорирую обоснование того, почему вам требуются синхронные запросы XHR.Я понимаю, что иногда рабочие ограничения не позволяют использовать лучшие практические решения, и поэтому мы «справляемся», чтобы выполнить работу.Итак, давайте сосредоточимся на том, как получить синхронный ajax с визуальным обновлением, работающим на вас!
Учитывая, что вы используете jQuery для вашего XHR-запроса, я предполагаю, что можно использовать jQuery для отображения / скрытия загрузкииндикатор и для решения любых вопросов синхронизации.
Сначала давайте настроим индикатор загрузки в нашей разметке:
<div id="loading" style="display:none;">Loading...</div>
Теперь давайте создадим некоторый JavaScript:
// Show the loading indicator, then start a SYNCRONOUS ajax request
$('#loading').show().delay(100).queue(function() {
var jqxhr = $.ajax({type:"GET",dataType:"json",url:"www.yoururl.com/ajaxHandler",async: false}).done(function(){
//Do your success handling here
}).fail(function() {
//Do your error handling here
}).always(function() {
//This happens regardless of success/failure
$('#loading').hide();
});
$(this).dequeue();
});
СначалаМы хотим показать наш индикатор загрузки, а затем дать браузеру небольшую задержку для перерисовки, прежде чем начнется наш синхронный XHR-запрос.Используя метод jQuery .queue(), мы помещаем наш вызов .ajax() в очередь fx по умолчанию, чтобы он не выполнялся до тех пор, пока не завершится .delay(), что, конечно, не произойдет, пока не завершится .show().
Метод jQuery .show() изменяет стиль отображения CSS целевого элемента на блокированный (или восстанавливает его начальное значение, если назначено).Это изменение в CSS заставит браузер перекомпоноваться (он же «перерисовать»), как только сможет.Задержка гарантирует, что он сможет перекомпоноваться перед вызовом Ajax.Задержка не обязательна во всех браузерах, но не повредит больше, чем указанное вами количество миллисекунд (как обычно, IE будет ограничивающим фактором, другие браузеры довольны задержкой в 1 мс, IE хотел чего-то немногоболее важно перерисовать).
Вот jsfiddle для тестирования в нескольких браузерах: Пример jsfiddle