javascript - отмена - как прервать ajax запрос




Отменить запросы Ajax с помощью jQuery (12)

Большинство методов jQuery Ajax возвращают объект XMLHttpRequest (или эквивалентный), поэтому вы можете просто использовать abort() .

См. Документацию:

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

UPDATE: с jQuery 1.5 возвращаемый объект является оболочкой для собственного объекта XMLHttpRequest, называемого jqXHR. Этот объект, как представляется, раскрывает все собственные свойства и методы, поэтому приведенный выше пример все еще работает. См . Объект jqXHR (документа API jQuery).

ОБНОВЛЕНИЕ 2: Начиная с jQuery 3, метод ajax теперь возвращает обещание с дополнительными методами (например, прерывание), поэтому приведенный выше код все еще работает, хотя возвращаемый объект больше не является xhr . См. Блог 3.0 здесь .

ОБНОВЛЕНИЕ 3 : xhr.abort() все еще работает с jQuery 3.x. Не предполагайте, что обновление 2 является правильным. Дополнительная информация о репозитории jQuery Github .

Используя jQuery, как я могу отменить / прервать запрос Ajax, на который я еще не получил ответ?


В следующем коде показано инициирование, а также прерывание запроса Ajax:

function libAjax(){
  var req;
  function start(){

  req =    $.ajax({
              url: '1.php',
              success: function(data){
                console.log(data)
              }
            });

  }

  function stop(){
    req.abort();
  }

  return {start:start,stop:stop}
}

var obj = libAjax();

 $(".go").click(function(){


  obj.start();


 })



 $(".stop").click(function(){

  obj.stop();


 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="go" value="GO!" >
   <input type="button" class="stop" value="STOP!" >

Вы можете прервать любой непрерывный вызов ajax, используя этот

<input id="searchbox" name="searchbox" type="text" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
     var request = null;
        $('#searchbox').keyup(function () {
            var id = $(this).val();
            request = $.ajax({
                type: "POST", //TODO: Must be changed to POST
                url: "index.php",
                data: {'id':id},
                success: function () {

                },
                beforeSend: function () {
                    if (request !== null) {
                        request.abort();
                    }
                }
            });
        });

</script>

Вы не можете вспомнить запрос, но вы можете установить значение тайм-аута, после которого ответ будет проигнорирован. См. Эту page для jQuery AJAX. Я считаю, что ваш обратный вызов будет вызываться, если превышен период ожидания. Для каждого запроса AJAX уже установлен тайм-аут по умолчанию.

Вы также можете использовать метод abort() для объекта запроса, но, в то время как это заставит клиента прекратить прослушивание события, возможно, это не остановит сервер от его обработки.


Запросы AJAX могут не выполняться в том порядке, в котором они были запущены. Вместо прерывания вы можете игнорировать все ответы AJAX, за исключением последнего:

  • Создать счетчик
  • Увеличение счетчика при запуске запроса AJAX
  • Использовать текущее значение счетчика для «штампа» запроса
  • В обратном вызове успеха сравните штамп со счетчиком, чтобы проверить, был ли он самым последним запросом

Грубая схема кода:

var xhrCount = 0;
function sendXHR() {
    // sequence number for the current invocation of function
    var seqNumber = ++xhrCount;
    $.post("/echo/json/", { delay: Math.floor(Math.random() * 5) }, function() {
        // this works because of the way closures work
        if (seqNumber === xhrCount) {
            console.log("Process the response");
        } else {
            console.log("Ignore the response");
        }
    });
}
sendXHR();
sendXHR();
sendXHR();
// AJAX requests complete in any order but only the last 
// one will trigger "Process the response" message

Демо на jsFiddle


Как отмечают многие люди в потоке, только потому, что запрос прерывается на стороне клиента, сервер все равно обработает запрос. Это создает излишнюю нагрузку на сервер, потому что он выполняет работу, которую мы перестали слушать в интерфейсе.

Проблема, которую я пыталась решить (что другие могут зайти в нее), заключается в том, что когда пользователь вводил информацию в поле ввода, я хотел отменить запрос на тип Instant Instant.

Чтобы избежать стрельбы ненужными запросами и поддерживать привязанность внешнего интерфейса, я сделал следующее:

var xhrQueue = [];
var xhrCount = 0;

$('#search_q').keyup(function(){

    xhrQueue.push(xhrCount);

    setTimeout(function(){

        xhrCount = ++xhrCount;

        if (xhrCount === xhrQueue.length) {
            // Fire Your XHR //
        }

    }, 150);

});

Это будет по существу отправлять один запрос каждые 150 мс (переменная, которую вы можете настроить для своих нужд). Если у вас возникли проблемы с пониманием того, что именно происходит здесь, xhrCount и xhrQueue на консоль перед блоком if.


Просто используйте ajax.abort (), например, вы можете прервать любой ожидающий запрос ajax перед отправкой другого, подобного этому

//check for existing ajax request
if(ajax){ 
 ajax.abort();
 }
//then you make another ajax request
$.ajax(
 //your code here
  );

Просто позвоните xhr. abort () - это объект jquery ajax или собственный объект XMLHTTPRequest.

пример:

//jQuery ajax
$(document).ready(function(){
    var xhr = $.get('/server');
    setTimeout(function(){xhr.abort();}, 2000);
});

//native XMLHTTPRequest
var xhr = new XMLHttpRequest();
xhr.open('GET','/server',true);
xhr.send();
setTimeout(function(){xhr.abort();}, 2000);

У меня была проблема опроса, и как только страница была закрыта, опрос продолжился, поэтому в моей причине пользователь пропустил обновление, поскольку значение mysql устанавливалось в течение следующих 50 секунд после закрытия страницы, хотя я убил запрос ajax, я разобрался, используя $ _SESSION для установки var, не будет обновляться в опросе, пока он не закончится, а новый не запустится, поэтому я сделал значение в моей базе данных как 0 = offpage, в то время как я опрос Я запрашиваю эту строку и возвращаю false; когда это 0, поскольку запрос в опросе даст вам текущие значения, очевидно ...

Я надеюсь, что это помогло


Это асинхронный запрос, означающий, что он отправлен туда.

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

В противном случае просто игнорируйте ответ AJAX.


Я поделился demo , демонстрирующей, как отменить запрос AJAX - если данные не возвращаются с сервера в течение предопределенного времени ожидания.

HTML:

<div id="info"></div>

JS CODE:

var isDataReceived= false, waitTime= 1000; 
$(function() {
    // Ajax request sent.
     var xhr= $.ajax({
      url: 'http://api.joind.in/v2.1/talks/10889',
      data: {
         format: 'json'
      },     
      dataType: 'jsonp',
      success: function(data) {      
        isDataReceived= true;
        $('#info').text(data.talks[0].talk_title);        
      },
      type: 'GET'
   });
   // Cancel ajax request if data is not loaded within 1sec.
   setTimeout(function(){
     if(!isDataReceived)
     xhr.abort();     
   },waitTime);   
});

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

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





ajax