Динамическое извлечение страниц с помощью AJAX

Question

У меня вопрос по поводу частичной загрузки страницы с помощью AJAX.

Предположим, что пользователь нажимает кнопку, которая выполняет вызов AJAX, чтобы загрузить часть страницы (возможно, она может включать в себя динамически загружаемый JS и / или CSS), и HTML-содержимое отбрасывается на некоторый элемент div. Затем, прежде чем первая загрузка будет завершена, он нажимает на другую кнопку, которая выполняет еще один AJAX-вызов, который сбрасывает другое содержимое в тот же элемент div. Как я должен предотвратить это поведение, чтобы создать какие-либо конфликты? Некоторые возможные конфликты могут быть такими, как, например, первая загрузка выполняет JS для контента, который не найден, потому что вторая загрузка уже изменила этот div.

Заранее спасибо.

Edit: Буду признателен за ответы, основанные на асинхронных методах. Спасибо.

Answer 1

Genesis и Gaurav правы относительно отключения взаимодействия с пользователем.+1 от меня к каждому из них.Как вы справляетесь с логикой, на самом деле довольно просто:

$('#my_submit_button').click(function(){
    $.ajax({
        url:'/my_file.php',
        dataType='json',
        beforeSend:function(){
            $('#my_submit_button').prop('disabled',true);
        },
        error: function(jqXHR, status, error){
            // handle status for each: "timeout", "error", "abort", and "parsererror"
            // Show submit button again:
            $('#my_ajax_container').html('Oops we had a hiccup: ' + status);
            $('#my_submit_button').prop('disabled',false);
        },
        success:function(data){
            $('#my_ajax_container').html(data);
            $('#my_submit_button').prop('disabled',false);
        }
    });
});

Answer 2

Просто отключите кнопки, которые вызывают вызовы AJAX, пока они еще не завершены.

Answer 3

• сделать это синхронно (не рекомендуется)
• отключить ссылку / кнопку во время ajaxing
• не против этого

но в вашем случаене будет конфликтовать, потому что при замене html скрипты тоже

Answer 4

Я не уверен, что это на самом деле будет проблемой для вас, потому что Javascript является однопоточным. Когда приходит первый ответ ajax и вы выполняете некоторый javascript, этот javascript не может быть прерван вторым ответом ajax, если он представляет собой один непрерывный поток выполнения (без таймеров или других асинхронных вызовов ajax как часть его обработки).

Давайте пробежимся по сценарию:

1. Пользователь нажимает кнопку - начинается первый вызов ajax.
2. Пользователь нажимает кнопку - начинается второй вызов ajax.
3. Первый ajax-вызов завершается, и начинается выполнение кода завершения для того, что делать с новыми данными.
4. Пока код выполняется из первого вызова ajax, второй вызов ajax завершается. На этом этапе браузер помещает завершение второго вызова ajax в очередь. Он не может вызвать ни один из ваших кодов завершения, потому что движок Javascript все еще работает с первой загрузки.
5. Теперь первая загрузка завершает выполнение и код и возвращается из обработчика завершения.
6. Браузер переходит в свою очередь и находит следующее событие для обработки. Он находит завершение второго вызова ajax и затем запускает код завершения для этого вызова ajax.

Как вы можете видеть из этого сценария, в котором есть перекрывающиеся вызовы ajax, а второй завершается в середине обработки первого, конфликт по-прежнему отсутствует, поскольку механизм Javascript является однопоточным.

Теперь, как предлагали другие ответы, вы не хотите, чтобы этот пользователь запускал новый запрос, пока он еще обрабатывается, но технически они не конфликтуют друг с другом. У вас есть несколько инструментов, которые вы можете выбрать, если хотите предотвратить наложение вызовов:

• Вы можете запретить запуск второго вызова, пока первый вызов не завершен. Вы можете сделать это как в пользовательском интерфейсе, так и в реальном коде.
• Если имеется несколько ожидающих вызовов, вы можете решить отбросить / проигнорировать более ранние ответы и не обрабатывать их - ожидая только последнего ответа.
• Когда инициируется второй вызов, вы можете отменить первый вызов.
• Вы можете позволить второму просто заменить первое, как в приведенном выше сценарии.

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