JSON और JSONP में क्या अंतर हैं?

Question

प्रारूप बुद्धिमान, फ़ाइल प्रकार बुद्धिमान और व्यावहारिक उपयोग बुद्धिमान?

Comments

देखें JSONP कृपया विस्तार से बताएं ।

— मैथ्यू फ्लैशेन

लिंक के लिए धन्यवाद, वहाँ कुछ बहुत अच्छी जानकारी है।

— मोहम्मद

क्या एक विधि दूसरे की तुलना में तेज है? उदाहरण के लिए, यदि आप अनुरोध करने के लिए XMLHttpRequest का उपयोग करते हैं (स्पष्ट रूप से 'सामान्य' ajax के बाद से) उसी डोमेन पर, या यदि आप JSONP विधि का उपयोग करते हैं (जो XMLHTTPRequest का उपयोग नहीं करेंगे) - तो क्या एक दूसरे से तेज होगा? मुझे पता है कि यह कई कारकों पर निर्भर करता है - लेकिन क्या किसी ने गति तुलना की?

— युवल ए।

en.wikipedia.org/wiki/JSONP

— सेन जैकब

Answer 1

JSONP पेडिंग के साथ JSON है। यही है, आप शुरुआत में एक स्ट्रिंग डालते हैं और इसके चारों ओर एक कोष्ठक बनाते हैं। उदाहरण के लिए:

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

इसका परिणाम यह है कि आप JSON को एक स्क्रिप्ट फ़ाइल के रूप में लोड कर सकते हैं। यदि आप पहले किसी फ़ंक्शन को सेट करते हैं func, तो उस फ़ंक्शन को एक तर्क के साथ बुलाया जाएगा, जो JSON डेटा है, जब स्क्रिप्ट फ़ाइल लोड हो रही है। यह आमतौर पर JSON डेटा के साथ क्रॉस-साइट AJAX के लिए अनुमति देने के लिए उपयोग किया जाता है। यदि आप जानते हैं कि example.com JSON फ़ाइलों की सेवा कर रहा है जो ऊपर दिए गए JSONP उदाहरण की तरह दिखते हैं, तो आप इसे पुनः प्राप्त करने के लिए इस तरह कोड का उपयोग कर सकते हैं, भले ही आप example.com डोमेन पर न हों:

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

Comments

क्या अभी भी JSONP के पास एक बिंदु है कि आप क्रॉस मूल अनुरोधों की अनुमति देने के लिए CORS कॉन्फ़िगर कर सकते हैं?

— y3sh

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

— डोगन

Answer 2

मूल रूप से, आपको समान-मूल नीति के कारण AJAX के माध्यम से किसी अन्य डोमेन से JSON डेटा का अनुरोध करने की अनुमति नहीं है। AJAX आपको एक पृष्ठ पहले ही लोड होने के बाद डेटा प्राप्त करने की अनुमति देता है, और एक बार लौटने पर कुछ कोड निष्पादित / फ़ंक्शन को कॉल करता है। हम AJAX का उपयोग नहीं कर सकते हैं लेकिन हमें <script>अपने स्वयं के पेज में टैग इंजेक्ट करने की अनुमति है और उन्हें अन्य डोमेन पर होस्ट की गई स्क्रिप्ट्स को संदर्भित करने की अनुमति है।

आमतौर पर आप इसका उपयोग सीडीएन जैसे पुस्तकालयों जैसे jQuery से करने के लिए करेंगे । हालाँकि, हम इसका दुरुपयोग कर सकते हैं और इसका उपयोग इसके बजाय डेटा लाने के लिए कर सकते हैं! JSON पहले से ही मान्य जावास्क्रिप्ट ( अधिकांश भाग के लिए ) है, लेकिन हम सिर्फ JSON को अपनी स्क्रिप्ट फ़ाइल में वापस नहीं कर सकते, क्योंकि हमारे पास यह जानने का कोई तरीका नहीं है कि स्क्रिप्ट / डेटा लोड हो रहा है या नहीं और जब तक यह नहीं है, तब तक हमारे पास इसे एक्सेस करने का कोई तरीका नहीं है। एक चर को सौंपा या एक समारोह में पारित कर दिया। तो हम इसके बजाय क्या करते हैं, जब यह तैयार होता है, तो हमारी ओर से किसी फ़ंक्शन को कॉल करने के लिए वेब सेवा को बताएं।

