बाइक: मैश-अप एप्लिकेशन डेवलपमेंट टूल के रूप में jQuery.ajax के लिए एक iframe विकल्प। क्या यह समझ में आता है?

सभी को नमस्कार! मैं समुदाय को एक तकनीकी तंत्र के ध्यान में लाना चाहता हूं जो आपको बहुत अधिक प्रयास के बिना अजाक्स पर चल रहे एक iframe जैसा एप्लिकेशन बनाने की अनुमति देता है। एक आधार के रूप में jQuery और easyXDM का इस्तेमाल किया।

तकनीकी विवरण, प्रोटोटाइप, कट के तहत संभावित उपयोग और संदेह के बारे में धारणाएं।



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

मौजूदा समाधान के नुकसान

iframe

• ब्राउज़र लाइन में url, iframe के अंदर जाने पर परिवर्तित नहीं होता है।
• इसके अतिरिक्त कुछ करने की आवश्यकता है ताकि सामग्री के अनुसार iframe की ऊंचाई अपने आप बदल जाए।
• सत्र में उपयोगकर्ता की वर्तमान स्थिति को सहेजना आवश्यक है, ताकि जब आप F5 पर क्लिक करें तो अंतिम पृष्ठ जिस पर उपयोगकर्ता को प्रदर्शित किया गया था, और सेवा का मुख्य पृष्ठ नहीं दिखाया गया है।
• आपको यह सुनिश्चित करने की आवश्यकता है कि लक्ष्य = "_ पैरेंट" या लक्ष्य = "_ रिक्त" में खुले बाहरी साइटों के लिंक, अन्यथा बाहरी संसाधन iframe के अंदर भी खुलेंगे, और यह अजीब लगेगा।
• "ओपन इन अ टैब" मोड में क्लिक के तर्क पर विचार करना आवश्यक है ताकि साइट के संबंधित पृष्ठ पर एक स्वचालित रीडायरेक्ट हो।
• बड़े पॉपअप ब्लॉक प्रदर्शित करते समय आकार प्रतिबंध होते हैं, जैसे कि लाइटबॉक्स में चित्र।
• सभी सर्च इंजन iframe कंटेंट को इंडेक्स नहीं कर सकते हैं।
• सामान्य प्राधिकरण के आयोजन में कठिनाइयाँ।

सेवा सर्वर पर तीसरा स्तर डोमेन

• प्रत्येक विशिष्ट साइट के लिए विकास करने के लिए सेवा के रचनाकारों की आवश्यकता (प्रत्येक विशिष्ट साइट के एक टोपी, तहखाने, डिजाइन को इकट्ठा करें)
• तीसरे स्तर के डोमेन को पंजीकृत करने के लिए साइट की ओर से अतिरिक्त प्रयास।
• साइट के विकास के संबंध में बेसमेंट कैप को अपडेट करने की आवश्यकता है।
• सामान्य प्राधिकरण के आयोजन में कठिनाइयाँ।

प्रस्तावित समाधान आपको जल्दी से पहले से चल रहे एप्लिकेशन से एक जाल को व्यवस्थित करने या आसानी से एक नया बनाने की अनुमति देता है।

प्रोटोटाइप डेमो

http://mashups.ru/demo

