Heim > Artikel > Web-Frontend > jQuery implementiert die Methode zur Überwachung aller Ajax-Anfragen auf page_jquery

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

WBOYOriginal: 2016-05-16 15:26:191283Durchsuche

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>

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tägliche Sammlung gängiger JavaScript-Funktionen und Methoden_Javascript-KenntnisseNächster Artikel：Tägliche Sammlung gängiger JavaScript-Funktionen und Methoden_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen