Vraag Afbreken Ajax-verzoeken met behulp van jQuery


Hoe kan ik met behulp van jQuery annuleer / annuleer een Ajax-verzoek dat ik het antwoord nog niet heb ontvangen?


1633
2018-01-15 12:45


oorsprong


antwoorden:


De meeste jQuery Ajax-methoden retourneren een XMLHttpRequest (of het equivalent) -object, dus je kunt het gewoon gebruiken abort().

Zie de documentatie:

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

BIJWERKEN: Vanaf jQuery 1.5 is het geretourneerde object een wrapper voor het native XMLHttpRequest-object genaamd jqXHR. Dit object lijkt alle native eigenschappen en methoden bloot te leggen, zodat het bovenstaande voorbeeld nog steeds werkt. Zien Het jqXHR-object (jQuery API-documentatie).

UPDATE 2: Vanaf jQuery 3 retourneert de ajax-methode nu een belofte met extra methoden (zoals abort), dus de bovenstaande code werkt nog steeds, hoewel het geretourneerde object geen xhr meer. Zie de 3.0 blog hier.

UPDATE 3: xhr.abort() werkt nog steeds op jQuery 3.x. Ga er niet van uit update 2 is juist. Meer informatie over jQuery Github-repository.


1592
2018-01-15 12:56



U kunt het verzoek niet herinneren, maar u kunt een time-outwaarde instellen waarna het antwoord zal worden genegeerd. Zie dit pagina voor jQuery AJAX-opties. Ik geloof dat uw foutterugroeping wordt aangeroepen als de time-outperiode wordt overschreden. Er is al een standaardtime-out bij elke AJAX-aanvraag.

U kunt ook de afbreken () methode op het request-object, maar, terwijl het ervoor zorgt dat de client stopt met luisteren naar de gebeurtenis, it mei zal waarschijnlijk niet voorkomen dat de server het verwerkt.


106
2018-01-15 12:55



Het is een asynchrone verzoek, wat betekent dat zodra het is verzonden het daar is.

In het geval dat uw server een zeer dure bewerking start vanwege het AJAX-verzoek, kunt u het beste uw server openen om te luisteren naar annuleringsverzoeken en een afzonderlijk AJAX-verzoek verzenden om de server te laten stoppen met wat het doet.

Anders negeert u gewoon de AJAX-reactie.


70
2018-01-15 12:56



Sla de oproepen op die u in een array maakt en bel xhr.abort () op elke array.

ENORME CAVEAT: Je kunt een verzoek afbreken, maar dat is alleen aan de kant van de klant. De server kan het verzoek nog steeds verwerken. Als u zoiets als PHP of ASP met sessiegegevens gebruikt, worden de sessiegegevens vergrendeld totdat de ajax is voltooid. Dus, om de gebruiker toe te staan ​​om verder te surfen op de website, moet je bellen session_write_close(). Hiermee wordt de sessie opgeslagen en ontgrendeld zodat andere pagina's die wachten om door te gaan verdergaan. Zonder dit kunnen verschillende pagina's wachten op het verwijderen van het slot.


62
2018-03-28 11:34



AJAX-aanvragen worden mogelijk niet ingevuld in de volgorde waarin ze zijn gestart. In plaats van af te breken, kunt u ervoor kiezen negeren alle AJAX-antwoorden, behalve de meest recente:

  • Maak een teller
  • Verhoog de teller wanneer u een AJAX-verzoek start
  • Gebruik de huidige waarde van de teller om het verzoek te "stempelen"
  • In het succes callback vergelijken de stempel met de teller om te controleren of het de meest recente aanvraag was

Ruwe schets van de code:

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


45
2018-01-18 12:55



We moesten dit probleem omzeilen en drie verschillende benaderingen testen.

  1. heft het verzoek op zoals voorgesteld door @meouw
  2. voer alle verzoeken uit maar verwerkt alleen het resultaat van de laatste inzending
  3. voorkomt nieuwe aanvragen zolang er nog een in behandeling is

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

In ons geval hebben we besloten aanpak # 3 te gebruiken omdat het minder belasting voor de server produceert. Maar ik ben er niet 100% zeker van of jQuery de call van de .complete () - methode garandeert, dit kan een impasse veroorzaken. In onze tests konden we een dergelijke situatie niet reproduceren.


36
2018-03-06 14:29



Het is altijd de beste manier om zoiets te doen.

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

Maar het is veel beter als u een if-opdracht controleert om te controleren of het ajax-verzoek ongeldig is of niet.


30
2017-10-15 09:14



de oplossing van meouw is correct, maar als je geïnteresseerd bent in meer controle, kun je het proberen Ajax Manager plug-in voor jQuery.


19
2018-01-15 15:45