Anulare cereri Ajax folosind jQuery

Cele mai multe dintre jQuery Ajax metode de a returna un XMLHttpRequest (sau echivalent) obiect, astfel încât să puteți folosi pentru abort()`.

Consultați documentația:

• abandona Metoda (MSDN). Anulează actuala cerere HTTP.
• abort() (MDN). Dacă cererea a fost trimisă deja, această metodă va anula cererea.

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()

ACTUALIZARE: Ca de jQuery 1.5 obiectul returnat este un wrapper pentru nativii obiectul XMLHttpRequest numit jqXHR. Acest obiect pare a expune toate nativ proprietăți și metode exemplul de mai sus încă mai funcționează. Vezi A jqXHR Obiect (jQuery API documentation).

UPDATE 2: Ca de jQuery 3, ajax metoda returnează acum o promisiune cu un plus de metode (anulare), astfel încât codul de mai sus încă mai funcționează, deși obiectul returnat nu este un `xhr mai. Vezi 3.0 blog aici.

UPDATE 3: xhr.abort() încă mai funcționează pe jQuery 3.x. Don't-și asume update 2 este corect. Mai multe informatii pe jQuery depozit Github.

Puteți't amintesc cererea, dar puteți seta o valoare de expirare, după care răspunsul va fi ignorat. Vezi asta page pentru jquery AJAX opțiuni. Eu cred ca eroare de apel invers va fi numit în cazul în care perioada de expirare este depășită. Există deja o implicită de expirare de pe fiecare cerere AJAX.

Puteți folosi, de asemenea, abort() metoda pe cererea de obiect, dar, în timp ce-l va determina pe client să mai asculți pentru eveniment, it poate probabil nu se va opri serverul de prelucrare.

L's o asincron cerere, adică după ce se's a trimis-o's de acolo.

În cazul în care server-ul dvs. este de a începe o operațiune foarte costisitoare datorită cerere AJAX, tot ce poți face este să-ți deschizi server pentru a asculta pentru a anula cererile, și trimite-o separat AJAX cerere de notificare la server pentru a opri orice's fac.

În caz contrar, pur și simplu ignora AJAX răspuns.

Salva apelurile pe care le face într-o matrice, atunci suna xhr.abort() pe fiecare.

MARE PRECIZARE: nu se poate abandona o cerere, dar care's doar partea de client. Partea de server ar putea fi încă de procesare a cererii. Dacă utilizați ceva de genul PHP sau ASP cu datele de sesiune, sesiune de date este blocat până când ajax a terminat. Deci, pentru a permite utilizatorului pentru a continua navigarea pe site-ul, aveți pentru a apela session_write_close(). Acest lucru economisește sesiune și se deblochează astfel încât alte pagini de așteptare pentru a continua va continua. Fără acest lucru, mai multe pagini pot fi de așteptare pentru blocare pentru a fi eliminate.

Cererile AJAX nu poate finaliza în ordinea în care au fost început. În loc de abandon, puteți alege să ignore toate AJAX răspunsuri, cu excepția pentru cel mai recent:

• A crea un contra
• Incrementa contorul când inițiați o cerere AJAX
• Utilizarea valoarea curentă a contorului de a "ștampila" cerere
• În succesul de apel invers compara ștampila cu tejghea pentru a verifica dacă acesta a fost cea mai recentă cerere

Schiță de cod:

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

[Demo pe jsFiddle][1]

Am avut de a lucra în jurul valorii de această problemă și testate trei abordări diferite.

1. nu anula cererea cum a sugerat de către @meouw
2. executa toate cerere, dar numai procesele de rezultatul din ultima prezinte
3. previne noi cereri atâta timp cât unul este încă în curs

