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




terminology (7)

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

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

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

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

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

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

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

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

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


Answers

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

function_prefix(json_object);

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

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

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

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

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


यह वास्तव में बहुत जटिल नहीं है ...

मान लें कि आप डोमेन example.com पर हैं, और आप डोमेन example.net से अनुरोध करना चाहते हैं। ऐसा करने के लिए, आपको डोमेन सीमाओं को पार करने की आवश्यकता है, अधिकांश ब्राउज़रलैंड में नो-नो।

एक आइटम जो इस सीमा को छोड़ देता है <script> टैग है। जब आप एक स्क्रिप्ट टैग का उपयोग करते हैं, तो डोमेन सीमा को अनदेखा किया जाता है, लेकिन सामान्य परिस्थितियों में, आप वास्तव में परिणामों के साथ कुछ भी नहीं कर सकते हैं, स्क्रिप्ट का मूल्यांकन किया जाता है।

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

उदाहरण के लिए, सर्वर को इसकी जेएसओएनपी क्षमताओं को सक्षम करने के लिए "कॉलबैक" नामक पैरामीटर की अपेक्षा है। फिर आपका अनुरोध इस तरह दिखेगा:

http://www.example.net/sample.aspx?callback=mycallback

JSONP के बिना, यह कुछ बुनियादी जावास्क्रिप्ट ऑब्जेक्ट वापस कर सकता है, जैसे:

{ foo: 'bar' }

हालांकि, JSONP के साथ, जब सर्वर को "कॉलबैक" पैरामीटर प्राप्त होता है, तो यह परिणाम को थोड़ा अलग तरीके से लपेटता है, इस तरह कुछ लौटाता है:

mycallback({ foo: 'bar' });

जैसा कि आप देख सकते हैं, अब यह आपके द्वारा निर्दिष्ट विधि का आह्वान करेगा। तो, अपने पृष्ठ में, आप कॉलबैक फ़ंक्शन को परिभाषित करते हैं:

mycallback = function(data){
  alert(data.foo);
};

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

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

इन दिनों (2015), सीओआरएस अनुशंसित दृष्टिकोण बनाम JSONRequest है। JSONP अभी भी पुराने ब्राउज़र समर्थन के लिए उपयोगी है, लेकिन सुरक्षा प्रभाव दिए जाने तक, जब तक आपके पास कोई विकल्प नहीं है तो सीओआरएस बेहतर विकल्प है।


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);
}

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


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 एक "स्क्रिप्ट" तत्व (या तो 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 को समझने से पहले, आपको JSON प्रारूप और XML को जानना होगा। वर्तमान में वेब पर सबसे अधिक उपयोग किया जाने वाला डेटा प्रारूप एक्सएमएल है, लेकिन एक्सएमएल बहुत जटिल है। यह उपयोगकर्ताओं को वेब पृष्ठों में एम्बेडेड प्रक्रिया करने के लिए असुविधाजनक बनाता है।

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

JSON को सीधे जावास्क्रिप्ट में एम्बेड किया जा सकता है, उनका उपयोग करके आप सीधे कुछ JSON प्रोग्राम निष्पादित कर सकते हैं, लेकिन सुरक्षा बाधाओं के कारण, ब्राउज़र सैंडबॉक्स तंत्र क्रॉस-डोमेन JSON कोड निष्पादन को अक्षम करता है।

निष्पादन के बाद JSON को पारित करने के लिए, हमने एक JSONP विकसित किया। JSONP जावास्क्रिप्ट कॉलबैक कार्यक्षमता और <script> टैग के साथ ब्राउज़र की सुरक्षा सीमाओं को बाईपास करता है।

तो संक्षेप में यह बताता है कि जेएसओएनपी क्या है, यह किस समस्या को हल करता है (इसका उपयोग कब करें)।


बुलियन के लिए obbject oObject । अगर यह झूठा था (उदाहरण के लिए 0, null , undefined , आदि), यह false होगा, अन्यथा, true

!oObject  //Inverted boolean
!!oObject //Non inverted boolean so true boolean representation

तो !! एक ऑपरेटर नहीं है, यह सिर्फ है ! ऑपरेटर दो बार।

रियल वर्ल्ड उदाहरण "टेस्ट आईई संस्करण":

let isIE8 = false;  
isIE8 = !! navigator.userAgent.match(/MSIE 8.0/);  
console.log(isIE8); // returns true or false 

यदि आप ⇒

console.log(navigator.userAgent.match(/MSIE 8.0/));  
// returns null  

लेकिन अगर आप ⇒

console.log(!!navigator.userAgent.match(/MSIE 8.0/));  
// returns true or false




javascript json jsonp terminology