उदाहरण के लिए, हम स्टॉक एक्सचेंज एपीआई से कुछ डेटा का अनुरोध कर सकते हैं, और हमारे सामान्य एपीआई मापदंडों के साथ, हम इसे कॉलबैक देते हैं, जैसे ?callback=callThisWhenReady। वेब सेवा तब हमारे फ़ंक्शन के साथ डेटा को लपेटती है और इसे इस तरह लौटाती है callThisWhenReady({...data...}):। अब जैसे ही स्क्रिप्ट लोड होती है, आपका ब्राउज़र इसे (सामान्य रूप में) निष्पादित करने की कोशिश करेगा, जो कि हमारे मनमाने कार्य को कॉल करता है और हमें वह डेटा खिलाता है जो हम चाहते थे।

यह एक सामान्य AJAX अनुरोध की तरह काम करता है सिवाय एक अनाम फ़ंक्शन को कॉल करने के, हमें नामित कार्यों का उपयोग करना होगा।

jQuery वास्तव में आपके लिए एक विशिष्ट रूप से नामांकित फ़ंक्शन बनाकर और उस बंद को पारित करके आपके लिए इस मूल समर्थन का समर्थन करता है, जो तब आपके द्वारा वांछित कोड को चलाएगा।

Comments

अलग क्या? JSON एक भाषा या तो नहीं है

— nickf

@nickf: हाँ ... मैं सही शब्द की तलाश में था ... फिर आप इसे क्या कहेंगे? "डेटा-इंटरचेंज प्रारूप" json.org के अनुसार।

— एमपीएन

या अधिक पठनीय: JSON: "टेक्स्ट नोटेशन" में एक जावास्क्रिप्ट ऑब्जेक्ट। जैसे कि आप शायद एक जावा ऑब्जेक्ट को स्ट्रिंग () करेंगे?

— सैम व्लॉबरघ्स

FWIW: @SamVloeberghs - यह कहना थोड़ा भ्रामक है कि JSON एक जावास्क्रिप्ट ऑब्जेक्ट का प्रतिनिधित्व करता है। यह किसी भी भाषा या डेटाबेस से कोई भी डेटा हो सकता है, जो कि नाम-मूल्य जोड़े और सरणियों के रूप में प्रतिनिधित्व करने योग्य है। और किसी भी JS ऑब्जेक्ट को राउंड-ट्रिप करने के लिए अतिरिक्त कन्वेंशन की आवश्यकता होती है - JSON देखें : असमर्थित देशी डेटा प्रकार । विशेष रूप से, जेएस दिनांक एक स्ट्रिंग के रूप में दूर के अंत में वापस आती है। weblog.west-wind.com/posts/2014/jan/06/...

— ToolmakerSteve

Answer 3

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

Answer 4

JSONP का अर्थ है "JSON with Padding" और यह विभिन्न डोमेन से डेटा लोड करने के लिए एक समाधान है। यह स्क्रिप्ट को DOM के प्रमुख में लोड करता है और इस तरह आप जानकारी तक पहुँच सकते हैं जैसे कि यह आपके स्वयं के डोमेन पर लोड की गई थी, इस प्रकार क्रॉस डोमेन समस्या को पार करके।

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets."
        },
        {
            "siteName": "BLOGOOLA",
            "domainName": "http://www.blogoola.com",
            "description": "Expose your blog to millions and increase your audience."
        },
        {
            "siteName": "PHPSCRIPTS4U",
            "domainName": "http://www.phpscripts4u.com",
            "description": "The Blog of Enthusiastic PHP Scripters"
        }
    ]
});

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