var Ajax1 = {
  call: function() {
    if (typeof this.xhr !== 'undefined')
      this.xhr.abort();
    this.xhr = $.ajax({
      url: 'your/long/running/request/path',
      type: 'GET',
      success: function(data) {
        //process response
      }
    });
  }
};
var Ajax2 = {
  counter: 0,
  call: function() {
    var self = this,
      seq = ++this.counter;
    $.ajax({
      url: 'your/long/running/request/path',
      type: 'GET',
      success: function(data) {
        if (seq === self.counter) {
          //process response
        }
      }
    });
  }
};
var Ajax3 = {
  active: false,
  call: function() {
    if (this.active === false) {
      this.active = true;
      var self = this;
      $.ajax({
        url: 'your/long/running/request/path',
        type: 'GET',
        success: function(data) {
          //process response
        },
        complete: function() {
          self.active = false;
        }
      });
    }
  }
};
$(function() {
  $('#button').click(function(e) {
    Ajax3.call();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button" value="click" />

În cazul nostru, am decis să utilizeze abordarea #3 ca se produce mai puțin de încărcare pentru server. Dar eu nu sunt 100% sigur daca jQuery garanții chemarea .completați()-metoda, acest lucru ar putea produce o situație de blocaj. În testele noastre am putut reproduce o astfel de situație.

Este întotdeauna cele mai bune practici pentru a face ceva de genul asta.

var $request;
if ($request != null){ 
    $request.abort();
    $request = null;
}

$request = $.ajax({
    type : "POST", //TODO: Must be changed to POST
    url : "yourfile.php",
    data : "data"
    }).done(function(msg) {
        alert(msg);
    });

Dar este mult mai bine dacă tu a verifica un if pentru a verifica dacă cererea ajax este null sau nu.

meouw's soluție este corectă, dar dacă te're sunt interesați mai mult control atunci ai putea încerca Ajax Manager plugin pentru jQuery.

Sună xhr.abort() fie l's jquery ajax obiect sau nativ obiectul XMLHTTPRequest.

exemplu:

//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);

Am fost a face o căutare în direct soluție și este necesar pentru a anula cererile în curs, care poate fi luat mai mult de cele mai recente/cele mai actuale cerere.

În cazul meu am folosit ceva de genul asta:

//On document ready
var ajax_inprocess = false;

$(document).ajaxStart(function() {
ajax_inprocess = true;
});

$(document).ajaxStop(function() {
ajax_inprocess = false;
});

//Snippet from live search function
if (ajax_inprocess == true)
{
    request.abort();
}
//Call for new request 

Ca mulți oameni de pe fir au remarcat, tocmai pentru că cererea este anulată pe partea de client, serverul va mai procesa cererea. Acest lucru creează sarcină inutilă pe server, deoarece's faci munca pe care am'am renuntat de a asculta pe front-end.

Problema am fost încercarea de a rezolva (pe care alții poate rula la fel de bine) este că, atunci când utilizatorul informațiilor introduse într-un câmp de introducere, am vrut să tragă o cerere de Google Instant tip de simt.

Pentru a evita tragere cereri inutile și pentru a menține eleganța de front-end, am făcut următoarele:

var xhrQueue = [];
var xhrCount = 0;

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

    xhrQueue.push(xhrCount);

    setTimeout(function(){

        xhrCount = ++xhrCount;

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

    }, 150);

});

Acest lucru, în esență, va trimite o cerere la fiecare 150ms (o variabilă care le puteți personaliza pentru nevoile proprii). Daca're probleme în a înțelege exact ceea ce se întâmplă aici, log `xhrCount " și " xhrQueue la consola doar înainte de bloc.

Doar folosi ajax.abort() de exemplu, ai putea abandona orice așteptare cerere ajax înainte de a trimite unul ca asta

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

nu există nici o modalitate sigură de a face, și nici nu aș încerca, odată ce cererea este pe drum; numai modalitate de a reacționa în mod rezonabil, este de a ignore răspunsul.

în cele mai multe cazuri, se poate întâmpla în situații cum ar fi: un utilizator face click de prea multe ori pe un buton de declanșare multe consecutive XHR, aici aveți mai multe opțiuni, fie să blocheze butonul până XHR este returnat, sau nu chiar declanșa noi XHR, în timp ce altul se execută aluzie utilizatorul să se aplece înapoi sau aruncați în așteptarea XHR răspuns, dar recenta.

Puteți abandona orice continuu apel ajax prin utilizarea acestui

<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>

Codul următor arată inițierea precum și abandonează o cerere 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!" >

Am avut problema de votare și după ce pagina a fost închis sondajul a continuat deci din cauza mea un utilizator ar fi dor de o actualizare ca un mysql valoare a fost stabilit pentru următorii 50 de secunde după pagina de închidere, chiar dacă l-am omorât pe cerere ajax, m-am gândit departe, folosind $_SESSION pentru a seta un var câștigat't actualizare în sondaj sine până când s-a încheiat, iar o nouă operațiune a început, așa că ce am făcut a fost stabilită o valoare din baza mea de date ca 0 = offpage , în timp ce eu'm votare am interogare care rând și return false; atunci când este's 0 ca interogarea în secțiile va obține valorile actuale, evident...

Sper că acest lucru a ajutat

I-am împărtășit-o [demo][1], care demonstrează cum de a anula o cerere AJAX-dacă datele nu sunt returnate de server într-un termen predefinit timp de așteptare.

HTML :

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

COD JS:

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);   
});

Dacă xhr.abort();` cauzele pagina de reîncărcare,

Apoi, puteți seta onreadystatechange înainte de a o abandona pentru a preveni:

// ↓ prevent page reload by abort()
xhr.onreadystatechange = null;
// ↓ may cause page reload
xhr.abort();