Wenn die AJAX -Anfrage von Jquerys $.ajax initiiert wird, können Sie standardmäßig die globalen AJAX -Event -Handler von JQuery verwenden, um das AJAX -Ereignis anzuhören. Was ich jedoch begegnete, war jedoch eine AJAX -Anfrage, die mit nativem JavaScript initiiert wurde, daher funktioniert diese Methode nicht.
Dann gibt es andere Methoden wie Pub/Sub, aber ich kann den JS -Code, der die Anfrage initiiert, nicht ändern. Daher gibt es kein Problem beim Hinzufügen der Veröffentlichung zum Code. In ähnlicher Weise kann JQuery's .bind und .trigger nicht verwendet werden.
Schließlich entschied ich mich für die Verwendung des direkten override XMLHttpRequest während ich benutzerdefinierte Ereignisse verwendet habe.
Als ich nach Stackoverflow suchte, stellte ich fest, dass ein Bösewicht eine unzuverlässige Lösung gab. Nun, ich werde es posten, damit Sie sehen können:
; (function () {var open = window.xmlhttprequest.Prototype.open, send = window.xmlhttprequest.Prototype.send, onReadyStatEchange; Funktion openRePlacement (Methode, URL, async, Benutzer, Passwort) {// // einige code zurückgegeben. Code if (this.onReadyStatechange) this._onReadyStatEchange = this.onReadyStatEchange; this._onreadyStatechange.apply (this, Argumente); Diese Lösung kann nicht alle XHR Events anhören, und das Ereignis readystatechange wird erst nach dem Aufrufen der send -Methode angehört, sodass es keine Ereignisse anhören kann, wenn readyState = 1 . Wenn Sie gleichzeitig eine Rückruffunktion für onreadystatechange nach der Verwendung der send -Methode festlegen, wird der override -Code erneut override und der erwartete Effekt wird nicht erzeugt.
Wie kann ich XHR richtig überschreiben? Veröffentlichen Sie den Code und lassen Sie uns einen Blick darauf werfen:
;(function() { function ajaxEventTrigger(event) { var ajaxEvent = new CustomEvent(event, { detail: this }); window.dispatchEvent(ajaxEvent); } var oldXHR = window.XMLHttpRequest; function newXHR() { var realXHR = new oldXHR(); Realxhr.AdDeVentListener ('abort', function () {ajaxEventTrigger.call (this, 'ajaxabort');}, false); function () {ajaxEventTrigger.call (this, 'ajaxload'); AjaxEventTrigger.call (this, 'ajaxTimeout'); 'AjaxReadyStatechange'); Auf diese Weise wird XHR ein benutzerdefiniertes Ereignis hinzugefügt. Wie rufe ich an?
var xhr = new xmlhttprequest (); window.adDeVentListener ('AjaxReadyStatechange', Funktion (e) {console.log (e.Detail); // xmlhttprequest -Objekt}); window.adDeVentListener ('Ajaxabort', Funktion (e) {console.log (e.Detail.responseText); // Inhalt von XHR}); xhr.open ('get', 'info.json'); xhr.send (); Es sollte beachtet werden, dass e -Ereignis -Handler von dem normalen readystatechange und einem anderen Ereignis handler das XMLHttpRequest -Objekt ist, aber e von der benutzerdefinierten Methode ajaxReadyStateChange und anderer Ereignishandler ist das CustomEvent -Objekt, und e.detail ist das echte XMLHttpRequest -Objekt. e.responseText , der den von der AJAX -Anforderung zurückgegebenen Inhalt erhält, muss ebenfalls an e.detail.responseText geändert werden.
Gleichzeitig muss addEventListener -Methode auf window 对象montiert werden, nicht auf XHR -Instanz.
Da der obige Code den CustomEvent -Konstruktor verwendet, kann er normalerweise in modernen Browsern verwendet werden, aber unter IE wird auch der IE 11 nicht unterstützt, sodass Polyfill hinzugefügt werden muss und er wird so:
; (function () {if (typeof window.customEvent === "Funktion") return false; Funktion CustomEvent (Ereignis, Params) {params = params || {blasen: fehl, abgebrochen: false, detail, nicht definiert}; var evt = document.createEvent ('CustOMeMevent'; evt; window.xmlhttprequest; AjaxEventTrigger.call (this, 'ajaxError'); 'AjaxLoadStart'); false); RealxHr.AdDeVentListener ('ReadyStatEchange', function () {ajaxEventTRIGGERS.Zu diesem Zeitpunkt können Sie es glücklich unter IE 9+, Chrome 15+, Firefox 11+, Edge, Safari 6.1+ und Opera 12.1+ verwenden. Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe es gefällt euch.