क्रॉस-डोमेन "अजाक्स" - एक सरल समाधान

अगले प्रोजेक्ट में, मुझे ajax पर क्रॉस-डोमेन अनुरोधों के साथ सक्रिय रूप से काम करने की आवश्यकता का सामना करना पड़ा, विषय, जैसा कि मैं इसे हब पर देखता हूं, विशेष रूप से उठाया या कवर नहीं किया गया था, इसलिए मैंने अपने अनुभवों को पाठकों के साथ साझा करने का निर्णय लिया।

मान लीजिए कि हमारे पास एक वेबसाइट है

  http://name.my 

और हम इस पर ajax का उपयोग करना चाहते हैं और हमें क्या मिलेगा?

1. के लिए अनुरोध

     http://name.my/ajax.php 

   (मैं हर जगह php लिखूंगा ताकि हर कोई आरामदायक हो, मैं खुद जावा के साथ काम करूंगा) हमें समस्याओं के बिना जवाब वापस कर देगा
2. के लिए अनुरोध

     http://google.com/ 

   पहुँच त्रुटि के साथ विफल हो जाएगा
3. पहुँचने की कोशिश कर रहा है

     https://name.my/ajax.php 

   भी विफल हो जाएगा, प्रोटोकॉल बदल गया है

4.   http://name.my:81/ajax.php 

   और पते में एक और बंदरगाह रास्पबेरी को बर्बाद कर देगा

कार्य: अनुरोध भेजने के लिए एक क्रॉस-ब्राउज़र समाधान खोजें जो काम करेगा: ie7 +, ओपेरा 9.6+, ff 3+, क्रोम, सफारी। और इसके अलावा, चूंकि मुझे http से https तक संपर्क करना था, इसलिए इसमें "मिश्रित सामग्री" संदेश नहीं होना चाहिए।
JQuery का उपयोग साइट पर एक लाइब्रेरी के रूप में किया गया था और इसमें कोई अंतर्निहित क्रॉस-डोमेन क्वेरी तंत्र नहीं है (1.5 में jsonp को व्यवस्थित करने की क्षमता दिखाई दी, लेकिन यह हमेशा काम नहीं करता है), प्लगइन्स की खोज ने भी परिणाम नहीं दिए। इसलिए, सरल रास्तों से टूटना (जो, सिद्धांत रूप में, अपेक्षित था), मैं Google पर गया, जो एक स्पष्ट उत्तर भी नहीं देता है - मुझे उन विधियों या चीजों का अधिक विवरण मिला, जो मेरे लिए उपयुक्त नहीं थीं (उदाहरण के लिए, डोजो में इस तरह के अनुरोधों से संबंधित हैं, लेकिन सभी js बदलते हुए साइट बहुत श्रम गहन है)।
समस्या को हल करने के लिए निम्नलिखित तकनीकों का उपयोग किया जा सकता है:

1. postMessage
2. JSONP
3. CORS
4. document.domain विधियाँ
5. window.name परिवहन
6. सर्वर-साइड प्रॉक्सी
7. CRAZY IFRAME STUFF
8. फ़्लैश

