Se a solicitação AJAX for iniciada pelo $.ajax da JQuery, por padrão, você poderá usar os manipuladores de eventos globais do JQuery para ouvir o evento Ajax. No entanto, o que encontrei foi uma solicitação de Ajax iniciada com JavaScript nativo, então esse método não funciona.
Em seguida, existem outros métodos, como pub/sub, mas não posso alterar o código JS que inicia a solicitação, portanto, não há problema em adicionar publicação ao código. Da mesma forma, o JQuery .bind e .trigger não podem ser usados.
Por fim, decidi usar o override XMLHttpRequest DIRETO enquanto usava eventos personalizados.
Pesquisando no Stackoverflow, descobri que um bandido dava uma solução não confiável. Bem, vou postar para você ver:
;(function () { var open = window.XMLHttpRequest.prototype.open, send = window.XMLHttpRequest.prototype.send, onReadyStateChange; function openReplacement(method, url, async, user, password) { // some code return open.apply(this, arguments); } function sendReplacement(data) { // some code if (this.onReadyStateChange) this._onreadystatechange = this.onreadyStateChange; window.xmlHttPrequest.prototype.open = OpenReplacement; Esta solução não pode ouvir todos XHR Events , e o evento readystatechange é ouvido apenas depois de chamar o método send , para que não possa ouvir eventos quando readyState = 1 . Ao mesmo tempo, se você definir uma função de retorno de chamada para onreadystatechange após o uso do método send , o código override será override novamente e o efeito esperado não será produzido.
Então, como posso substituir corretamente o XHR? Publique o código e vamos dar uma olhada:
; (function () {função ajaxaxEventTrigger (event) {var ajaxevent = new Customevent (evento, {detalhe: this}); window.dispatchEvent (ajaxaxEvent);} var Oldxhr = window.xmlHttPreQuest; function); realxhr.addeventListener ('abort', function () {ajaxaxEventTrigger.call (this, 'ajaxabort');}, false); realxhr.addeventListener ('load', function () {ajaxaxEventTrigger.call (this, 'ajaxload');}, false); realxhr.addeventListener ('timeout', function () {ajaxaxEventTrigger.call (this, 'ajaxtimeout');}, false); RealXhr.AddeventListener ('ReadyStateChange', function () {ajaxaxEventTrigger.Call (this, 'AjaxreadyStateChange');}, false); Dessa forma, um evento personalizado é adicionado ao XHR . Como ligar?
var xhr = novo xmlHttPrequest (); window.adDeventListener ('AjaxReadyStateChange', function (e) {console.log (e.detail); // xmlHttPrequest Object}); window.addeventListener ('Ajaxabort', function (e) {console.log (e.Detail.ResponseText); // Conteúdo retornado por xhr}); xhr.open ('get', 'info.json'); xhr.send (); Deve -se notar que e retornado pelo readystatechange Normal e outro handler de eventos é o objeto XMLHttpRequest , mas e retornado pelo método personalizado ajaxReadyStateChange e outro manipulador de eventos é o objeto CustomEvent , e e.detail é o objeto real XMLHttpRequest . e.responseText que obtém o conteúdo retornado pela solicitação AJAX também precisa ser modificado para e.detail.responseText .
Ao mesmo tempo, addEventListener deve ser montado no window 对象, não na instância XHR .
Como o código acima usa o construtor CustomEvent , ele pode ser usado normalmente nos navegadores modernos, mas sob o IE, mesmo o IE 11 não o suporta, portanto, Polyfill precisa ser adicionado, o que se torna assim:
; (function () {if (typeof window.customevent === "function") return false; function customevent (evento, params) {params = params || {bubbles: false, cancelável: false, detalhe: não -definido}; var evt = document.createevent ('custhomevent'); efelfined}; EVT; Window.xmlHttPrequest; Ajaxeventtrigger.call (this, 'Ajaxerror'); 'AjaxloadStart'); }, false); RealXhr.AddeventListener ('ReadyStateChange', function () {ajaxaxEventTrigger.Call (this, 'AjaxreadyStateChange');}, false);Neste momento, você pode usá -lo feliz no IE 9+, Chrome 15+, Firefox 11+, Edge, Safari 6.1+ e Opera 12.1+. O exposto acima é todo o conteúdo deste artigo. Espero que gostem.