En utilisant jQuery, comment puis-je annuler/abandonner une requête Ajax dont je n'ai pas encore reçu la réponse ?
Pouvez-vous préciser ce que fait exactement abort() ?
Réponses
Trop de publicités?La plupart des méthodes Ajax de jQuery renvoient un objet XMLHttpRequest (ou l'équivalent), de sorte que vous pouvez simplement utiliser la fonction abort() .
Voir la documentation :
- Méthode d'abandon ( MSDN ). Annule la requête HTTP en cours.
-
Abandon() ( MDN ). Si la demande a déjà été envoyée, cette méthode interrompt la demande.
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 : À partir de jQuery 1.5, l'objet renvoyé est une enveloppe pour l'objet XMLHttpRequest natif appelé jqXHR. Cet objet semble exposer toutes les propriétés et méthodes natives, de sorte que l'exemple ci-dessus fonctionne toujours. Voir L'objet jqXHR (documentation de l'API jQuery).
C'est comme cliquer sur le bouton "Stop" de votre navigateur. Il annule la demande. Vous pouvez ensuite réutiliser le même objet XHR pour une autre demande.
@brad Malheureusement, abort ne ferme pas une connexion établie avec le serveur, donc success sera encore appelé. Ceci est très problématique pour les implémentations de Comet avec des polling longs.
tvanfosson
Points
268301
Vous ne pouvez pas rappeler la demande mais vous pouvez définir une valeur de délai d'attente après laquelle la réponse sera ignorée. Voir ce qui suit page pour les options AJAX de Jquery. Je pense que votre callback d'erreur sera appelé si le délai d'attente est dépassé. Il existe déjà un délai d'attente par défaut pour chaque requête AJAX.
Vous pouvez également utiliser le Abandon() sur l'objet de la demande mais, bien qu'elle entraîne l'arrêt de l'écoute de l'événement par le client, elle ne permet pas au client d'écouter l'événement. mai n'empêchera probablement pas le serveur de le traiter.
Yuval Adam
Points
59423
C'est un asynchrone ce qui signifie qu'une fois envoyé, il est disponible.
Si votre serveur lance une opération très coûteuse à cause de la demande AJAX, le mieux que vous puissiez faire est d'ouvrir votre serveur pour écouter les demandes d'annulation, et d'envoyer une demande AJAX séparée pour notifier au serveur d'arrêter ce qu'il est en train de faire.
Sinon, ignorez simplement la réponse AJAX.
Dans ce contexte, asynchrone signifie simplement que la demande n'interrompt pas le flux du script. Les navigateurs ont maintenant la possibilité d'interrompre prématurément la demande avant qu'elle ne soit terminée.
Comment envoyer une demande d'annulation au serveur ? Je ne comprends pas comment le serveur va savoir quelle demande il doit arrêter de traiter ? Pourriez-vous me donner un exemple ? Merci.
@LuckySoni, Elephanthunter ne parle que du côté client. Le serveur ne sera pas affecté par une requête .abort.
Tei
Points
779
Enregistrez les appels que vous faites dans un tableau, puis appelez xhr.abort() sur chacun d'eux.
GROS AVERTISSEMENT : Vous pouvez interrompre une demande, mais cela ne concerne que le côté client. Le serveur peut toujours être en train de 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é. Ainsi, pour permettre à l'utilisateur de continuer à naviguer sur le site web, vous devez appeler session_write_close (). Cela permet de sauvegarder la session et de la déverrouiller afin que les autres pages qui attendent de continuer puissent le faire. Sans cela, plusieurs pages peuvent attendre que le verrou soit levé.
oyophant
Points
318
Nous avons dû contourner ce problème et avons testé trois approches de solution différentes.
- annule la demande comme suggéré par @meouw
- exécute toutes les demandes mais ne traite que le résultat de la dernière soumission
-
empêche les nouvelles demandes tant qu'une autre est encore en suspens
<!DOCTYPE html> <html>
<head> <title>AJAX Test</title> <script src="http://code.jquery.com/jquery.min.js"></script> <script> 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> </head>
<body> <input id="button" type="button" value="click" /> </body>
</html>
Dans notre cas, nous avons décidé d'utiliser l'approche n°3 car elle produit moins de charge pour le serveur. Mais je ne suis pas sûr à 100% que jQuery garantisse l'appel de la méthode .complete()-, cela pourrait produire une situation de blocage. Dans nos tests, nous n'avons pas pu reproduire une telle situation.
2 votes
Peut-être ai-je mal compris la question, mais ne pourriez-vous pas simplement utiliser
$.ajaxStop?17 votes
@LukeMadhanga ; je pense que
ajaxStopdétecte seulement quand toutes les requêtes AJAX sont terminées, il n'arrête pas une requête. D'après mon expérience, vous l'utiliseriez comme ceci :$(document).ajaxStop(function(){alert("All done")}). Utilisation de.abort()est la meilleure option.