Detaillierte Einführung in Ereignisse in jQuery Ajax_jquery

Ajax löst viele Ereignisse aus.
Es gibt zwei Arten von Ereignissen: ein lokales Ereignis und ein globales Ereignis:
Lokale Ereignisse: über $.ajax aufgerufen und zugewiesen.

Code kopieren Der Code lautet wie folgt:

$.ajax({
beforeSend: function(){
// Behandeln Sie das beforeSend-Ereignis
},
Vollständig: function(){
// Das komplette Ereignis behandeln
}
// ...
});

Globale Ereignisse können mit „bind“ gebunden werden und mit „unbind“ kann die Bindung aufgehoben werden. Dies ähnelt Click/Mousedown/Keyup und anderen Ereignissen. Es kann aber an jedes DOM-Element übergeben werden.

Code kopieren Der Code lautet wie folgt:

$("#loading").bind("ajaxSend", function(){ //Verwenden Sie bind
$(this).show();
}).ajaxComplete(function(){ //AjaxComplete direkt verwenden
$(this).hide();
});

Wenn Sie nicht möchten, dass für eine bestimmte Ajax-Anfrage ein globales Ereignis generiert wird, können Sie natürlich global:false
festlegen

Code kopieren Der Code lautet wie folgt:

$.ajax({
URL: „test.html“,
global: false,
// ...
});

Der Ablauf ist wie folgt:

ajaxStart globales Ereignis
Startet eine neue Ajax-Anfrage und derzeit sind keine anderen Ajax-Anfragen in Bearbeitung.
beforeSend lokale Veranstaltung
Wird ausgelöst, wenn eine Ajax-Anfrage gestartet wird. Bei Bedarf können Sie hier das XHR-Objekt festlegen.
ajaxSend globales Ereignis
Globales Ereignis wurde ausgelöst, bevor die Anfrage startet
Erfolgreiche lokale Veranstaltung
Wird ausgelöst, wenn die Anfrage erfolgreich ist. Das heißt, der Server gibt keinen Fehler zurück und die zurückgegebenen Daten weisen keine Fehler auf.
ajaxSuccess globales Ereignis
Globale Anfrage erfolgreich
Fehler lokales Ereignis
Wird nur ausgelöst, wenn ein Fehler auftritt. Sie können nicht gleichzeitig Erfolgs- und Fehlerrückruffunktionen ausführen.
globales AjaxError-Ereignis
Global ausgelöst, wenn ein Fehler auftritt
komplette lokale Veranstaltung
Unabhängig davon, ob Ihre Anfrage erfolgreich ist oder fehlschlägt, können Sie dieses Ereignis auslösen, wenn die Anfrage abgeschlossen ist, auch wenn es sich um eine synchrone Anfrage handelt.
ajaxComplete globales Ereignis
Wird ausgelöst, wenn die globale Anfrage abgeschlossen ist
globales AjaxStop-Ereignis
Wird ausgelöst, wenn kein Ajax ausgeführt wird.

Die Parameter lokaler Ereignisrückrufe sind in der Dokumentation klar beschrieben, daher werde ich hier nicht auf Details eingehen.

Im globalen Ereignis außer ajaxStart und ajaxStop haben andere Ereignisse 3 Parameter
Ereignis, XMLHttpRequest, ajaxOptions
Der erste ist ein Ereignis, der zweite ist ein XHR-Objekt und der dritte Parameter ist der nützlichste, er ist der Parameter beim Aufruf dieses Ajax.
Für ajaxError gibt es einen vierten Parameter, thrownError, der nur übergeben wird, wenn eine Ausnahme auftritt.
Wir können ajaxOptions verwenden, um ein globales Ajax-Ereignis zu schreiben.
Zum Beispiel

Code kopieren Der Code lautet wie folgt:

$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("Requesting" o.url);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.url „Anfrage erfolgreich“);
}).ajaxError(function(e,xhr,o) {
$(this).html(o.url „Anfrage fehlgeschlagen“);
});

Für dieses Beispiel:
Auf diese Weise können wir den aktuellen Ajax-Status problemlos irgendwo global anzeigen.
Natürlich ist der dritte Parameter, wie bereits erwähnt, tatsächlich der an Ajax übergebene Parameter. Methoden wie get/post/load/getScript/getJSON rufen im Wesentlichen Ajax-Methoden auf, sodass das Attribut ajaxOptions.url immer gültig ist.

Es gibt noch viele weitere Beispiele.
Wenn Sie mit Ajax aufrufen, können Sie auch benutzerdefinierte Parameter übergeben. Im folgenden Beispiel habe ich einen msg-Parameter für den Ajax-Aufruf
angepasst

Code kopieren Der Code lautet wie folgt:

//Benutzerdefinierte Parameternachricht
$.ajax({url:"test1.html",type:"get",msg:"page one"});
$.ajax({url:"test2.html",type:"get",msg:"Page 2"});
$.ajax({url:"test3.html",type:"get",msg:"page three"});
$.ajax({url:"test4.html",type:"get",msg:"Page 4"});

//Hier erhalten Sie den benutzerdefinierten Parameter msg.
//Dies kann verwendet werden, um verschiedene Ajax-Anfragen unterschiedlich zu behandeln.
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("Requesting" o.msg);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.msg „Anfrage erfolgreich“);
}).ajaxError(function(e,xhr,o) {
$(this).html(o.msg „Anfrage fehlgeschlagen“);
});

Abschließend gibt es noch etwas zur Lademethode zu sagen.

Andere einfache Ajax-Methoden wie get, post, getJSON usw., deren Rückruffunktionen alle mit Erfolgsrückrufen festgelegt sind.

Und nur die Ladeeinstellung ist tatsächlich der vollständige Rückruf.

Die in Load festgelegte Rückruffunktion sollte also zwei Parameter haben.

XMLHttpRequest und textStatus
Aber das ist eigentlich nicht der Fall.
Der Load-Callback hat drei Parameter
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
Sie können also
im Rückruf von laden Verwenden Sie textStatus=="success" oder textStatus=="error", um festzustellen, ob der Aufruf erfolgreich ist.
Oder verwenden Sie das XMLHttpRequest.status-Attribut, um zu bestimmen, ob es 200 oder 404 oder etwas anderes ist.

In dieser Hinsicht denke ich, dass es fortgeschrittener ist als gewöhnliche Get/Post-Methoden. Es ist unmöglich, den Fehler jedes einzelnen Gets in ungeraden Zahlen festzulegen. Aber das Setzen eines globalen ajaxError ist tatsächlich eine gute Wahl.