Share the JavaScript method for listening to all Ajax request events, javascriptajax

Source: Internet
Author: User

Share the JavaScript method for listening to all Ajax request events, javascriptajax

If the Ajax request is made by jQuery$.ajaxBy default, you can use jQuery's Global Ajax Event Handlers to listen to Ajax events. However, I encountered an Ajax request initiated using native JavaScript, so this method won't work.

There are other methods, such as Pub/Sub, but I cannot modify the js Code that initiates the request, so there is no problem of adding publish to the code. Similarly, jQuery's.bindAnd.triggerAnd cannot be used.

Finally, we decided to useoverride XMLHttpRequestAnd use custom events together.

Search on StackOverflow and find that some nuts provide an unreliable solution. Well, I will post it for you to see:

;(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;  this.onreadystatechange = onReadyStateChangeReplacement;   return send.apply(this, arguments); }  function onReadyStateChangeReplacement() {  // some code   if (this._onreadystatechange) return this._onreadystatechange.apply(this, arguments); }  window.XMLHttpRequest.prototype.open = openReplacement; window.XMLHttpRequest.prototype.send = sendReplacement;})();

This solution cannot listen to allXHR EventsAndreadystatechange The event is calledsend Method.readyState = 1Event. At the same time, if you are usingsend Method and thenonreadystatechange Set the callback functionoverride Code againoverrideAnd cannot produce the expected results.

So how can we override XHR correctly? Paste the code and take a look:

;(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);   realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, false);   realXHR.addEventListener('load', function () { ajaxEventTrigger.call(this, 'ajaxLoad'); }, false);   realXHR.addEventListener('loadstart', function () { ajaxEventTrigger.call(this, 'ajaxLoadStart'); }, false);   realXHR.addEventListener('progress', function () { ajaxEventTrigger.call(this, 'ajaxProgress'); }, false);   realXHR.addEventListener('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false);   realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false);   realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false);   return realXHR; }  window.XMLHttpRequest = newXHR;})();

In this wayXHR Added custom events. How to call it?

Var xhr = new XMLHttpRequest (); window. addEventListener ('ajaxreadystatechang', function (e) {console. log (e. detail); // XMLHttpRequest Object}); window. addEventListener ('ajaxabort ', function (e) {console. log (e. detail. responseText); // The content returned by XHR}); xhr. open ('get', 'info. json '); xhr. send ();

Note that it is normalreadystatechange And other eventshandler ReturnedeYesXMLHttpRequest Object, but the custom MethodajaxReadyStateChange And other events returned by handler.eYesCustomEvent Object, ande.detail Is trueXMLHttpRequest Object. Thee.responseText You also need to changee.detail.responseText.

At the same time,addEventListener Method must be mounted onWindow objectBut notXHR Instance.

Because the above code is usedCustomEvent Constructor can be used normally in modern browsers, but it is not supported in IE or even in IE 11.Polyfill, It becomes like this:

;(function () { if ( typeof window.CustomEvent === "function" ) return false;  function CustomEvent ( event, params ) {  params = params || { bubbles: false, cancelable: false, detail: undefined };  var evt = document.createEvent( 'CustomEvent' );  evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );  return evt; }  CustomEvent.prototype = window.Event.prototype;  window.CustomEvent = CustomEvent;})();;(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);   realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, false);   realXHR.addEventListener('load', function () { ajaxEventTrigger.call(this, 'ajaxLoad'); }, false);   realXHR.addEventListener('loadstart', function () { ajaxEventTrigger.call(this, 'ajaxLoadStart'); }, false);   realXHR.addEventListener('progress', function () { ajaxEventTrigger.call(this, 'ajaxProgress'); }, false);   realXHR.addEventListener('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false);   realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false);   realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false);   return realXHR; }  window.XMLHttpRequest = newXHR;})();

Now, you can enjoy using IE 9 +, Chrome 15 +, FireFox 11 +, Edge, Safari 6.1 +, and Opera 12.1 +. The above is all the content of this article, I hope you will like it.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.