Solution pour éviter les requêtes Ajax répétées-js tutoriel-php.cn

Solution pour éviter les requêtes Ajax répétées

亚连

Libérer： 2018-05-24 11:35:03

original

2878 Les gens l'ont consulté

Cet article présente principalement la solution pour empêcher l'envoi répété de requêtes Ajax. Les amis intéressés peuvent s'y référer

Il y a plusieurs boutons sur la page. Cliquez sur le bouton pour accéder au serveur de manière asynchrone. puis affichez les données sur le front-end. La page demandée par chaque clic de bouton est la même, mais les paramètres de requête sont différents, donc le contenu renvoyé est différent. Lorsque plusieurs boutons sont cliqués en continu, plusieurs requêtes asynchrones seront émises. Ensuite, en fonction de la vitesse de retour de la demande (parce que les différents paramètres des boutons sont différents et que le contenu du retour est différent, il y aura de la vitesse), les données seront affichées en séquence, puis un bouton cliqué en premier apparaîtra, car la quantité de données il a demandé est relativement volumineux, ce qui entraîne l'affichage des données plus tard.

1. Résolution de problèmes

Il existe deux façons de résoudre ce problème :

1. .Lorsque plusieurs demandes sont effectuées en continu et que les adresses URL demandées sont les mêmes. Abandonnez toutes les demandes précédentes et exécutez uniquement la dernière demande.
2. Lorsque plusieurs demandes sont effectuées en continu et que l'adresse URL demandée est la même. Abandonnez toutes les requêtes suivantes et exécutez uniquement la première requête.

2. Solution

1. >

$.ajax({ 
 async: false, 
 type : "POST", 
 url : defaultPostData.url, 
 dataType : &#39;json&#39;, 
 success : function(data) { 

 } 
});

Copier après la connexion

async

Type : Booléen
Valeur par défaut : vrai. Par défaut, toutes les requêtes sont asynchrones. Si vous devez envoyer des requêtes synchrones, définissez cette option sur false.
Notez que les requêtes synchrones verrouillent le navigateur et que les autres opérations utilisateur doivent attendre que la requête soit terminée avant de pouvoir être exécutées. .

2. Utilisez jquery ajaxPrefilter pour interrompre la requête

Puisque la première solution est juste un Cette approche basée sur une courbe pour sauver le pays ne parvient pas en fait à véritablement résoudre les problèmes ci-dessus. Il est donc recommandé d’utiliser cette méthode.

 var pendingRequests = {};
 $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  var key = options.url;
  console.log(key);
  if (!pendingRequests[key]) {
   pendingRequests[key] = jqXHR;
  }else{
   //jqXHR.abort(); //放弃后触发的提交
   pendingRequests[key].abort(); // 放弃先触发的提交
  }

  var complete = options.complete;
  options.complete = function(jqXHR, textStatus) {
   pendingRequests[key] = null;
   if ($.isFunction(complete)) {
   complete.apply(this, arguments);
   }
  };
 });

Copier après la connexion

Les préfiltres sont des préfiltres qui sont envoyés avant chaque requête et $.ajax() les traite.

options sont les options demandées
valeurs originalesOptions sont comme Fournit des options non modifiées à la méthode Ajax, par conséquent, aucune valeur par défaut dans les paramètres ajaxSettings
jqXHR est la demande Objet jqXHR

L'idée principale du contenu ci-dessus est de maintenir une file d'attente Lors de l'envoi d'une demande, la demande est ajoutée à la file d'attente. la demande reçoit une réponse, elle est effacée de la file d'attente. Cela garantit qu'à tout moment, une seule même demande peut être envoyée à la fois

Limitations : est. juste le frontend pour empêcher la requête ajax de jquery. Ne fonctionne pas pour les requêtes ajax non-jquery. Étant donné que la fonction ajaxPreFilter de jquery est utilisée, elle ne fonctionne que sur les requêtes ajax jquery.

Après avoir appelé abort, jquery exécutera la méthode d'erreur et renvoie les informations d'exception d'abandon. Ce type d'exception peut être distingué à l'aide des méthodes suivantes.

var ajax = $.ajax({
 &#39;error&#39;:function(jqXHR, textStatus, errorThrown){
  if(errorThrown != &#39;abort&#39;){
   //ajax被调用abort后执行的方法
   alert(&#39;您的ajax方法被停止了&#39;);
  }
 }
})

Copier après la connexion

3. Démo

Chaque fois que vous cliquez sur le bouton, une requête sera envoyée au backend. La démo suivante implémente plusieurs clics sur le bouton, seule la dernière est garantie. Les demandes de clic peuvent réussir.

<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>  
<script>
  var pendingRequests = {};
  jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
   var key = options.url;
   console.log(key);
   if (!pendingRequests[key]) {
    pendingRequests[key] = jqXHR;
   }else{
    //jqXHR.abort(); //放弃后触发的提交
    pendingRequests[key].abort(); // 放弃先触发的提交
   }

   var complete = options.complete;
   options.complete = function(jqXHR, textStatus) {
    pendingRequests[key] = null;
    if (jQuery.isFunction(complete)) {
    complete.apply(this, arguments);
    }
   };
  });
  <!-- 异步加载应用列表开始 -->

  $("#button1").live("click", function() {
    $.ajax(&#39;config/ajax/appinfoListFetcher.json&#39;, {
    type:&#39;POST&#39;,
    data: {param1:value1,
       param2:value2,
      },
    success: function(res){
      //后端数据回写到页面中
    },
    error:function(jqXHR, textStatus, errorThrown){
     if(errorThrown != &#39;abort&#39;){
      //ajax被调用abort后执行的方法
      alert(&#39;应用加载失败！&#39;);
     }
    }
    });
    <!-- 异步加载应用列表结束 -->
   });
</script>

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.