XMLHttpRequest का प्रतिस्थापन या समाप्त किए गए js-code के एक टन को छूने के बिना, सभी ajax अनुरोधों के व्यवहार को बदल दें

नमस्कार, इस छोटी सी पोस्ट में मैं JS में OOP, XMLHttpRequest ऑब्जेक्ट, प्रॉक्सी पैटर्न और जावास्क्रिप्ट मित्रता के बारे में थोड़ा बताऊंगा।

मेरे पास आज ऐसा काम था - एक ऐसी परियोजना है जो अजाक्स अनुरोधों का सक्रिय रूप से उपयोग करती है, लेकिन यहां समस्या है - हमारे बैकएंड को इतना डिज़ाइन किया गया है कि यह उपयोगकर्ता को अनधिकृत करेगा यदि वह आधे घंटे के लिए सक्रिय न हो। नतीजतन, ऐसा हुआ कि उपयोगकर्ता, कुछ कार्रवाई करने की कोशिश कर रहा है जो अजाक्स का उपयोग करता है, वह इसे प्रदर्शन नहीं कर सकता है (मेरे लिए टॉटोलॉजी के लिए बहाना), इस समस्या को हल करना आवश्यक था।

टीके, जो मैंने खुद के लिए निर्धारित किया है

यदि अजाक्स अनुरोध किया जाता है और * कुछ कहता है कि उपयोगकर्ता ने सत्र समाप्त कर दिया है * वापस आ गया है, तो आपको उपयोगकर्ता लॉगिन फ़ॉर्म प्रदर्शित करना होगा (एक साधारण ओवरले का उपयोग करके, बिना किसी आईपीफ़्रेम के), और उसे इसके माध्यम से प्रमाणित करने के लिए सक्षम करें (फिर, द्वारा) ayaksu, क्योंकि आप पृष्ठ की स्थिति को नहीं खो सकते हैं)। इसके अलावा, यदि यह प्रमाणीकरण पारित करता है, तो अजाक्स अनुरोध जो पास नहीं हुआ, उसे फिर से भेजा जाना चाहिए। लेकिन यहां पहली समस्या है - आपको ऐसा करने की आवश्यकता है ताकि इस अनुरोध पर निर्भर रहने वाला js-code कुछ भी महसूस न करे, अर्थात, आपको सभी कॉलबैक काम करने की आवश्यकता है जैसा कि उन्हें चाहिए और जब आवश्यक हो (उन्हें तब काम नहीं करना चाहिए जब उन्हें आपकी आवश्यकता हो। प्रमाणीकरण, लेकिन जब इसे पारित किया जाना चाहिए)। और दूसरी समस्या अतुल्यकालिक अनुरोधों से आती है - उनमें से बहुत सारे हो सकते हैं, यह पता चल सकता है कि कई अनुरोध एक ही बार में इस समस्या का सामना करेंगे, आपको सभी की निगरानी करने की आवश्यकता है और यदि आवश्यक हो, तो प्रमाणीकरण के बाद उन्हें पुनः आरंभ करें। और, हां, * कुछ ऐसा जो कहता है कि उपयोगकर्ता ने सत्र समाप्त कर दिया है * - हमारे मामले में, यह प्रतिक्रिया कोड "403" है और प्रतिक्रिया निकाय "401" (401) है, क्योंकि यह आत्मा में बंद है, लेकिन आवश्यकता के कारण नहीं डब्ल्यूडब्ल्यूडब्ल्यू-ऑथेंटिकेट में, लेकिन बस 403 असंभव है, क्योंकि सामान्य तौर पर यह किसी भी तरह से प्रमाणीकरण से जुड़ा नहीं है, लेकिन कम से कम यह करीब है)।

मैं कैसे जावास्क्रिप्ट प्यार करता हूँ

