javascript JSONP के बारे में सब क्या है?




terminology (5)

इस प्रश्न का उत्तर यहां दिया गया है:

मैं JSON समझता हूं, लेकिन JSONP नहीं। JSON पर विकिपीडिया का दस्तावेज़ JSONP के लिए शीर्ष खोज परिणाम था (था)। यह कहता है:

जेएसओएनपी या "पैडिंग के साथ JSON" एक JSON एक्सटेंशन है जिसमें एक उपसर्ग को कॉल के इनपुट तर्क के रूप में निर्दिष्ट किया जाता है।

है ना? क्या कॉल इससे मुझे कोई समझ नहीं आती है। JSON एक डेटा प्रारूप है। कोई कॉल नहीं है

दूसरा खोज परिणाम Remy नाम के कुछ लड़के से है, जो जेएसओएनपी के बारे में लिखता है:

JSONP स्क्रिप्ट टैग इंजेक्शन है, सर्वर से प्रतिक्रिया को उपयोगकर्ता निर्दिष्ट फ़ंक्शन में पास कर रहा है।

मैं समझ सकता हूं कि, लेकिन यह अभी भी कोई समझ नहीं ले रहा है।

तो JSONP क्या है? यह क्यों बनाया गया था (यह किस समस्या को हल करता है)? और मैं इसका इस्तेमाल क्यों करूं?

अनुपूरक : मैंने अभी विकिपीडिया पर JSONP के लिए एक नया पृष्ठ बनाया है ; jvenema के जवाब के आधार पर अब jvenema का स्पष्ट और गहन वर्णन है।

https://code.i-harness.com


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

आगे पढ़ने के लिए यहां जाएं: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

कोड के क्लाइंट साइड स्निपेट

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

PHP कोड का सर्वर साइड टुकड़ा

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>

JSONP के उपयोग के लिए एक सरल उदाहरण।

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>    

JSONP क्रॉस-डोमेन स्क्रिप्टिंग त्रुटियों के आसपास जाने के लिए एक बहुत दूर है। आप जेएस के साथ पूरी तरह से जेएसओएनपी सेवा का उपभोग कर सकते हैं बिना सर्वर पक्ष पर AJAX प्रॉक्सी को कार्यान्वित किए।

यह b1t.co सेवा का उपयोग यह देखने के लिए कर सकता है कि यह कैसे काम करता है। यह एक नि: शुल्क JSONP सेवा है जो आपको अपने यूआरएल को कम करने के लिए अनुमति देती है। सेवा के लिए उपयोग करने के लिए यूआरएल यहां दिया गया है:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

उदाहरण के लिए कॉल, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

लौटूंगा

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

और इस प्रकार जब यह आपके जेएस में एक स्रोत के रूप में लोड हो जाता है, तो यह स्वचालित रूप से जो भी जावास्क्रिप्ट नाम चलाता है जिसे आपको अपने कॉलबैक फ़ंक्शन के रूप में कार्यान्वित करना चाहिए:

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

वास्तव में जेएसओएनपी कॉल करने के लिए, आप इसे कई तरीकों से कर सकते हैं (jQuery का उपयोग करके) लेकिन यहां एक शुद्ध जेएस उदाहरण है:

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

चरण-दर-चरण उदाहरण और अभ्यास करने के लिए एक जेसनपी वेब सेवा यहां उपलब्ध है: यह पोस्ट


क्योंकि आप सर्वर से लौटे JSON ऑब्जेक्ट को उपसर्ग जोड़ने के लिए कह सकते हैं। उदाहरण के लिए

function_prefix(json_object);

ब्राउज़र को अभिव्यक्ति के रूप में JSON स्ट्रिंग को "इनलाइन" करने के लिए। यह चाल सर्वर के लिए क्लाइंट ब्राउज़र में सीधे जावास्क्रिप्ट कोड "इंजेक्ट" करने के लिए संभव बनाता है और यह "समान मूल" प्रतिबंधों को छोड़कर।