अब हम JSON को JSONP और कॉलबैक फ़ंक्शन का उपयोग करके AJAX के माध्यम से JSON अनुरोध कर सकते हैं। आउटपुट JSON एक ऑब्जेक्ट के रूप में होना चाहिए जिसे हम तब बिना किसी प्रतिबंध के जो कुछ भी चाहते हैं उसके लिए डेटा का उपयोग कर सकते हैं।

Answer 5

JSONP अनिवार्य रूप से, JSON अतिरिक्त कोड के साथ होता है, जैसे कि एक फ़ंक्शन कॉल डेटा के चारों ओर लिपटा होता है। यह डेटा को पार्स करने के दौरान कार्य करने की अनुमति देता है।

Answer 6

JSON

JSON (जावास्क्रिप्ट ऑब्जेक्ट नोटेशन) अनुप्रयोगों के बीच डेटा परिवहन के लिए एक सुविधाजनक तरीका है, खासकर जब गंतव्य एक जावास्क्रिप्ट अनुप्रयोग है।

उदाहरण:

यहां एक न्यूनतम उदाहरण है जो JSON का उपयोग सर्वर प्रतिक्रिया के लिए परिवहन के रूप में करता है। क्लाइंट jQuery के शॉर्टहैंड फ़ंक्शन $ .getJSON के साथ एक अजाक्स अनुरोध करता है। सर्वर एक हैश उत्पन्न करता है, इसे JSON के रूप में प्रारूपित करता है और इसे क्लाइंट को देता है। क्लाइंट इसे प्रारूपित करता है और इसे पृष्ठ तत्व में डालता है।

सर्वर:

get '/json' do
 content_type :json
 content = { :response  => 'Sent via JSON',
            :timestamp => Time.now,
            :random    => rand(10000) }
 content.to_json
end

ग्राहक:

var url = host_prefix + '/json';
$.getJSON(url, function(json){
  $("#json-response").html(JSON.stringify(json, null, 2));
});

आउटपुट:

  {
   "response": "Sent via JSON",
   "timestamp": "2014-06-18 09:49:01 +0000",
   "random": 6074
  }

JSONP (पैडिंग के साथ JSON)

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

JSONP के साथ ग्राहक पक्ष में एकमात्र परिवर्तन URL में कॉलबैक पैरामीटर जोड़ना है

सर्वर:

get '/jsonp' do
 callback = params['callback']
 content_type :js
 content = { :response  => 'Sent via JSONP',
            :timestamp => Time.now,
            :random    => rand(10000) }
 "#{callback}(#{content.to_json})"
end

ग्राहक:

var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
  $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});

आउटपुट:

 {
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}

लिंक: http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

Answer 7

"JSONP अतिरिक्त कोड के साथ JSON है" वास्तविक दुनिया के लिए बहुत आसान होगा। नहीं, आपको बहुत कम विसंगतियां हैं। प्रोग्रामिंग में क्या मज़ा है अगर सब कुछ बस काम करता है ?

JSON को जावास्क्रिप्ट का सबसेट नहीं कहा जाता है । यदि आप सभी करते हैं तो JSON ऑब्जेक्ट लेते हैं और इसे फ़ंक्शन कॉल में लपेटते हैं, एक दिन आपको अजीब वाक्यविन्यास त्रुटियों से काट लिया जाएगा, जैसे कि मैं आज था।

Answer 8

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

लेकिन दृष्टिकोण के व्यावहारिक कार्यान्वयन में सूक्ष्म अंतर शामिल हैं जिन्हें अक्सर स्पष्ट रूप से समझाया नहीं जाता है।

यहाँ एक सरल ट्यूटोरियल है जो JSON और JSONP को एक साथ दिखाता है।

Github में सभी कोड स्वतंत्र रूप से उपलब्ध है और एक लाइव संस्करण http://json-jsonp-tutorial.cra.com पर पाया जा सकता है।