Jika permintaan AJAX diprakarsai oleh JQuery's $.ajax , secara default, Anda dapat menggunakan penangan acara AJAX global JQuery untuk mendengarkan acara AJAX. Namun, yang saya temui adalah permintaan AJAX yang diprakarsai dengan JavaScript asli, jadi metode ini tidak berfungsi.
Kemudian, ada metode lain, seperti pub/sub, tetapi saya tidak dapat mengubah kode JS yang memulai permintaan, jadi tidak ada masalah untuk menambahkan publikasi ke kode. Demikian pula, jQuery's .bind dan .trigger tidak dapat digunakan.
Akhirnya, saya memutuskan untuk menggunakan override XMLHttpRequest saat menggunakan acara khusus.
Mencari di Stackoverflow, saya menemukan bahwa orang jahat memberikan solusi yang tidak dapat diandalkan. Nah, saya akan mempostingnya untuk Anda lihat:
; (function () {var open = window.xmlHttpRequest.prototype.open, send = window.xmlHttpRequest.prototype.send, onReadyStateChange; function openreplacement (Metode, url, async, pengguna, kata sandi) {// beberapa kode kembali dibalik (ini, ini, ini, url, async, pengguna, kata sandi) {// Beberapa kode kembali terbuka (ini, ini, ini, url, async, pengguna, kata sandi) {// Beberapa kode kembali terbuka (ini, ini, ini, ini, ini, jika ini. this._onReadyStateChange.Apply (ini, argumen); Solusi ini tidak dapat mendengarkan semua XHR Events , dan acara readystatechange hanya didengarkan setelah memanggil metode send , sehingga tidak dapat mendengarkan peristiwa ketika readyState = 1 . Pada saat yang sama, jika Anda menetapkan fungsi panggilan balik untuk onreadystatechange setelah menggunakan metode send , kode override akan override lagi, dan efek yang diharapkan tidak akan dihasilkan.
Jadi bagaimana saya bisa mengganti XHR dengan benar? Posting kode dan mari kita lihat:
; (function () {function AjaxEventTrigger (event) {var ajaxevent = new customEvent (event, {detail: this}); window.dispatchevent (ajaxeVent);} var oldxhr = window.xmlhttpRequest; function newXhr () {var var realxhr = new renxhr = new loldxhr =); realxhr.addeventlistener ('abort', function () {ajaxeventtrigger.call (ini, 'ajaxabort');}, false); function () {AjaxEventtrigger.call (ini, 'Ajaxload'); AjaxEventTrigge.call (ini, 'Ajaxtimeout'); AjaxEventTriger.call (ini, 'AjaxreadyStateChange'); Dengan cara ini, acara khusus ditambahkan ke XHR . Bagaimana cara menelepon?
var xhr = xmlhttpRequest baru (); window.addeventListener ('AjaxReadyStateChange', function (e) {console.log (e.detail); // objek xmlHttpRequest}); window.addeventListener ('ajaxabort', function (e) {console.log (e.detail.Responsetext); // konten dikembalikan oleh xhr}); xhr.open ('get', 'info.json'); xhr.send (); Perlu dicatat bahwa e yang dikembalikan oleh Normal readystatechange dan handler acara lainnya adalah objek XMLHttpRequest , tetapi e yang dikembalikan dengan metode khusus ajaxReadyStateChange dan penangan acara lainnya adalah objek CustomEvent , dan e.detail adalah objek XMLHttpRequest yang sebenarnya. e.responseText yang memperoleh konten yang dikembalikan oleh permintaan AJAX juga perlu dimodifikasi ke e.detail.responseText .
Pada saat yang sama, metode addEventListener harus dipasang pada window 对象, bukan pada instance XHR .
Karena kode di atas menggunakan konstruktor CustomEvent , itu dapat digunakan secara normal di browser modern, tetapi di bawah IE, bahkan IE 11 tidak mendukungnya, jadi Polyfill perlu ditambahkan, dan menjadi seperti ini:
; (function () {if (typeof window.customEvent === "function") return false; function customEvent (event, params) {params = params || {Bubbles: false, dibatalkan: false, detail: tidak terdefinisi}; var evt = document.createEvent ('customEvent'); evt.initcustomeVent (params.devels.devels.devels. return evt;} customEvent.prototype = window.event.prototype; window.customEvent = customEvent;}) () ;; window.xmlHttpRequest; AjaxeventTrigge.call (ini, 'Ajaxerror'); 'AjaxloadStart');}, false); false); realxhr.addeventListener ('readystatechange', function () {ajaxeventtrigger.call (ini, 'AjaxreadyStateChange');}, false);Pada saat ini, Anda dapat menggunakannya dengan gembira pada IE 9+, Chrome 15+, Firefox 11+, Edge, Safari 6.1+, dan Opera 12.1+. Di atas adalah semua konten artikel ini. Saya harap Anda menyukainya.