शुरुआती, जब मैं इस सूची को देखता हूं, तो मैं भयभीत हो जाऊंगा (सिद्धांत रूप में, मैं उत्साही भी नहीं था)। तो हमारा काम समस्या को हल करने का सबसे अच्छा तरीका खोजना है, जो साइट पर अतिरिक्त बैसाखी नहीं बनाएगा।
1) पोस्टमैसेज HTML5 मानक की एक नई विशेषता है जो आपको एक विंडो से दूसरी विंडो में संदेश भेजने की अनुमति देता है, जबकि विंडोज़ की सामग्री विभिन्न डोमेन से हो सकती है। TargetWindow.postMessage (संदेश, targetOrigin) का उदाहरण कार्यान्वयन; targetWindow - विंडो जहां हम अनुरोध, संदेश - संदेश भेजते हैं, लक्ष्य डोमेन को विंडो में खोले जाने का संकेत देते हैं, डोमेन के रूप में "*" निर्दिष्ट करना संभव है, और कोई भी डोमेन हो सकता है।
2) JSONP (JSON पैडिंग) या "JSON पैडेड" एक JSON एक्सटेंशन है जब कॉलबैक फ़ंक्शन का नाम इनपुट तर्क के रूप में निर्दिष्ट किया जाता है। टैग का उपयोग करते हुए, हम अन्य डोमेन का उल्लेख कर सकते हैं, हालांकि, परिणाम एक जेसन रिस्पॉन्स के रूप में आएगा, जिसे हम प्रोसेस नहीं कर सकते हैं, jsonp निम्नलिखित समाधान प्रदान करता है: सर्वर को फंक्शन का नाम देते हुए, हमें रिस्पॉन्स में नंगे डेटा नहीं मिलते हैं, लेकिन parseResponse ({"पेपर"): "ए 4", "गणना": 5}), जो पार्सपर्सन फ़ंक्शन को कॉल करेगा।
3) CORS एक बड़ा विषय है, इसलिए मैं आपको संक्षेप में बताऊंगा कि wels के लिए w3c प्रलेखन में कौन रुचि रखते हैं। XMLHTTPRequest 2 एक नया अनुरोध विनिर्देश है, यह काम करता है और इसे एक नियमित XMLHTTPRequest (जैसे कि यह XDomainRequest है) कहा जाता है, लेकिन अब निम्नलिखित http हेडर में जोड़ा गया है:
एक्सेस-कंट्रोल-अनुमति-उत्पत्ति यह निर्धारित करती है कि किन डोमेन को कनेक्ट करने की अनुमति है।
प्रवेश-नियंत्रण-अनुमति-क्रेडेंशियल अनुरोध को निष्पादित करने के लिए प्राधिकरण को इंगित करता है (प्रवेश-नियंत्रण-अनुमति-क्रेडेंशियल: "एक्सेस-कंट्रोल-अनुमति-क्रेडेंशियल्स" ":" सत्य सत्य:% x74.72.75.65;) "सही, केस-सेंसिटिव; )
अभिगम-नियंत्रण-अधिकतम-आयु - कब तक परिणाम कैश होंगे।
आप उपलब्ध तरीकों (GET, POST) को भी निर्धारित कर सकते हैं, आप विनिर्देश में सभी अतिरिक्त हेडर फ़ील्ड देख सकते हैं।
विधि की मुख्य समस्या यह है कि सभी ब्राउज़र इसका समर्थन नहीं करते हैं, और जो IE से कार्यान्वयन का उपयोग करना चाहते हैं - XDomainRequest, यह मत भूलो कि IE अपने प्रदर्शनों की सूची में आपको http प्रोटोकॉल से https तक अनुरोध करने की अनुमति नहीं देगा, हालांकि केवल अनुरोधों के साथ https) http), लेकिन वह है।
4) document.domain हमारे लिए उपयुक्त है यदि हम एक सामान्य सुपरडोमेन पर 2 साइटों के साथ संवाद करना चाहते हैं, वह है test1.name.my और test2.name.my। इन साइटों के बीच कोई सामान्य अनुरोध नहीं है, हालांकि, दस्तावेज़ में एक डोमेन संपत्ति है, जिसे हम दोनों विंडोज़ के लिए name.my में बदल सकते हैं और एक iframe के माध्यम से सामान्य तरीके से संवाद कर सकते हैं।
5) window.name ट्रांसपोर्ट - इसमें विंडो की प्रॉपर्टी के नाम को बदलना शामिल है और इस तरह टेक्स्ट के माध्यम से हमारे क्रमबद्ध डेटा के गुणों को प्रसारित किया जाता है।
6) सर्वर-साइड प्रॉक्सी - सबसे आसान समाधान सर्वर के अनुरोध को प्रॉक्सी करना है। अर्थात्, name.my एक विशेष अनुरोध करता है, उदाहरण के लिए, name.my/proxy/name2.my/test.html जैसे विशेष URL के लिए, और name.my सर्वर इसे name2.my/test.html पर प्रस्तावित करता है ।
7) CRAZY IFRAME STUFF - विधि का सार यह है कि iframes, यहां तक ​​कि अलग-अलग डोमेन पर होने के बावजूद, एक-दूसरे के साथ पते के टुकड़ों के पहचानकर्ताओं को बदलकर संवाद कर सकते हैं (पहचानकर्ता "#" के बाद पते में है) # खंड के लगातार परिवर्तन से एक डेटा स्ट्रीम उत्पन्न होता है जिसे दोनों दिशाओं में प्रेषित किया जा सकता है। चूंकि खंड पहचानकर्ता पाठ है, तो ट्रांसमिशन के लिए सभी डेटा (डी) क्रमबद्ध होना चाहिए, अर्थात्, JSON में कनवर्ट किया गया + आपको 2 iframes की आवश्यकता है ताकि दृश्यमान विंडो के पते को प्रभावित न करें।
8) फ्लैश - इंटरमीडिएट इंटरफेस के रूप में फ्लैश का उपयोग करें (एक अलग विषय, सभी सूक्ष्मताएं जो लेख के लिए भी बनाई गई हैं)
इंटरनेट पर खोज करने के बाद मुझे पुस्तकालय की अद्भुत जानकारी मिली । सबसे स्वादिष्ट चीज काम करने की विधि है, ब्राउज़र और इसके संस्करण के आधार पर सबसे तेज़ और सबसे आधुनिक विधि का चयन किया जाता है।

