Si la solicitud AJAX es iniciada por $.ajax de JQuery, por defecto, puede usar los controladores de eventos AJAX globales de JQuery para escuchar el evento AJAX. Sin embargo, lo que encontré fue una solicitud de AJAX iniciada con JavaScript nativo, por lo que este método no funciona.
Luego, hay otros métodos, como PUB/SUB, pero no puedo cambiar el código JS que inicia la solicitud, por lo que no hay problema de agregar publicar al código. Del mismo modo, no se pueden usar JQuery .bind y .trigger .
Finalmente, decidí usar la override XMLHttpRequest mientras usaba eventos personalizados.
Buscando en Stackoverflow, descubrí que un chico malo daba una solución poco confiable. Bueno, lo publicaré para que veas:
; (function () {var abre = window.xmlhttprequest.prototype.open, send = window.xmlhttprequest.prototype.send, onreadystateChange; function openRepLausion (método, url, async, usuarios, contraseña) {// Some Code Return if (this. window.xmlhttprequest.prototype.open = OpenReplace; Esta solución no puede escuchar todos XHR Events , y el evento readystatechange solo se escucha después de llamar al método send , por lo que no puede escuchar eventos cuando readyState = 1 . Al mismo tiempo, si establece una función de devolución de llamada para onreadystatechange después de usar el método send , el código override volverá override y no se producirá el efecto esperado.
Entonces, ¿cómo puedo anular correctamente XHR? Publique el código y echemos un vistazo:
; (function () {function aJaxEventTRIGGR (event) {var aJaxEvent = new CustomEvent (Event, {Detalle: this}); Window.DispeChEvent (AJaxEvent);} var Oldxhr = Window.xmlhttprequest; function newxhr () {var realxhr = newxhr (); Realxhr.AdDeventListener ('abort', function () {ajaxeventTRIGER.call (this, 'aJaxabort');}, false); function () {ajaxeventTRIGER.call (this, 'ajaxload'); 'AJAXTIME'); }, falso); De esta manera, se agrega un evento personalizado a XHR . ¿Cómo llamar?
var xhr = new xmlhttprequest (); Window.adDeventListener ('AjaxreadyStateChange', function (e) {console.log (e.detail); // xmlhttprequest objeto}); Window.adDeventListener ('Ajaxabort', function (e) {console.log (e.detail.esponsetext); // contenido devuelto por xhr}); xhr.open ('get', 'info.json'); xhr.send (); Cabe señalar que e devuelto por el readystatechange normal y otro handler de eventos es el objeto XMLHttpRequest , pero e devuelto por el método personalizado ajaxReadyStateChange y otro controlador de eventos es el objeto CustomEvent , y e.detail es el objeto XMLHttpRequest real. e.responseText que obtiene el contenido devuelto por la solicitud AJAX también debe modificarse a e.detail.responseText .
Al mismo tiempo, addEventListener debe montarse en window 对象, no en XHR .
Debido a que el código anterior usa el constructor CustomEvent , se puede usar normalmente en los navegadores modernos, pero en IE, incluso IE 11 no lo admite, por lo que se necesita agregar Polyfill , lo que se vuelve así:
; (function () {if (typeof window.custOment === "function") return false; function customEvent (event, params) {params = params || {bubbles: false, cancelable: false, detalle: undefined}; var evt = document.createEtevent ('customEvent'); evt.initcustOmenvent (event, params.bubbles, params.cancelable,; evt;} customent.prototype = window.event.prototype; window.xmlhttprequest; AJAXEVENTTRIGER.CALL (this, 'AjaxError'); 'AjaxloadStart');}, falso); falso); Realxhr.AdDeventListener ('ReadyStateChange', function () {AjaxeventTRIGER.CALL (this, 'AjaxreadyStateChange');}, false);En este momento, puede usarlo felizmente en IE 9+, Chrome 15+, Firefox 11+, Edge, Safari 6.1+ y Opera 12.1+. Lo anterior es todo el contenido de este artículo. Espero que te guste.