JSON এবং JSONP এর মধ্যে পার্থক্যগুলি কী কী?


393

ফরম্যাট ওয়াইজ, ফাইল টাইপ ওয়াইজ এবং ব্যবহারিক ব্যবহারের ভিত্তিতে?



1
লিঙ্কটির জন্য ধন্যবাদ, সেখানে কিছু সত্যিই ভাল তথ্য আছে।
মোহাম্মদ

4
একটি পদ্ধতি কি অন্যের চেয়ে দ্রুত? উদাহরণস্বরূপ, আপনি যদি অনুরোধ পেতে XMLHttpRequest ব্যবহার করেন (একই ডোমেনে স্পষ্টতই এটি 'স্বাভাবিক' এজ্যাক্সের পরে), বা আপনি JSONP পদ্ধতিটি ব্যবহার করেন (যা এক্সএমএলএইচটিপিআরকিউস্ট ব্যবহার করবে না) - অন্যটির চেয়ে কী দ্রুত হবে? আমি জানি এটি বিভিন্ন কারণের উপর নির্ভর করে - তবে কেউ কি গতির তুলনা করে?
যুবাল এ।

উত্তর:


405

প্যাডিং সহ জেএসএনপি হ'ল জেএসওএন। এটি, আপনি শুরুতে একটি স্ট্রিং রেখেছিলেন এবং এর চারপাশে একটি জোড়া বন্ধনী রেখেছিলেন। উদাহরণ স্বরূপ:

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

ফলাফলটি হ'ল আপনি JSON কে স্ক্রিপ্ট ফাইল হিসাবে লোড করতে পারেন। আপনি যদি আগে কোনও ফাংশন সেট আপ করেন func, তবে স্ক্রিপ্ট ফাইলটি লোড করা হয়ে গেলে সেই ফাংশনটিকে একটি যুক্তি দিয়ে ডাকা হবে, যা JSON ডেটা data এটি সাধারণত JSON ডেটা সহ ক্রস-সাইট এজ্যাক্সের অনুমতি দেওয়ার জন্য ব্যবহৃত হয়। আপনি যদি জানেন যে উদাহরণ.কম জেএসওএন ফাইলগুলি পরিবেশন করছে যা উপরের জেএসওএনপি উদাহরণের মতো দেখায়, তবে আপনি উদাহরণ ডটকম ডোমেইনে না থাকলেও আপনি এটির পুনরুদ্ধার করতে এই জাতীয় কোড ব্যবহার করতে পারেন:

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

3
JSONP- এ এখনও কি এমন ধারণা রয়েছে যে আপনি ক্রস উত্সের অনুরোধগুলি মঞ্জুরি দেওয়ার জন্য CORS কনফিগার করতে পারবেন?
y3sh

কিছুটা দেরি হলেও তবুও আমি আপনার প্রশ্নের অন্যদের কাছে উত্তর দিতে চাই, না, আপনি যদি জেএসএনপি ব্যবহার করেন তবে আপনি সমস্ত সিওআরএস সুবিধাগুলি খারিজ করেছেন (আমি সুরক্ষার সমস্যাটিকে বেনিফিট বলেছি)) আমি আপনাকে সিআরএস যথাযথভাবে প্রয়োগ করার পরামর্শ দিচ্ছি, এটি সুরক্ষা সমস্যা এবং আর্কিটেকচার সম্পর্কে আরও ভাল পদ্ধতির বিষয়ে আপনাকে সহায়তা করবে।
ডোগান

101

মূলত, সম-উত্স নীতিমালার কারণে আপনাকে এজেএক্সের মাধ্যমে অন্য ডোমেন থেকে জেএসএন ডেটা অনুরোধ করার অনুমতি নেই। কোনও পৃষ্ঠা ইতিমধ্যে লোড হয়ে যাওয়ার পরে এজ্যাক্স আপনাকে ডেটা আনার অনুমতি দেয় এবং তারপরে কিছু কোড / ফাংশন কল করার পরে এটি কার্যকর করে। আমরা এজেএক্স ব্যবহার করতে পারি না তবে <script>আমাদের নিজস্ব পৃষ্ঠায় ট্যাগ ইনজেক্ট করার অনুমতি দেওয়া হয় এবং সেগুলি অন্য ডোমেনগুলিতে হোস্ট করা স্ক্রিপ্টগুলি উল্লেখ করার অনুমতি দেওয়া হয়।