• IE6 और IE7 - फ्लैश के साथ एक गुच्छा का उपयोग किया (Microsoft सुरक्षा बुलेटिन MS11-018)
• IE8 + - पोस्टमासेज द्वारा उपयोग किया जाता है
• ओपेरा 9+ - पोस्टमासेज द्वारा उपयोग किया जाता है
• फ़ायरफ़ॉक्स 1-2 - ifame इस्तेमाल किया
• फ़ायरफ़ॉक्स 3+ - पोस्टमासेज द्वारा उपयोग किया जाता है
• सफारी 4+ - पोस्टमासेज द्वारा उपयोग किया जाता है
• Chrome 2+ - पोस्टमासेज द्वारा उपयोग किया जाता है

पोस्टमैसेज का समर्थन नहीं करने वाले अन्य ब्राउज़रों के लिए, # राशि के आदान-प्रदान पर आधारित तकनीक का उपयोग किया जाएगा। पुस्तकालय के कार्य केवल अजाक्स तक सीमित नहीं हैं, लेकिन बातचीत मुख्य रूप से इसके बारे में होगी।
इसलिए, मैं easyxdm का उपयोग करके एक ऐजैक्स अनुरोध लागू करके शुरू करूँगा।
हम सीधे अनुरोध भेजने के लिए प्रॉक्सी ऑब्जेक्ट बनाते हैं:

     var xhr = new easyXDM.Rpc ({
         दूरस्थ: "http://name.my/cors/index.html" // प्रदाता को पथ
     } {
         रिमोट: {
             निवेदन: {} 
         }
     });

easyXDM है, इसलिए बोलने के लिए, एक स्थिर वर्ग जिसमें एक कंस्ट्रक्टर नहीं है और सिंगलटन पैटर्न को लागू करता है।
हेलमेट स्वयं अनुरोध:

 xhr.request (
     {
         url: "pathRelativeToRemote / getrest /", // हमारे अनुरोध का पता
         विधि: "पोस्ट",
         डेटा: {फू: "बार"}
     }, फ़ंक्शन (प्रतिक्रिया) {// प्रतिक्रिया परिणाम को संसाधित करने के लिए फ़ंक्शन
         सतर्कता (प्रतिक्रिया.स्टैटस);
         सतर्कता (response.data);
     }
 );