मैंने इसे मैक के नीचे टेस्ट नहीं किया :(
यह एक सेवा है (विभिन्न वेब तंत्रों का उपयोग करके एक नियमित php एप्लिकेशन) और विभिन्न परीक्षण साइटें, जिन पर सेवा का निर्माण किया जाता है। सेवा के लिए php स्रोत कोड हैं, टिप्पणियों में ऐसे बिंदु हैं जो एक जाल की तरह काम करने के लिए आवश्यक हैं (उन्हें बाद में लेख में वर्णित किया जाएगा, कोड में उन्हें # for_mashup # टिप्पणियों में # के रूप में चिह्नित किया जाएगा)। होस्टिंग ग्रह के दूसरी तरफ स्थित है (वास्तविक http देरी हैं), यह कुछ ब्राउज़र को नियमित वेब एप्लिकेशन पर गति में अजाक्स के लाभ के साथ नग्न आंखों से देखने की अनुमति देता है। इसका मतलब पहले पेज को खोलना नहीं है, लेकिन बाद में सर्विस लिंक पर क्लिक करना है।

तकनीकी बिंदु

सेवा का सर्वर हिस्सा। सब कुछ काम करने के लिए, आपको सेवा एप्लिकेशन के सर्वर पक्ष में विशेष कोड जोड़ने की आवश्यकता है जो सामान्य सर्वर प्रतिक्रिया को jsonp प्रतिक्रिया के साथ बदल देगा। उदाहरण के लिए, GET अनुरोध के लिए एक सेवा की प्रतिक्रिया:

<div>hello world</div> 

द्वारा प्रतिस्थापित किया जाएगा

 callback_function( { "content": "<div>hello world<\/div>" } ); 

के लिए एक POST प्रतिक्रिया

 <script>parent.callback_function( { "content": "<div>hello world<\/div>" } );</script> 

ये प्रतिस्थापन आपको प्लेटफ़ॉर्म पेज पर स्थित ब्राउज़र से सेवा सर्वर पर क्रॉस-डोमेन अजाक्स अनुरोध भेजने की अनुमति देते हैं। उसी तरह, 301 HTTP सेवा प्रतिक्रिया का अनुकरण करने के मामले के लिए स्थान प्रेषित किया जाता है। उदाहरण के लिए:

 callback_function( { "location": "/postSuccess/" } ); 

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

आपको ब्राउज़र में काम करने के लिए एप्लीकेशन के लिए किसी विशिष्ट स्थान पर easyXDM के लिए swf फ़ाइल डालनी होगी ।
इसके अलावा एक विशेष php फ़ाइल सर्विसपॉइडर रखें, यह सेवा के लिए आवश्यक js, css बॉडी किट को निर्धारित करता है और साथ ही सत्र काम कर रहा है।

साइट का सर्वर हिस्सा। जेएस कोड को पेज पर जोड़ना, जैसे बैनर सिस्टम में कोड जोड़ना।

ग्राहक भाग। एक आसान XDM- आधारित JS लाइब्रेरी सेवा पृष्ठ में जोड़ा जाता है, जो निम्न कार्य करता है:

• HTML सेवा से आने वाले कोड में क्रमशः A और FORM टैग की href और एक्शन विशेषताओं को प्रतिस्थापित करता है।
• JQuery के अजाक्स तरीकों, डोम तरीकों की जगह।
• Window.location ऑब्जेक्ट का एक एनालॉग बनाता है।
• एक प्लेटफॉर्म इंटरैक्शन वातावरण बनाता है।

Window.location एनालॉग के अलावा सब कुछ मेष में और साथ ही एक स्टैंडअलोन वेब एप्लिकेशन में काम करेगा।
चूंकि window.location एक समस्या है, इसलिए इसे प्रतिस्थापित नहीं किया जा सकता है। इसलिए, सेवा में window.location का उपयोग करने के लिए, आपको MU.location से संपर्क करने की आवश्यकता है - इसका एनालॉग, जो मैशअप के भीतर काम सुनिश्चित करता है। लेकिन एक स्टैंडअलोन एप्लिकेशन के रूप में संचालन और सेवा सुनिश्चित करने के लिए और एक जाल के रूप में काफी सरल है।

 ... <head> <script>var MU = window;</script> </head> ... <a href="#" onclick="MU.location.href = '/link/'; return false;"></a> 

यानी वैश्विक चर MU को विंडो के रूप में परिभाषित करें। मेष के ढांचे के भीतर, एक विशेष js स्क्रिप्ट इसे वांछित वस्तु के साथ बदल देगी, और प्रतिस्थापन के बिना यह एक नियमित खिड़की की तरह काम करेगी।

इसके अलावा, यदि आप बिना आइफ्रेम टैग के संस्करण का उपयोग करते हैं, तो अजाक्स और डोम jQuery विधियों तक पहुँचने की समस्या है। वास्तव में, पेज पर jQuery विधियों के दो संस्करण हैं, एक मंच के ढांचे के भीतर काम कर रहा है, दूसरा सेवा के ढांचे के भीतर काम कर रहा है।
जबकि इस तरह के एक इंटरफ़ेस समाधान है:

 $.muDom(); 

और उसके बाद, DOM jQuery के तरीकों के किसी भी कॉल को सेवा के भीतर किया जाएगा, और केवल एक कॉल के साथ।

 $.muAjax (); 

और उसके बाद, अजाक्स jQuery के तरीकों के लिए कोई भी कॉल सेवा के भीतर किया जाएगा, और केवल एक कॉल के साथ।
उदाहरण के लिए:

 $.muAjax(); $.get( '/page', function( response ) { alert(response ) } ); //   alert    http://[ ]/page;  , , $.get    . $.get( '/page', function( response ) { alert(response ) } ) //       http://[ ]/page; 

साइट में एकीकृत सेवा के html / css डिजाइन के संपादन की प्रक्रिया को सरल बनाने के लिए कोई विचार नहीं हैं। हालांकि, मेरी राय में, सबसे सरल, सेवा में सही सिमेंटिक लेआउट करना है, जो आईडी और / या क्लास विशेषताओं के साथ पूरा किया गया है, ताकि आप बाद में आसानी से उन्हें पकड़ सकें। वेल और css का मतलब है एडिट। इस मामले में, आपको केवल एक लेआउट डिजाइनर के काम की आवश्यकता है, प्रोग्रामर के काम को व्यावहारिक रूप से आवश्यक नहीं है।

आईफ्रेम के साथ और इसके बिना एकीकृत करना संभव है। Iframe के साथ या बिना संस्करण का उपयोग करना सेवा पर निर्भर करता है। चूंकि iframes सुरक्षित हैं, इसलिए सेवा किसी भी प्लेटफ़ॉर्म js विधि को निष्पादित नहीं कर सकती, डॉक्यूमेंट.कॉकी, आदि पढ़ें। इसके बिना - अधिक स्वतंत्रता, लेकिन कम संभावना है कि कोई इसे अपने पेज पर सेट करना चाहता है। निर्भर करता है, शायद, विश्वसनीयता पर। उदाहरण के लिए, कई लोग फेसबुक विजेट स्थापित करते हैं, लेकिन कोई भी वास्तव में यह नहीं सोचता है कि वह (फेसबुक) कभी भी चुपचाप दस्तावेज़ में जाना चाहेंगे। निजी डेटा एकत्र करें, और फिर अपने तर्क में इसे किसी तरह से उपयोग करें। क्योंकि facebook एक प्रसिद्ध, लोकप्रिय सेवा है। आंशिक रूप से, प्लेटफ़ॉर्म बिना असुरक्षित जेएस कोड को हटाकर, सर्वर पर अजाक्स अनुरोधों की जाँच करके, महत्वपूर्ण कुकीज़ के लिए httpOnly विशेषता सेट करके, आईफ्रेम के बिना संस्करण के लिए सुरक्षा समस्या को हल कर सकता है।

मैशअप बनाने में उपयोगी अन्य उपकरण

जबकि केवल एक iframe एनालॉग का एक प्रोटोटाइप है, अन्य एकीकरण मुद्दों को हल करने के लिए अभी भी अवास्तविक विचार हैं।

सामान्य प्राधिकरण

किसी साइट पर सेक्शन मैशअप बनाते समय, साइट प्राधिकरण को सेवा में स्थानांतरित करना आवश्यक हो सकता है। उपयोगकर्ता को उसी साइट पर दूसरी बार पंजीकरण करने के लिए कहना किसी तरह बहुत नहीं है। प्रत्येक सेवा के लिए एक विशेष सत्र कुंजी के माध्यम से एक विशिष्ट कार्यान्वयन विचार है। सेवा डेवलपर को विभिन्न साइटों पर ऑउथ और इसके संशोधनों का अध्ययन करने के अतिरिक्त प्रयासों से मुक्त करने के लिए है। और साइट का डेवलपर प्रौद्योगिकी को चुनने और सेवा को प्राधिकरण के हस्तांतरण को लागू करने में समय बर्बाद कर रहा है।

खोज इंजन के लिए सेवा की उपलब्धता

यदि आवश्यक हो, तो प्लेटफ़ॉर्म सर्वर साइड में विशेष कोड जोड़ सकता है, जो लिंक को प्रतिस्थापित करते हुए सेवा प्रतिक्रियाओं के माध्यम से पास होने देगा। खोज इंजन के लिए संस्करण "#" के बिना लिंक पर काम करेगा। लेकिन जब js का समर्थन करने वाला क्लाइंट इस तरह के लिंक को हिट करता है, तो यह स्वचालित रूप से "#" पेज के साथ रीडायरेक्ट करेगा।

विजेट

साइट पर नए अनुभाग के लिए उपयोगकर्ताओं को प्राप्त करने के लिए, आपको लिंक के साथ ब्लॉक प्रदर्शित करने की क्षमता की आवश्यकता हो सकती है। उदाहरण के लिए, साइट के मुख्य पृष्ठ पर, सेवा में नए पृष्ठों के लिए एक विजेट उपयोगी होगा (हाल के पोस्ट, टिप्पणियां, घोषणाएं, उत्पाद, ईवेंट, आदि ...)। या विजेट, जो किसी विशेष पृष्ठ की सामग्री के आधार पर, सेवा अनुभाग के अर्थ लिंक में निकटतम दिखाएगा। विजेट की सामग्री सेवा सर्वर पर उत्पन्न होती है। इनपुट किसी पृष्ठ का लिंक, विशिष्ट कंटेनर की सामग्री, बस कुछ चर, कीवर्ड आदि हो सकता है।

सीपीए आँकड़े

सेवा और साइट के स्वामी के बीच मैशअप की उपयोगिता और आपसी निपटान के मूल्यांकन के लिए, आपको CPA (प्रति कार्य लागत) सांख्यिकी टूल की आवश्यकता हो सकती है। सेवा डेवलपर प्रमुख कार्यों को निर्धारित करता है, और सिस्टम उपयोगकर्ता द्वारा उनके कार्यान्वयन के बारे में आंकड़े एकत्र करता है।

मैं कैसे उपयोग कर सकते हैं?

• एक बाहरी सेवा का उपयोग करके ट्रैफ़िक को मुद्रीकृत करने और कार्यक्षमता का विस्तार करने की क्षमता - महान लोकप्रियता के साथ एक साइट के लिए एकीकरण का समय बर्बाद किए बिना एक खंड;
• विकास संसाधनों की बचत के साथ एक विशिष्ट कार्य स्थल के सामाजिक नेटवर्क के लिए सेवा आवेदन की उपयोगिता / बेकारता को समझना / सत्यापित करना;
• एक कामकाजी साइट के आवेदन के विकास और सफल प्रक्षेपण के बाद, न्यूनतम लागत के साथ उच्च यातायात के साथ किसी अन्य साइट में एकीकृत करने की क्षमता;
• लोकप्रिय क्षेत्रीय साइटों पर एक विशेष खंड के रूप में एक कामकाजी संघीय साइट की सेवा का वितरण;
• मौजूदा साइटों के लिए एक अतिरिक्त मार्केटिंग टूल (किसी अन्य संसाधन पर आपकी सेवा को एकीकृत करने की क्षमता);
• एसईओ और विज्ञापन पर समय और संसाधनों की बचत करना, स्टार्टअप सेवा के लिए ट्रैफ़िक के साथ पहले से काम करने वाली वेबसाइट के ढांचे में विचार की जांच करना;
• एक स्टार्टअप सेवा के लिए एक वेबसाइट बनाने का अवसर नहीं है, और पहले से ही लोकप्रिय अवांछित साइटों के साथ संयुक्त मैशप पर पैसा कमाने के लिए;
• डिजाइनरों पर साइटों के लिए (ucoz.ru और पसंद) , एक साइट पर एक सेवा को जोड़ने की क्षमता - एक अनुभाग जो इंजन के हिस्से के रूप में लागू करना मुश्किल है;
• एक अधिभार साइट के लिए, लोड को कम करने की क्षमता, HTTP ट्रैफ़िक, पृष्ठ प्रदर्शन गति कैश करने की क्षमता के कारण, क्लाइंट पर विभिन्न सर्वरों द्वारा उत्पन्न सामग्री से पृष्ठ को संसाधित और इकट्ठा करना;
• facebook.com, vk.com, odnoklassniki.ru, my.mail.ru पर पहले से ही एक मंच के आयोजन के लिए एक सहायक उपकरण के रूप में एक बड़ी साइट या सामाजिक नेटवर्क के लिए, जो आपको बाहरी कंपनियों के लिए iframe एप्लिकेशन बनाने की अनुमति देता है;
• इंट्रा-कंपनी वेब अनुप्रयोगों के लिए विभिन्न सर्वरों से जानकारी एकत्र करना।

मुख्य विचार एक साइट के लिए एक अवसर प्रदान करना है जिसने ट्रैफ़िक को आकर्षित करने में सफलता हासिल की है, एक साइट के साथ पारस्परिक रूप से लाभप्रद रूप से सहयोग करने के लिए जो इसे (ट्रैफ़िक) मुद्रीकृत कर सकता है। Runet में अध्ययन (पृष्ठ 5) के अनुसार, केवल 9.9% साइटों को सेवा मॉडल का उपयोग करके मुद्रीकृत किया जाता है। मेरी राय में, साइटों के बीच सेवाओं के एक आसान पारस्परिक रूप से लाभकारी विनिमय की संभावना इस आंकड़े को बढ़ा सकती है, और अंततः नई स्टार्टअप सेवाओं के विकास को उत्तेजित कर सकती है।

संदेह

1. क्या ऐसा कुछ है जो मुझे पता नहीं है, या क्या मैं इसके बारे में गलत हूं जो पूरे विचार को बेकार बनाता है?
2. iframe सभी के लिए अच्छा और सरल है, और जहाँ इसका बहुत उपयोग किया जाता है, इसे जटिल क्यों किया जाता है?
3. एक सामाजिक अनुप्रयोग में, उदाहरण के लिए, नहीं बदलता है, इसलिए नहीं कि यह एक iframe के साथ अनुमति नहीं देता है, लेकिन सिर्फ इसलिए कि किसी को इसकी आवश्यकता नहीं है। इंटरनेट पर, मैंने लगभग बड़ी संख्या में असंतुष्ट नहीं पाया।
4. समस्या का सार (और क्या यह वहां भी है?) एक ऐसे व्यक्ति का वर्णन करने के लिए अवास्तविक है, जो आईफ्रेम के साथ काम नहीं करता है, या तकनीकी रूप से अप्रशिक्षित है।
5. सामाजिक अनुप्रयोग पहले से ही किए जा रहे हैं - "एक, दो, और आप कर रहे हैं ... वहाँ एक नियमित iframe है", क्या विकास के समय में बचत होगी?

इस लेख की मदद से मैं यह पता लगाना चाहता हूं कि परियोजना कितनी दिलचस्प है। सक्रिय विकास के लिए अतिरिक्त प्रेरणा प्राप्त करें, या इसके विपरीत, यह समझने के लिए कि किसी को इसकी आवश्यकता नहीं है। मुझे रचनात्मक आलोचना करने में खुशी होगी।