Если запрос AJAX инициирован JQUERY $.ajax , по умолчанию вы можете использовать Global Handlers событий Ajax от JQUERY для прослушивания события AJAX. Тем не менее, я столкнулся с запросом Ajax, инициированным на Native JavaScript, поэтому этот метод не работает.
Затем есть и другие методы, такие как Pub/Sub, но я не могу изменить код JS, который инициирует запрос, поэтому нет проблем с добавлением публикации в код. Точно так же JQUERY .bind и .trigger не могут быть использованы.
Наконец, я решил использовать прямой override XMLHttpRequest при использовании пользовательских событий.
Поиск на Stackoverflow, я обнаружил, что плохой парень дал ненадежное решение. Ну, я опубликую это, чтобы увидеть:
; (function () {var open = window.xmlhttprequest.prototype.open, send = window.xmlhttprequest.prototype.send, onreadystatechange; функция OpenReplacement (метод, URL, Async, пользователь, пароль) {// некоторые код return.pply.pply (это аргументы); if (this.onradystatechange) this._onreadystatechange = this.onreadystatechange; window.xmlhttprequest.prototype.open = openReplacement; Это решение не может прослушать все XHR Events , а событие readystatechange выслушается только после вызова метода send , поэтому оно не может слушать события, когда readyState = 1 . В то же время, если вы установите функцию обратного вызова для onreadystatechange после использования метода send , код override снова будет override , а ожидаемый эффект не будет создан.
Итак, как я могу правильно переопределить XHR? Разместите код, и давайте посмотрим:
; (function () {function jaxeventTrigger (event) {var ajaxevent = new Customevent (event, {detail: this}); window.dispatchevent (ajaxevent);} var oldxhr = window.xmlhttprequest; function newxhr () {varxhr = new Oldxhhr (); realxhr.addeventlistener ('abort', function () {ajaxeventtrigger.call (this, 'ajaxabort');}, false); {ajaxeventtrigger.call (this, 'ajaxload'); 'AjaxTimeout'); }, false); Таким образом, в XHR добавлена пользовательское событие. Как позвонить?
var xhr = new xmlhttprequest (); window.addeventlistener ('ajaxreadystatechange', function (e) {console.log (e.detail); // xmlhttprequest object}); window.addeventlistener ('ajaxabort', function (e) {console.log (e.detail.responsetext); // Содержимое возвращаемое xhr}); xhr.open ('get', 'info.json'); xhr.send (); Следует отметить, что e возвращаемый обычным readystatechange , и другим handler событий является объектом XMLHttpRequest , но e возвращаемый пользовательским методом ajaxReadyStateChange , и другим обработчиком событий является объектом CustomEvent , а e.detail - это объект XMLHttpRequest . e.responseText , который получает контент, возвращаемый запросом AJAX, также должен быть изменен на e.detail.responseText .
В то же время метод addEventListener должен быть установлен на window 对象, а не на экземпляре XHR .
Поскольку вышеупомянутый код использует конструктор CustomEvent , он может использоваться обычно в современных браузерах, но в соответствии с т.е. даже IE 11 не поддерживает его, поэтому необходимо добавить Polyfill , что становится таким:
; (function () {if (typeof window.customevent === "function") return false; function customevent (event, params) {params = params || {Bubbles: false, отмену: false, detail: undefined}; var evt = документ. evt; window.xmlhttprequest; ajaxeventtrigger.call (this, 'ajaxerror'); 'AjaxLoadStart'); realxhr.addeventlistener ('timeout', function () {ajaxeventtrigger.call (this, 'ajaxtimeout');}, false); Realxhr.addeventListener ('reateStateChange', function () {ajaxeventtrigger.call (this, 'ajaxreadystateChange');}, false);В настоящее время вы можете счастливо использовать его на IE 9+, Chrome 15+, Firefox 11+, Edge, Safari 6.1+ и Opera 12.1+. Выше всего содержание этой статьи. Надеюсь, вам понравится.