अब और अधिक विस्तार में: पहला पैरामीटर, हम मूल सेटिंग्स सेट करते हैं, विशेष रूप से, यहां हम पूर्व-तैयार फ़ाइल "प्रदाता" के लिए पथ को इंगित करते हैं (कोड फ़ोल्डर में असेंबली के साथ संग्रह में निहित है), जिसे मिलना चाहिए

मैं एक दूरस्थ सर्वर पर हूं, यह हमें उस url के लिए अनुरोध करेगा जिसकी हमें आवश्यकता है और उपलब्ध तरीकों में से एक का उपयोग करके हमें जवाब भेजें।
हालांकि, यह मत भूलो कि यहां आपको फ्लैश ड्राइव के लिए पथ दर्ज करने की आवश्यकता होगी (फ्लैश ड्राइव भी लीब से जुड़ी हुई है), जिसके माध्यम से IE के पुराने संस्करण एक कनेक्शन स्थापित करेंगे।

अगला, हम दूरस्थ तरीकों की संरचना बनाते हैं, अब वहां एक अनुरोध घोषित किया जाता है (फ़ाइल name.my/cors/index.html में इसी तरह की संरचना भी बनाई जानी चाहिए)
Xhr.request फ़ंक्शन को कॉल करके, हम अपने प्रॉक्सी फ़ाइल name.my/cors/index.html पर एक अनुरोध भेजते हैं , जो url पर खटखटाया जाता है और डेटा पैरामीटर पास करता है, सामान्य ajax का उपयोग करते हुए, प्रतिक्रिया प्राप्त करने के बाद, यह डेटा भेजता है (यदि आवश्यक हो तो उत्तर को भागों में तोड़कर)। हमारे मेजबान को जहां कॉलबैक कहा जाता है, जिसे हमने पिछले पैरामीटर के साथ पास किया है।
हम फ़ाइल name.my/cors/index.html पर थोड़ा स्पर्श करेंगे; यह हमारे अनुरोध का एक अनिवार्य हिस्सा है, सबसे पहले, यह डेटा के वापसी परिवहन और रिसेप्शन का आयोजन करता है। दूसरे, उसके पास एक अद्भुत रोटी है - वह अपने स्वयं के माध्यम से कॉर्स को लागू करता है:
var useAccessControl = true; // (सच्चे) या निषिद्ध (झूठे) सर्वर से हेडर स्वीकार करने की अनुमति दें (ताकि सर्वर गलती से किसी तीसरे पक्ष के डोमेन को डेटा भेजने की अनुमति न दे)
var alwaysTrustedOrigins = [(/\.?easyxdm\.net/), (/ xdm1 /)]; // अनुमत सर्वर की सूची
var रिमोट एक आसान XDM ऑब्जेक्ट है जिसमें हमें दूरस्थ विधियों की संरचना को लागू करना चाहिए।

और एक छोटा "लाइब्रेरी" json2.js कनेक्ट करना भी न भूलें, जो पुराने ब्राउज़रों के लिए, एक JSON ऑब्जेक्ट को कार्यान्वित करता है जो सक्रिय रूप से easyXDM में उपयोग किया जाता है (जबकि easyXDM आपको अपना खुद का सीरियल बनाने और एक पैरामीटर के रूप में गुजरने से रोकता नहीं है, हालांकि यह मुझे बहुत दुर्लभ आवश्यकता लगती है)।

