JSONP क्या है?
Jsonp के साथ याद रखने वाली महत्वपूर्ण बात यह है कि यह वास्तव में एक प्रोटोकॉल या डेटा प्रकार नहीं है। यह मक्खी पर एक स्क्रिप्ट को लोड करने और उस स्क्रिप्ट को संसाधित करने का एक तरीका है जो पृष्ठ पर पेश किया जाता है। JSONP की भावना में, इसका अर्थ है सर्वर से क्लाइंट एप्लिकेशन / स्क्रिप्ट में एक नई जावास्क्रिप्ट ऑब्जेक्ट को पेश करना।
JSONP की आवश्यकता कब है?
यह एक तरीके से एक ही पृष्ठ पर एक डोमेन से डेटा को एक्सेस / प्रोसेस करने की अनुमति देने की 1 विधि है। मुख्य रूप से, इसका उपयोग CORS (क्रॉस ओरिजिन रिसोर्स शेयरिंग) प्रतिबंधों को ओवरराइड करने के लिए किया जाता है, जो XHR (ajax) अनुरोध के साथ होता है। स्क्रिप्ट लोड कॉर्स प्रतिबंध के अधीन नहीं हैं।
यह कैसे किया जाता है
सर्वर से एक नई जावास्क्रिप्ट ऑब्जेक्ट को प्रस्तुत करना कई तरीकों से लागू किया जा सकता है, लेकिन सर्वर के लिए सबसे आम अभ्यास एक कॉलबैक फ़ंक्शन के निष्पादन को लागू करने के लिए है, जिसमें आवश्यक वस्तु उसमें पारित हो जाती है। कॉलबैक फ़ंक्शन केवल एक फ़ंक्शन है जिसे आपने पहले ही क्लाइंट पर सेट कर दिया है, जिसे आप जिस स्क्रिप्ट पर लोड करते हैं, वह उस डेटा को संसाधित करने के लिए स्क्रिप्ट लोड बिंदु पर लोड करता है।
उदाहरण:
मेरे पास एक एप्लिकेशन है जो किसी के घर में सभी वस्तुओं को लॉग करता है। मेरा एप्लिकेशन सेट हो गया है और मैं अब मुख्य बेडरूम में सभी वस्तुओं को पुनः प्राप्त करना चाहता हूं।
मेरा आवेदन चालू है app.home.com
। जिन एपिसिस से मुझे डेटा लोड करने की आवश्यकता है, वे चालू हैं api.home.com
।
जब तक कि सर्वर को स्पष्ट रूप से इसे अनुमति देने के लिए सेट नहीं किया गया है, मैं इस डेटा को लोड करने के लिए ajax का उपयोग नहीं कर सकता, क्योंकि अलग-अलग उप-डोमेन पर भी पृष्ठ XHR कॉर्स प्रतिबंध के अधीन हैं।
आदर्श रूप से, एक्स-डोमेन एक्सएचआर की अनुमति देने के लिए चीजों को सेट करें
आदर्श रूप से, चूंकि एपीआई और ऐप एक ही डोमेन पर हैं, इसलिए मेरे पास हेडर सेट करने के लिए एक्सेस हो सकता है api.home.com
। यदि मैं करता हूं, तो मैं एक Access-Control-Allow-Origin:
हेडर आइटम को एक्सेस करने के लिए अनुदान दे सकता हूं app.home.com
। हेडर मानकर सेट किया गया है: Access-Control-Allow-Origin: "http://app.home.com"
यह JSONP सेट करने की तुलना में कहीं अधिक सुरक्षित है। ऐसा इसलिए है क्योंकि पूरे इंटरनेट पर कॉर्स को एक्सेस दिए बिना app.home.com
वह सब कुछ प्राप्त कर सकता है जो वह चाहता है ।api.home.com
api.home.com
उपरोक्त XHR समाधान संभव नहीं है। अपने क्लाइंट स्क्रिप्ट पर JSONP सेट करें: जब मैं JSONP कॉल करता हूं, तो सर्वर से रिपीशन को प्रोसेस करने के लिए एक फ़ंक्शन सेट करता हूं । :
function processJSONPResponse(data) {
var dataFromServer = data;
}
सर्वर को एक मिनी स्क्रिप्ट को लौटाने के लिए सेट करने की आवश्यकता होगी, जैसे कि "processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
यह कुछ //api.home.com?getdata=room&room=main_bedroom
ऐसा कहे जाने पर स्ट्रिंग को वापस करने के लिए डिज़ाइन किया जा सकता है ।
तब ग्राहक एक स्क्रिप्ट टैग को इस तरह सेट करता है:
var script = document.createElement('script');
script.src = '//api.home.com?getdata=room&room=main_bedroom';
document.querySelector('head').appendChild(script);
यह स्क्रिप्ट को लोड करता है और तुरंत window.processJSONPResponse()
सर्वर द्वारा लिखित / इको / प्रिंट आउट के रूप में कॉल करता है। फ़ंक्शन के पैरामीटर के रूप में पारित डेटा अब dataFromServer
स्थानीय चर में संग्रहीत किया जाता है और आप इसे अपनी आवश्यकता के अनुसार कर सकते हैं।
साफ - सफाई
एक बार क्लाइंट के पास डेटा यानी। DOM में स्क्रिप्ट जोड़ने के तुरंत बाद, स्क्रिप्ट एलिमेंट को DOM से हटाया जा सकता है:
script.parentNode.removeChild(script);