সাধারণত আপনি সিডিএন যেমন jQuery এর লাইব্রেরি অন্তর্ভুক্ত করতে এটি ব্যবহার করবেন । তবে, আমরা এটি অপব্যবহার করতে পারি এবং এর পরিবর্তে ডেটা আনতে এটি ব্যবহার করতে পারি! জেএসএন ইতিমধ্যে বৈধ জাভাস্ক্রিপ্ট ( বেশিরভাগ অংশের জন্য ), তবে আমরা কেবল আমাদের স্ক্রিপ্ট ফাইলটিতে জেএসএনকে ফিরিয়ে দিতে পারি না, কারণ স্ক্রিপ্ট / ডেটা লোড শেষ হয়ে গেলে আমাদের জানার কোনও উপায় নেই এবং এটি না থাকলে আমাদের এটি অ্যাক্সেস করার কোনও উপায় নেই unless কোনও ভেরিয়েবলকে বরাদ্দ করা বা কোনও ফাংশনে পাস করা। সুতরাং পরিবর্তে আমরা যা করি তা হ'ল ওয়েব সার্ভিসকে বলা হয় এটি প্রস্তুত হয়ে গেলে আমাদের পক্ষ থেকে কোনও ফাংশন কল করতে।

উদাহরণস্বরূপ, আমরা স্টক এক্সচেঞ্জ এপিআই থেকে কিছু ডেটা অনুরোধ করতে পারি এবং আমাদের সাধারণ এপিআই প্যারামিটারের পাশাপাশি আমরা এটিকে একটি কলব্যাক দিই, যেমন ?callback=callThisWhenReady। ওয়েব পরিষেবা তাহলে আমাদের ফাংশন তথ্য গোপন করে এবং এর মতো এটিকে ফেরৎ: callThisWhenReady({...data...})। স্ক্রিপ্টটি লোড হওয়ার সাথে সাথেই আপনার ব্রাউজারটি এটি (সাধারণ হিসাবে) চালানোর চেষ্টা করবে, যার ফলে আমাদের স্বেচ্ছাচারিত ক্রিয়াকলাপ কল হয় এবং আমাদের যে ডেটাটি চেয়েছিল তা আমাদের ফিড করে।

এটি অনেকটা সাধারণ এজেএক্স অনুরোধের মতো কাজ করে বেনামে ফাংশন কল করার পরিবর্তে, আমাদের নামযুক্ত ফাংশন ব্যবহার করতে হবে।

jQuery আসলে আপনার জন্য একটি অনন্য নামযুক্ত ফাংশন তৈরি করে এবং এটিটি বন্ধ করে দিয়ে এটি নির্বিঘ্নে আপনার সমর্থন করে যা এর পরে আপনার পছন্দসই কোডটি চালায়।


2
কি থেকে আলাদা? JSON কোনও ভাষা নয়
নিক

6
@ নিকফ: হ্যাঁ ... আমি সঠিক শব্দটির সন্ধান করছিলাম ... তখন আপনি এটিকে কী বলবেন? json.org অনুযায়ী "ডেটা-ইন্টারচেঞ্জ ফর্ম্যাট"।
এমপেন

বা আরও পঠনযোগ্য: জেএসএন: "পাঠ্য স্বরলিপি" তে একটি জাভাস্ক্রিপ্ট অবজেক্ট। আপনি কি জাভা অবজেক্ট টস্ট্রিং করতে চান?
স্যাম ভ্লোবার্গস

এফডব্লিউআইডাব্লু: @ সামভ্লোবার্গস - এটি JSON একটি জাভাস্ক্রিপ্ট অবজেক্টের প্রতিনিধিত্ব করে বলে কিছুটা বিভ্রান্তিকর। এটি কোনও ভাষা বা ডাটাবেস থেকে যে কোনও ডেটা হতে পারে যা নাম-মান জোড় এবং অ্যারে হিসাবে উপস্থাপনযোগ্য। এবং কোনও জেএস অবজেক্টকে নির্ভুলভাবে রাউন্ড ট্রিপ করতে অতিরিক্ত কনভেনশনগুলি প্রয়োজন - জেএসএন: অসমর্থিত নেটিভ ডেটা প্রকারগুলি দেখুন । উল্লেখযোগ্যভাবে, জেএস তারিখটি স্ট্রিং হিসাবে অনেক দূরে ফিরে আসে। weblog.west-wind.com/posts/2014/jan/06/...
ToolmakerSteve

