Как определить, загружается ли скрипт в Ajax с помощью jQuery?

Question

Как определить, загружается ли скрипт в Ajax с использованием jQuery, например, я использую следующий jQuery / AJAX.

$('#select-countries').change(function(){
    var countryId = $(this).val();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: 'countryId='+countryId,
        success: function(states){
            if(states == 'null') {
                $('#select-states-container').html(emptyState);
            } else if(states == '0') {
                $('#select-states-container').html(chooseState);
            } else {
                $('#select-states-container').html(states);
            }   
        }
    });
});

Теперь в зависимости от состояния загрузки я хочу отобразить сообщениеили отобразить загрузочный GIF, я хотел бы знать, есть ли AJAX-состояния, такие как при загрузке, при завершении?

Answer 1

Я должен открыть диалоговое окно загрузки перед вызовом ajax, а затем использовать ajax # complete (), чтобы удалить его или изменить сообщение:

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    beforeSend: function(jqXHR, settings) {
       // show the awesome dialog
    },
    complete: function(jqXHR, textStatus) {
       // remove the awesome dialog
    },
    error(jqXHR, textStatus, errorThrown) {
       // post the not so awesome message in the awesome dialog
    },
    success: function(states){
        if(states == 'null') {
            $('#select-states-container').html(emptyState);
        } else if(states == '0') {
            $('#select-states-container').html(chooseState);
        } else {
            $('#select-states-container').html(states);
        } 
        // change the message in the awesome dialog???
    }
});

Answer 2

С http://api.jquery.com/jQuery.ajax/:

beforeSend (jqXHR, настройки)
Функция обратного вызова перед запросом

error (jqXHR, textStatus, errorThrown)
Функция, вызываемая в случае сбоя запроса

success (data, textStatus, jqXHR)
Функция, вызываемая в случае успешного выполнения запроса.

выполнено (jqXHR, textStatus)
Функция, вызываемая по завершении запроса (после выполнения обратных вызовов и успешных ошибок).

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    beforeSend: function() {
        your_loading_function();
    },
    success: function(states){
        if(states == 'null') {
            $('#select-states-container').html(emptyState);
        } else if(states == '0') {
            $('#select-states-container').html(chooseState);
        } else {
            $('#select-states-container').html(states);
        }   
    },
    complete: function() {
        clear_your_loading_message();
    }
});    

Answer 3

$('#select-countries').change(function(){
    var countryId = $(this).val();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: 'countryId='+countryId,
        beforeSend(jqXHR, settings) {
            // Here is your 'loading' state
            $('#select-states-container').html('Loading...');
        },
        complete: function(jqHXR, status) {
            // Here is your complete state, unbiased of success or fail
            alert('Ajax call completed');
        },
        error:function(jqXHR, textStatus, errorThrown) {
            // Here is your complete state with error
            $('#select-states-container').html(textStatus + ' -- ' + errorThrown);
        },
        success: function(states){
            if(states == 'null') {
                $('#select-states-container').html(emptyState);
            } else if(states == '0') {
                $('#select-states-container').html(chooseState);
            } else {
                $('#select-states-container').html(states);
            }   
        }
    });
});

Answer 4

да, вы можете использовать ajaxStart, ajaxSend и ajaxStop для регистрации обработчика в запросе ajax

$('#selected-countries').ajaxStop(function() {
  //do something....
});

см. http://api.jquery.com/ajaxStop/

Answer 5

Здесь вы можете использовать любые глобальные события ajax, которые соответствуют вашим потребностям, вы, вероятно, после $. AjaxComplete () или $. AjaxSuccess () для завершения и $. AjaxStart () для инициации.