jQuery ajax вызов в обработчике onunload ПОСЛЕ ПОЛУЧЕНИЯ страницы при обновлении вручную. Как я могу гарантировать, что onunload произойдет первым?

Question

У меня возникла ситуация, когда на странице разгрузки я запускаю запрос на удаление черновика работы пользователя. Это работает нормально, пока пользователь не решит обновить страницу, после чего проверка вкладки сети Chrome показывает, что Chrome загружает новую страницу до того, как запрос ajax действительно будет запущен. В результате создается новый черновик при загрузке страницы, а затем сразу удаляется вызовом ajax. Вот в основном то, что я делаю:

window.onbeforeunload = function(){
    if (pageUpdated){
        return 'Are you sure you want to abandon this draft?';
    }
}

window.onunload = function(){
    $.ajax({
        async: false,
        type: 'DELETE',
        url: '/some/url/'
    });
}

Есть ли способ заставить обработчик onunload завершить работу перед отправкой запроса на новую страницу?

Проверенные браузеры: (Chrome 9, FF 3.6) в Ubuntu 10.04 Lucid

Answer 1

В onbeforeunload или $.unload() настройте свой объект AJAX с помощью async = false. Это обеспечит завершение вызова ajax до выгрузки страницы.

Я знаю, что этому вопросу несколько месяцев, но я хотел бы добавить эту информацию на тот случай, если она поможет любому, кто ищет похожую проблему с AJAX!

Answer 2

Синхронизация запроса XHR должна задержать загрузку новой страницы до завершения запроса. Я не знаю, как jQuery выполняет свои синхронные XHR-запросы под капотом, но вот как вы можете сделать это, используя простой JavaScript:

var request = new XMLHttpRequest();
// or new ActiveXObject("Microsoft.XMLHTTP") for some versions of IE
request.open("GET", "/some/url", false);
request.send(null);

var result = request.responseText;
alert(result);

Включение этого в ваш обработчик выгрузки должно заставить браузер подождать, пока "/some/url" загрузится, прежде чем он перейдет на следующую страницу.

Answer 3

Я здесь, чтобы подтвердить ответ @Silkster. Я могу запустить AJAX-запрос после установки опции async = false

Вот пример кода.

$(window).unload( function () {
    $.ajaxSetup ({
        async: false  
    });
    $.get("target.php");
});

Answer 4

Вы можете попробовать использовать window.onbeforeunload вместо этого, хотя я не уверен, реализовано ли это во всех браузерах.