दूसरे शब्दों में, आपके पास क्रॉस-डोमेन डेटा एक्सचेंज हो सकता है

आम तौर पर, XMLHttpRequest सीधे क्रॉस-डोमेन डेटा-एक्सचेंज की अनुमति नहीं देता है (किसी को एक ही डोमेन में सर्वर से जाने की आवश्यकता होती है) जबकि:

<script src="some_other_domain/some_data.js&prefix=function_prefix > 'कोई मूल से भिन्न डोमेन से डेटा तक पहुंच सकता है।

ध्यान देने योग्य भी: भले ही सर्वर को "चाल" के प्रयास से पहले "भरोसेमंद" माना जाना चाहिए, ऑब्जेक्ट प्रारूप आदि में संभावित परिवर्तन के साइड इफेक्ट्स को निहित किया जा सकता है। यदि JSON ऑब्जेक्ट प्राप्त करने के लिए कोई function_prefix (यानी उचित जेएस फ़ंक्शन) का उपयोग किया जाता है, तो कहा गया फ़ंक्शन लौटाए गए डेटा को स्वीकार / आगे संसाधित करने से पहले चेक कर सकता है।


JSONP वास्तव में XMLHttpRequest समान डोमेन नीति को पार करने के लिए एक साधारण चाल है। (जैसा कि आप जानते हैं कि कोई एक अलग डोमेन पर AJAX (XMLHttpRequest) अनुरोध नहीं भेज सकता है।)

तो - XMLHttpRequest का उपयोग करने के बजाय हमें किसी अन्य डोमेन से डेटा प्राप्त करने के लिए, जेएस फ़ाइलों को लोड करने के लिए आमतौर पर स्क्रिप्ट HTML टैग का उपयोग करना होता है। अजीब लगता है?

चीज है - एक्सपीएचएचटीपीआरक्वेट की तरह एक फैशन में स्क्रिप्ट टैग का उपयोग किया जा सकता है! इसकी जांच करें:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';

आप एक स्क्रिप्ट सेगमेंट के साथ समाप्त हो जाएंगे जो डेटा लोड करने के बाद ऐसा लगता है:

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

हालांकि यह थोड़ा असुविधाजनक है, क्योंकि हमें इस सरणी को स्क्रिप्ट टैग से प्राप्त करना है। तो जेएसओएनपी रचनाकारों ने फैसला किया कि यह बेहतर काम करेगा (और यह है):

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data?callback=my_callback';

वहाँ my_callback समारोह पर ध्यान दें? तो - जब JSONP सर्वर आपका अनुरोध प्राप्त करता है और कॉलबैक पैरामीटर पाता है - सादा जेएस सरणी लौटने की बजाय यह इसे वापस कर देगा:

my_callback({['some string 1', 'some data', 'whatever data']});

देखें कि लाभ कहां है: अब हमें स्वचालित कॉलबैक (my_callback) मिलता है जो डेटा प्राप्त करने के बाद ट्रिगर हो जाएगा।
जेएसओएनपी के बारे में सब कुछ पता है: यह एक कॉलबैक और स्क्रिप्ट टैग है।

नोट: ये JSONP उपयोग के सरल उदाहरण हैं, ये उत्पादन तैयार स्क्रिप्ट नहीं हैं।

मूल जावास्क्रिप्ट उदाहरण (जेएसओएनपी का उपयोग कर सरल ट्विटर फ़ीड)

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

मूल jQuery उदाहरण (जेएसओएनपी का उपयोग कर सरल ट्विटर फ़ीड)

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>


JSONP पैडिंग के साथ JSON के लिए खड़ा है। (बहुत खराब नामित तकनीक के रूप में वास्तव में इसके साथ कुछ भी नहीं करना है जो अधिकांश लोग "पैडिंग" के रूप में सोचेंगे।)







terminology