javascript - synchrone - jquery stop ajax execution




Abandonner les requêtes Ajax en utilisant jQuery (12)

En utilisant jQuery, comment puis-je annuler / annuler une requête Ajax dont je n'ai pas encore reçu la réponse?


Appelez Xhr. abort () que ce soit l'objet jquery ajax ou l'objet XMLHTTPRequest natif.

Exemple:

//jQuery ajax
$(document).ready(
    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);

C'est une requête asynchrone , c'est-à-dire une fois qu'elle est envoyée.

Au cas où votre serveur lance une opération très coûteuse à cause de la requête AJAX, le mieux que vous puissiez faire est d'ouvrir votre serveur pour écouter les demandes d'annulation et d'envoyer une requête AJAX séparée pour notifier le serveur d'arrêter ce qu'il fait.

Sinon, ignorez simplement la réponse AJAX.


Enregistrez les appels que vous effectuez dans un tableau, puis appelez xhr.abort () sur chacun d'eux.

CAVEAT ÉNORME: Vous pouvez annuler une demande, mais ce n'est que le côté client. Le côté serveur peut toujours traiter la demande. Si vous utilisez quelque chose comme PHP ou ASP avec des données de session, les données de session sont verrouillées jusqu'à ce que l'ajax soit terminé. Donc, pour permettre à l'utilisateur de continuer à naviguer sur le site, vous devez appeler session_write_close (). Cela enregistre la session et la déverrouille pour que les autres pages en attente de continuer continuent. Sans cela, plusieurs pages peuvent attendre que le verrou soit retiré.


Il est toujours préférable de faire quelque chose comme ça.

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

Mais c'est beaucoup mieux si vous vérifiez une instruction if pour vérifier si la requête ajax est nulle ou non.


J'ai partagé une demo qui montre comment annuler une requête AJAX - si les données ne sont pas renvoyées par le serveur dans un délai d'attente prédéfini.

HTML:

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

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

Je faisais une solution de recherche en direct et je devais annuler les demandes en attente qui pouvaient prendre plus de temps que la dernière demande / la plus récente.

Dans mon cas, j'ai utilisé quelque chose comme ça:

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

Le code suivant montre initier ainsi qu'abandonner une requête 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!" >

Les requêtes AJAX peuvent ne pas aboutir dans l'ordre où elles ont été démarrées. Au lieu d'abandonner, vous pouvez choisir d' ignorer toutes les réponses AJAX, sauf la plus récente:

  • Créer un compteur
  • Incrémenter le compteur lorsque vous lancez une requête AJAX
  • Utilisez la valeur actuelle du compteur pour "marquer" la demande
  • Dans le rappel de réussite, comparez le tampon avec le compteur pour vérifier s'il s'agit de la dernière requête

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

Démo sur jsFiddle


Si xhr.abort(); provoque le rechargement de page,

Ensuite, vous pouvez définir onreadystatechange avant d'abandonner pour empêcher:

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

Utilisez simplement ajax.abort () par exemple vous pouvez interrompre toute requête ajax en attente avant d'en envoyer une autre comme celle-ci

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

il n'y a aucun moyen fiable de le faire, et je ne l'essaierais même pas, une fois que la demande est en cours; la seule façon de réagir raisonnablement est d' ignorer la réponse.

dans la plupart des cas, cela peut arriver dans des situations comme: un utilisateur clique trop souvent sur un bouton déclenchant plusieurs XHR consécutifs, ici vous avez beaucoup d'options, soit bloquez le bouton jusqu'à ce que XHR soit retourné, soit ne déclenchez même pas XHR tandis qu'un autre l'utilisateur à se pencher en arrière - ou rejeter toute réponse XHR en attente, mais la récente.








ajax