बिना किसी हिचकिचाहट के, मैं एक निर्णय पर आया - प्रॉक्सी पैटर्न का उपयोग करना, बनाना, वास्तव में, एक प्रॉक्सी ऑब्जेक्ट, और इसे XMLHttpRequest (XHR) के साथ बदलें, और इस प्रॉक्सी में पहले से ही XHR के साथ सीधे संवाद करें। और हाँ, कल्पना कीजिए, जावास्क्रिप्ट में एक वर्ग को दूसरी कक्षा से बदलना संभव है, वास्तव में, यहाँ कक्षा एक ही वस्तु है (या एक प्रोटोटाइप, शब्दावली में मैं मजबूत नहीं हूं :()।
तो शुरुआत के लिए, आप सामान्य रूप से एक वर्ग कैसे बनाते हैं जिसे नए क्लासनेम () के साथ त्वरित किया जा सकता है, और आप वहां तरीके और गुण कैसे जोड़ सकते हैं? आपके द्वारा Google पर सब कुछ देखने के कई तरीके हैं, मैंने शायद सबसे सरल का उपयोग किया है, यहां एक वर्ग की परिभाषा है:

(function () { "use strict"; window.SomeClass = function () { var randNumber = Math.random(); this.someMethod = function () { console.log(randNumber); }; this.randomized = randNumber; }; })(); 

यदि आप ध्यान दें, मैंने तुरंत सभी कोड को एक फ़ंक्शन में पैक किया, जिसे मैंने तुरंत कॉल किया था, यह JS में एक सामान्य अभ्यास है, इसका उपयोग कोड स्वच्छता के लिए सबसे पहले किया जाता है (हम वैश्विक दायरे को रोक नहीं सकते हैं), और दूसरी बात यह है कि प्रदर्शन के कारण (यह इस प्रकार है) सबसे पहले, तथ्य यह है कि जब आप एक दायरे में बहुत सारे चर बनाते हैं (इस मामले में, वैश्विक), जब आप उन्हें एक्सेस करते हैं, तो दुभाषिया उन्हें लंबे समय तक देखेगा, क्योंकि उसे अधिक विकल्पों से गुजरना होगा, क्योंकि एक चर की खोज निकटतम दायरे से शुरू होता है और वैश्विक तक जाता है)। मैं भी सख्त उपयोग करता हूं, आप इसके बारे में यहां पढ़ सकते हैं, यह आपको अप्रत्याशित परिस्थितियों से बचने में मदद करेगा, खासकर यदि आप आईडीई का उपयोग करते हैं (और खासकर अगर आप जेएसएलआईएनटी / जेएसहिंट का उपयोग करते हैं)। और कोड के बारे में - जैसा कि आप देख सकते हैं, हमने वैश्विक दायरे में "क्लास" SomeClass बनाया, वास्तव में, इस वर्ग का निर्माता फ़ंक्शन के अंदर सभी कोड है। नतीजतन, हमारे पास रैंडनम्बर चर है, जो केवल कक्षा के अंदर से दिखाई देता है (अधिक सटीक रूप से, इसका उदाहरण), कुछ मीथोड () विधि, जो समान वर्ग उदाहरण के लिए हमेशा एक ही नंबर पर कंसोल भेजती है, और यादृच्छिक संपत्ति, जो समान संख्या के बराबर है। ।
स्थानापन्न बनाना:

 (function () { "use strict"; //   , ..       var XHR = window.XMLHttpRequest; window.XMLHttpRequest = function () { //    var o = new XHR(), t = this, reassignAllProperties = function reassign() { t.readyState = o.readyState; t.responseText = o.responseText; t.responseXML = o.responseXML; t.status = o.status; t.statusText = o.statusText; }; t.readyState = 0; t.responseText = ""; t.responseXML = null; t.status = null; t.statusText = ""; //    ,     //    reassignAllProperties() ..  //        - - t.open = function open() { o.open.apply(o, arguments); reassignAllProperties(); }; t.send = function send() { o.send.apply(o, arguments); reassignAllProperties(); }; t.abort = function abort() { o.abort(); reassignAllProperties(); }; t.setRequestHeader = o.setRequestHeader; t.overrideMimeType = o.overrideMimeType; t.getResponseHeader = o.getResponseHeader; t.getAllResponseHeaders = o.getAllResponseHeaders; t.onreadystatechange = function () {}; o.onreadystatechange = function onReady() { reassignAllProperties(); t.onreadystatechange(); }; }; })(); 

जैसा कि आप कोड से देख सकते हैं, यह पूरी तरह से मूल XMLHttpRequest (तरीकों का एक सारांश / sv आप रूसी विकिपीडिया पृष्ठ पर देख सकते हैं) को दोहराता है। हमें बहुत अधिक की आवश्यकता है - हमें सर्वर की प्रतिक्रिया का पालन करने की आवश्यकता है, और यदि हम शरीर में 403 वें उत्तर और 401 को नोटिस करते हैं, तो हम तुरंत लॉगिन फॉर्म खोलते हैं। लेकिन एक कस्टम कॉलबैक नहीं कहा जाना चाहिए। और इसके अलावा, "गर्भपात" के बाद अनुरोध को पुनः आरंभ करने और प्रतिक्रिया प्राप्त करने का अवसर होना चाहिए। इसलिए, हमें प्रॉक्सी ऑब्जेक्ट में स्टोर करना चाहिए सभी डेटा जो कुछ सेटर विधियों (ओपन और सेंड सहित) को पास किया गया था, और जब अनुरोध पुनः आरंभ किया जाता है, तो इन सभी तरीकों को फिर से कॉल किया जाना चाहिए। लेकिन समस्या बनी हुई है - एक ऐसी स्थिति की कल्पना करें जब एक अनुरोध किया गया था, जो प्रमाणीकरण के कारण विफल हो गया, उसके बाद ही उपयोगकर्ता लॉग इन करता है, हमें अनुरोध को फिर से शुरू करना चाहिए और ऑन्रेडिस्टेटचेंज घटना को आग देना चाहिए, लेकिन अनुरोध से पहले इस घटना को चालू नहीं किया जाना चाहिए। फिर से शुरू किया जाएगा। समाधान सरल है - तथ्य यह है कि onreadystatechange घटना को कम से कम चार बार निकाल दिया जाता है, जबकि रेडीस्टेट संपत्ति बढ़ाई जाती है (यहां इसके सभी मूल्य हैं ), इसलिए हमें केवल एक कस्टम कॉलबैक कॉल करने की आवश्यकता है जब हम सुनिश्चित हों कि उत्तर वैध है। लेकिन, अगर "पूर्ण" के अलावा अन्य राज्यों का उपयोग किया जाता है, तो आपको इसे ध्यान में रखना होगा, सबसे आसान तरीका यह है कि अंतिम तीन रेडीस्टेट (2 से 4 तक) के साथ तीन बार आग लग जाए, बस एक लूप में। आपको उन सभी अनुरोधों को संग्रहीत करने की भी आवश्यकता है जो विफल हो जाते हैं, जिसे उसके बाद पुनः आरंभ करने की आवश्यकता होगी।

छू मंतर

 (function () { "use strict"; //   , ..       var XHR = window.XMLHttpRequest, //       ,    failedRequestsPool = [], authenticationWindow = function () { $("#auth-overlay").show(); }; $("#auth-overlay form").submit(function () { $.ajax({ type: "post", url: "/login", data: { login: $("#auth-login").val(), password: $("#auth-password").val() }, dataType: "json", success: function (data) { if (data.state === "OK") { $("#auth-overlay").hide(); //   ,      for (var i in failedRequestsPool) { if (failedRequestsPool.hasOwnProperty(i)) { failedRequestsPool[i].retry(); } } failedRequestsPool = []; } } }); return false; }); window.XMLHttpRequest = function () { //    var o = new XHR(), t = this, //   ,       callback- aborted = false, reassignAllProperties = function reassign() { t.readyState = o.readyState; t.responseText = o.responseText; t.responseXML = o.responseXML; t.status = o.status; t.statusText = o.statusText; }, //      ,       data = { open: null, send: null, setRequestHeader: [], overrideMimeType: null }; t.readyState = 0; t.responseText = ""; t.responseXML = null; t.status = null; t.statusText = ""; t.retry = function retry() { aborted = false; //     o.open.apply(o, data.open); reassignAllProperties(); for (var i in data.setRequestHeader) { if (data.setRequestHeader.hasOwnProperty(i)) { o.setRequestHeader.apply(o, data.setRequestHeader[i]); } } if ("overrideMimeType" in o && data.overrideMimeType !== null) { o.overrideMimeType(data.overrideMimeType); } o.send(data.send); reassignAllProperties(); }; //    ,     //    reassignAllProperties() ..  //        - - t.open = function open() { data.open = arguments; // ,    o.open.apply(o, arguments); reassignAllProperties(); }; t.send = function send(body) { data.send = body; o.send(body); reassignAllProperties(); }; t.abort = function abort() { o.abort(); reassignAllProperties(); }; t.setRequestHeader = function setRequestHeader() { data.setRequestHeader.push(arguments); o.setRequestHeader.apply(o, arguments); }; //    IE     ,   if ("overrideMimeType" in o) { t.overrideMimeType = function (mime) { data.overrideMimeType = mime; o.overrideMimeType(mime); }; } t.getResponseHeader = o.getResponseHeader; t.getAllResponseHeaders = o.getAllResponseHeaders; t.onreadystatechange = function () {}; o.onreadystatechange = function onReady() { reassignAllProperties(); //          ,  ,   if (!aborted && o.state === 403 && o.responseText.indexOf("401") !== -1) { aborted = true; o.abort(); failedRequestsPool.push(t); authenticationWindow(); } //        ,    if (!aborted && o.readyState === 4) { for (var i = 1; i < 5; ++i) { t.readyState = i; t.onreadystatechange(); } } }; }; })(); 

इसलिए, काफी सरल रूप से, हमने XHR को एक प्रॉक्सी के साथ बदल दिया, जो उपयोगकर्ता को "अनअथेंटेड" होने के बाद भेजे गए अनुरोधों को याद नहीं करने देगा।

PS मुझे एक त्रुटि दिखाई दी, ओपेरा में getAllResponseHeaders () विधि WRONG_THIS_ERR फेंकता है, केवल यह पूरी तरह से अस्पष्ट है कि यह कहां से आया है।
पीपीपी, मूल समस्या को हल करने के लिए सबसे अच्छा चर्चा नहीं करते हैं। तथ्य यह है कि यह समाधान न केवल असंतोष के मामले में काम आ सकता है

UPD यदि आपको वास्तव में इस तरह का प्रतिस्थापन करने की आवश्यकता है (और मैं आपको इसके बारे में पहले सोचने की सलाह देता हूं, क्योंकि, जैसा कि कई टिप्पणियों में देखा गया है, रूट पुस्तकालयों की जगह बहुत अच्छी नहीं है), तो इस समाधान का उपयोग करें github.com/ilinsky-xmlhttprequest