XMLHttpRequest একই ডোমেন নীতিটি কাটিয়ে উঠতে JSONP সত্যিই একটি সহজ কৌশল । (যেমন আপনি জানেন যে কেউ এজেএক্স (এক্সএমএলএইচটিপিআরকোয়েস্ট) অন্য কোনও ডোমেইনে প্রেরণ করতে পারবেন না ) )
সুতরাং - XMLHttpRequest ব্যবহারের পরিবর্তে আমাদের স্ক্রিপ্ট এইচটিএমএল ট্যাগ ব্যবহার করতে হবে , আপনি সাধারণত জেএস ফাইলগুলি লোড করতে ব্যবহার করেন, অন্য কোনও ডোমেন থেকে ডেটা পাওয়ার জন্য। অদ্ভুত লাগছে?
কথাটি হ'ল - স্ক্রিপ্ট ট্যাগগুলি XMLHttpRequest এর অনুরূপ ফ্যাশনে ব্যবহার করা যেতে পারে ! এটা দেখ:
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({['some string 1', 'some data', 'whatever data']});
লাভ কোথায় তা দেখুন: এখন আমরা অটোমেটিক কলব্যাক ( মাই_ক্যালব্যাক ) পাই যা ডেটা পাওয়ার পরে ট্রিগার করা হবে। জেএসএনপি সম্পর্কে যা জানার দরকার তা এটি: এটি একটি কলব্যাক এবং স্ক্রিপ্ট ট্যাগ।
দ্রষ্টব্য:
এগুলি JSONP ব্যবহারের সাধারণ উদাহরণ, এগুলি উত্পাদন প্রস্তুত স্ক্রিপ্ট নয়।
RAW জাভাস্ক্রিপ্ট প্রদর্শন (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 উদাহরণ (JSONP ব্যবহার করে সাধারণ টুইটার ফিড):
<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>
জেএসএনপি প্যাডিং সহ জেএসওএনকে বোঝায় । (খুব খারাপ নামকরণ করা কৌশল যেমন এর বেশিরভাগ লোক "প্যাডিং" বলে মনে করবে তার সাথে আসলে কোনও সম্পর্ক নেই))