jQuery implementiert die Methode zur Überwachung aller Ajax-Anfragen auf page

jQuery implementiert die Methode zur Überwachung aller Ajax-Anfragen auf page_jquery

WBOY

Freigeben： 2016-05-16 15:26:19

Original

1360 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery die Überwachung aller Ajax-Anfragen auf der Seite implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Sind Sie jemals auf ein solches Problem gestoßen: Die Seite initiiert zwei Ajax-Anfragen in der Hoffnung, dass diese erfolgreich sind, bevor eine weitere Aktion ausgeführt wird?

Die einfachste Lösung besteht darin, zu warten, bis einer von ihnen beendet ist, bevor der andere gestartet wird. Dieser Vorgang wird mithilfe einer Rückruffunktion abgeschlossen.

Was sollten Sie jedoch tun, wenn einer der Ajax-Anfragecodes nicht von Ihnen geschrieben wurde und Sie ihn nicht ändern können?

Mit anderen Worten, Sie möchten nur wissen, wann eine bestimmte URL-Anfrage endet, und sich nicht um andere Anfragen kümmern.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p id="test"></p>
  </body>
  <script src="js/jquery-1.11.0.min.js"></script>
  <!--首先在页面引入jquery的后面，紧接着以下代码：-->
  <script>
    //前提：所有ajax请求都是用jquery的$.ajax发起的，而非原生的XHR；
    var ajaxBack = $.ajax;
    var ajaxCount = 0;
    var allAjaxDone = function(){$('#test').append('all done!<br>');} //一行代码，就可以知道所有ajax请求什么时候结束
    //由于get/post/getJSON等，最后还是调用到ajax，因此只要改ajax函数即可
    $.ajax = function(setting){
      ajaxCount++;
      var cb = setting.complete;
      setting.complete = function(){
        if($.isFunction(cb)){cb.apply(setting.context, arguments);}
        ajaxCount--;
        if(ajaxCount==0 && $.isFunction(allAjaxDone)){
          allAjaxDone();
        }
      }
      ajaxBack(setting);
    }
  </script>
  <!--以下是别人的script-->
  <script>
    $.ajax({url: 'js/jquery-1.11.0.min.js', success: function(recv){$('#test').append('别人的ajax请求1，done<br>')}});
  </script>
  <script>
    $.get('css/main.css', null, function(recv){$('#test').append('别人的get请求，done<br>')});
  </script>
  <script>
    $.post('css/main.css', null, function(recv){$('#test').append('别人的post请求，done<br>')});
  </script>
</html>

Nach dem Login kopieren

Andere verwandte Funktionen:

$.ajax:

error: Wird aufgerufen, wenn ein Fehler auftritt und kann zur Meldung fehlerhafter Anfragen verwendet werden.
abgeschlossen: Wird unabhängig von Erfolg oder Misserfolg aufgerufen

Hohe Version:

$.promise
$.when

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.