66

জেএসএনপি আপনাকে একটি কলব্যাক ফাংশন নির্দিষ্ট করার অনুমতি দেয় যা আপনার জেএসওএন অবজেক্টটি পাস করেছে। এটি আপনাকে একই উত্স নীতিটি বাইপাস করতে এবং আপনার ওয়েবপৃষ্ঠায় জাভাস্ক্রিপ্টে একটি বাহ্যিক সার্ভার থেকে JSON লোড করতে দেয়।


30

জেএসওএনপি "প্যাডিং সহ জেএসওএন" বোঝায় এবং এটি বিভিন্ন ডোমেন থেকে ডেটা লোড করার জন্য কাজ করে। এটি স্ক্রিপ্টটি ডিওএমের শিরোনামে লোড করে এবং এভাবে আপনি তথ্যটি নিজের ডোমেনে লোড করা অবস্থায় অ্যাক্সেস করতে পারেন, এভাবে ক্রস ডোমেন ইস্যুটি পাস করে।

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips &amp; 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);

এখন আমরা JSONP এবং আমরা JSON সামগ্রীটির চারপাশে তৈরি করা কলব্যাক ফাংশনটি ব্যবহার করে AJAX এর মাধ্যমে জেএসএনকে অনুরোধ করতে পারি। আউটপুটটি কোনও অবজেক্ট হিসাবে জেএসএন হওয়া উচিত যা আমরা তারপরে কোনও সীমাবদ্ধতা ছাড়াই আমরা যা চাই তার জন্য ডেটা ব্যবহার করতে পারি।


18

জেএসওএনপি মূলত, অতিরিক্ত কোড সহ জেএসওএন, যেমন ডেটা ঘিরে ফাংশন কল। এটি বিশ্লেষণের সময় ডেটাতে কাজ করার অনুমতি দেয়।


13

তাদেরকে JSON

JSON (জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন) অ্যাপ্লিকেশনগুলির মধ্যে ডেটা পরিবহনের একটি সুবিধাজনক উপায়, বিশেষত যখন গন্তব্যটি জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন।

উদাহরণ:

এখানে একটি সর্বনিম্ন উদাহরণ যা সার্ভারের প্রতিক্রিয়ার জন্য পরিবহন হিসাবে JSON ব্যবহার করে। ক্লায়েন্টটি jQuery শর্টহ্যান্ড ফাংশন get .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 এর সাথে ক্লায়েন্টের পক্ষে একমাত্র পরিবর্তন হ'ল 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/ কি-are-differences-between-json-and- jsonp.html


6

বাস্তব জগতের পক্ষে "জেএসওএনপি অতিরিক্ত কোড সহ জেএসএন হ'ল"। না, আপনার কিছুটা তাত্পর্য আছে। প্রোগ্রামিংয়ে মজা কী সব কিছু যদি কেবল কাজ করে ?

দেখা যাচ্ছে JSON জাভাস্ক্রিপ্টের একটি উপসেট নয় । যদি আপনি যা করেন তা যদি কোনও JSON অবজেক্ট গ্রহণ করে এটি একটি ফাংশন কলে মুড়ে ফেলা হয় তবে একদিন আপনাকে আজকের মতো অদ্ভুত সিনট্যাক্স ত্রুটি দ্বারা কামড়াতে হবে।


0

ক্লায়েন্টের কাছ থেকে বিভিন্ন ডোমেন থেকে জেএসএন প্রতিক্রিয়া প্রেরণ করার সময় ব্রাউজারের বিধিনিষেধ কাটিয়ে ওঠার একটি সহজ উপায় জেএসএনপি।

তবে পদ্ধতির ব্যবহারিক প্রয়োগের মধ্যে সূক্ষ্ম পার্থক্য জড়িত যা প্রায়শই পরিষ্কারভাবে ব্যাখ্যা করা হয় না।

এখানে একটি সাধারণ টিউটোরিয়াল যা JSON এবং JSONP পাশাপাশি দেখায়।

সমস্ত কোড গিথুব এ অবাধে উপলব্ধ এবং একটি লাইভ সংস্করণ http://json-jsonp-tutorial.craic.com এ পাওয়া যাবে

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.