मेरी परियोजना में अजाक्स के माध्यम से बहुत सारे रूपों को भेजने का काम था, इसलिए मुझे एक सुविधाजनक उपकरण की आवश्यकता थी जो कि अजाक्स के माध्यम से निर्दिष्ट रूप को क्रमबद्ध और भेजता हो। समाधान jQuery फॉर्म प्लगइन के चेहरे में तुरंत पाया गया था, लेकिन प्लगइन jq से जुड़ा हुआ है और इसलिए क्रॉस-डोमेन अनुरोध भेजने से इनकार करता है।
मैं संरचना को प्रभावित किए बिना और एक नियमित अजाक्स हैंडलर के रूप में jQuery को छोड़ने के बिना प्लगइन में हमारे क्रॉस-डोमेन अनुरोध को एम्बेड करने का एक आसान तरीका दे दूँगा।
हमारे पास html फॉर्म है (तथ्य यह है कि फॉर्म के अंदर हम इस बारे में चिंतित नहीं हैं कि प्लगइन द्वारा किया जाएगा):

  <form action = "name2.my" id = "myform" विधि = "POST"> ... </ form> 

हम अग्रिम में क्रॉस-डोमेन अनुरोध के लिए अपनी वस्तु तैयार करेंगे:

 crossAjax = नया आसान XDM.Rpc ({
              रिमोट: 'name2.my/cors', // रिमोट सर्वर पर हमारा प्रदाता
              swf: 'name.my/easyxdm.swf'
	 } {
              रिमोट: {
              निवेदन: {} 
	 }
 });

निम्नलिखित प्लग-इन कनेक्शन कोड है, जिसमें सभी फॉर्म फ़ील्ड स्वचालित रूप से क्रमबद्ध होते हैं, और जिस यूआरएल को हम भेजते हैं वह फॉर्म की कार्रवाई से ही लिया जाता है (जैसे विधि)

 $ ('# myform')। ajaxForm ({
     पहले से बताएं:  
     सफलता: showResponse
 });

यह एक विधि है जिसमें हम परिणाम की प्रक्रिया करते हैं; हम इसे बिल्कुल नहीं छूते हैं:

 showResponse = function (responseText, statusText, xhr, form) { 
     यहाँ हम अपने उत्तर के साथ कुछ कर रहे हैं
 }

लेकिन मुख्य फ़ोकस पहले ही होगा, सोसाइटी में, फॉर्म सबमिट होने से पहले विधि को कॉल किया जाता है, इसलिए यहाँ हम दोनों को क्रमबद्ध डेटा प्राप्त कर सकते हैं और आगे भेजने के अनुरोध को बाधित कर सकते हैं (जो हमें चाहिए):

 प्रीव्यू समिट = फंक्शन (गिरफ्तारी, फॉर्म, विकल्प) {
     यदि (options.url.indexOf (स्थान.होस्ट) <0) {// यदि होस्ट दूरस्थ है तो हमारी विधि का उपयोग करें
         var json = {};
         के लिए (var i = 0; i <arr.length; i ++) {// क्रमबद्ध रूप डेटा को हमारे क्रमांकन के लिए तैयार एक सामान्य js ऑब्जेक्ट में परिवर्तित करें (प्रपत्र स्वयं उन्हें बहुत ही अजीब तरीके से पास करता है)
             json [arr [i] .name] = arrest [i] .value;
         }
         crossAjax.request ({// हेलमेट क्रॉस डोमेन अनुरोध, हमारे मापदंडों को प्रतिस्थापित करता है
                 url: options.url,
                 विधि: "पोस्ट",
                 डेटा: json
             }, फ़ंक्शन (प्रतिक्रिया) {
                 स्विच (response.status) {// उत्तर को पार्स करें
                     मामला 200:
                         showResponse (JSON.parse (response.data), response.status, arr, form)
                         तोड़;
                     डिफ़ॉल्ट:
                         चेतावनी ("त्रुटि:" + प्रतिक्रिया.स्टैटस);
                         तोड़;
            }
         });
         झूठे लौटना;  // jj से देशी एजैक्स अनुरोध को रोकें
     }
 } 

ऐसा कुछ आसानी से एक समस्याग्रस्त कार्य को हल कर सकता है। काम के उदाहरण पुस्तकालय की वेबसाइट पर देखे जा सकते हैं। इस पर मैंने अपना पहला "हबप्रोस्ट" निष्कर्ष निकाला।
पुस्तकालय ही