إذا تم بدء طلب AJAX من قبل $.ajax من JQuery ، يمكنك استخدام معالجات أحداث Ajax العالمية من JQuery للاستماع إلى حدث Ajax. ومع ذلك ، فإن ما واجهته هو طلب Ajax الذي بدأ مع JavaScript الأصلي ، لذلك لا تعمل هذه الطريقة.
بعد ذلك ، هناك طرق أخرى ، مثل Pub/Sub ، لكن لا يمكنني تغيير رمز JS الذي يبدأ الطلب ، لذلك لا توجد مشكلة في إضافة النشر إلى الرمز. وبالمثل ، لا يمكن استخدام jQuery's .bind و .trigger .
أخيرًا ، قررت استخدام override XMLHttpRequest المباشر أثناء استخدام الأحداث المخصصة.
البحث على Stackoverflow ، وجدت أن الرجل السيئ أعطى حلاً غير موثوق به. حسنًا ، سأقوم بنشره لكي ترى:
) if (this.onReadyStateChange) this._onreadystatechange = this.onreadyStatechange ؛ الحجج) ؛
لا يمكن أن يستمع هذا الحل إلى جميع XHR Events ، ويتم الاستماع إلى حدث readystatechange فقط بعد استدعاء طريقة send ، لذلك لا يمكنه الاستماع إلى الأحداث عندما يكون readyState = 1 . في الوقت نفسه ، إذا قمت بتعيين وظيفة رد الاتصال لـ onreadystatechange بعد استخدام طريقة send ، فسيتم override رمز override مرة أخرى ، ولن يتم إنتاج التأثير المتوقع.
فكيف يمكنني تجاوز XHR بشكل صحيح؟ انشر الرمز ودعنا نلقي نظرة:
؛ (function () {function ajaxeventtrigger (event) {var ajaxevent = new customevent (event ، {detail: this}) ؛ window.dispatchevent (ajaxevent) ؛} var oldxhr = window.xmlHttpRequest ؛ function newxhr () realxhr.addeventListener ('Abort' ، function () {ajaxeventtrigger.call (هذا ، 'ajaxabort') ؛ false) ؛ () {ajaxeventtrigger.call (هذا ، 'AjaxLoad') ؛ ajaxeventtrigger.call (هذا ، 'Ajaxtimeout') ؛ ajaxeventtrigger.call (هذا ، 'ajaxReadyStatechange) ؛ بهذه الطريقة ، تتم إضافة حدث مخصص إلى XHR . كيف تتصل؟
var xhr = new xmlhttprequest () ؛ window.addeventListener ('ajaxReadyStatechange' ، function (e) {console.log (e.detail) ؛ // xmlhttprequest object}) ؛ window.addeventListener ('ajaxabort' ، function (e) {console.log ( XHR.Open ('get' ، 'info.json') ؛ xhr.send () ؛ تجدر الإشارة إلى أن e RESOTED بواسطة readystatechange العادي handler الأحداث الآخر هو كائن XMLHttpRequest ، لكن e التي تم إرجاعها بالطريقة المخصصة ajaxReadyStateChange ومعالج الأحداث الآخر هو كائن CustomEvent ، و e.detail هو XMLHttpRequest الحقيقي. يجب أيضًا تعديل e.responseText الذي يحصل على المحتوى الذي يتم إرجاعه بواسطة طلب AJAX إلى e.detail.responseText .
في الوقت نفسه ، يجب تركيب طريقة addEventListener على window 对象، وليس على مثيل XHR .
نظرًا لأن الكود أعلاه يستخدم مُنشئ CustomEvent ، يمكن استخدامه بشكل طبيعي في المتصفحات الحديثة ، ولكن بموجب IE ، حتى IE لا يدعمه ، لذلك يجب إضافة Polyfill ، ويصبح مثل هذا:
؛ (function () {if (typeof window.customevent === "function") إرجاع false ؛ وظيفة customevent (الحدث ، params) {params = params || {bubbles: false ، قابل للإلغاء: false ، التفاصيل: غير محدد} evt ؛} customevent.prototy window.xmlhttprequest ؛ ajaxeventtrigger.call (هذا ، 'ajaxerror') ؛ "AjaxloadStart") ؛ false) ؛ RealxHr.AddeventListener ('ReadyStatechange' ، function () {ajaxeventtrigger.call (هذا ، 'ajaxReadyStatechange') ؛} ، false) ؛في هذا الوقت ، يمكنك استخدامه بسعادة على IE 9+ و Chrome 15+ و Firefox 11+ و Edge و Safari 6.1+ و Opera 12.1+. ما سبق هو كل محتوى هذه المقالة. أتمنى أن تعجبك.