JQuery Ajax (перед отправкой и завершением) работает правильно на FireFox, но не на IE8 и Chrome

Question

Я использую jQuery ajax версии 1.4.1 в своем приложении MVC (хотя обсуждаемая мной проблема была такой же со старой версией jQuery 3.2.1), чтобы при регистрации клиента проверить, зарегистрировано ли имя пользователя. Когда пользователь нажимает кнопку «Проверить доступность», я показываю занятое изображение вместо кнопки проверки (фактически скрывая кнопку проверки и показывая изображение), проверяя доступность на сервере и затем отображая сообщение. Это синхронный вызов (async: false), и я использовал beforeSend: и complete: для отображения и скрытия занятого изображения и кнопки проверки. Это работает хорошо в Firefox, но в IE 8 и Chrome ни изображение занятости не появляется, ни кнопка проверки не скрывается, а кнопка проверки оставалась нажатой, так как все зависло. Хотя доступные и недоступные сообщения отображаются правильно. Ниже приведен код:

HTML в пользовательском элементе управления (ascx):

<div id="available">This Username is Available</div>

div id="not_available">This Username is not available</div>

<input id="txtUsername" name="txtUsername" type="text" size="50" />&nbsp;

<button id="check" name="check" type="button">Check Availability</button>

<img id="busy" src="/Content/Images/busy.gif" />

В верхней части этого пользовательского элемента управления я связываю внешний файл javascript со следующим кодом:

$(document).ready(function() {

    $('img#busy').hide();
    $('div#available').hide();
    $('div#not_available').hide();

    $("button#check").click(function() {
        var available = checkUsername($("input#txtUsername").val());

        if (available == "1") {
            $("div#available").show();
            $("div#not_available").hide();
        }
        else {
            $("div#available").hide();
            $("div#not_available").show();
        }
    });
});


function checkUsername(username) {

    $.ajax({

        type: "POST",

        url: "/SomeController/SomeAction",

        data: { "id": username },

        timeout: 3000,

        async: false,

        beforeSend: function() {

            $("button#check").hide();

            $("img#busy").show();

        },

        complete: function() {

            $("button#check").show();

            $("img#busy").hide();

        },        

        cache: false,

        success: function(result) {

             return result;

        },

        error: function(error) {

            $("img#busy").hide();

            $("button#check").show();

            alert("Some problems have occured. Please try again later: " + error);

        }

    });

}

Answer 1

Я нашел ответ на свой вопрос. Это был фактически вызов синхронизации (async = false), который сводил IE с ума. Я удалил это и скорректировал код, и теперь все работает нормально.

Answer 2

Обратите внимание: async = false устарело с jQuery 1.5

Вместо этого следует использовать callback complete ().