JSONP এর সাথে .ajax () ব্যবহারের প্রাথমিক উদাহরণ?

186

দয়া করে কেউ আমাকে কীভাবে JSONP দিয়ে শুরু করতে সাহায্য করতে পারেন?

কোড:

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    var photos = function (data) {
     alert(data);
    };
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: false,
    });
});

ফিডল: http://jsfiddle.net/R7EPt/6/

ডকুমেন্টেশন থেকে যতদূর আমি কাজ করতে পারি তার জন্য একটি সতর্কতা তৈরি করা উচিত: নয় (তবে কোনও ত্রুটিও তৈরি করছে না)।

ধন্যবাদ।

ajax json jsonp

— সাইমন
সূত্র

aj। আপনি স্ট্রিং হিসাবে ফটোগুলি প্রবেশ করেছে।

— wOlVeRiNe

388

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>

জেএসএনপি প্যাডিং সহ জেএসওএনকে বোঝায় । (খুব খারাপ নামকরণ করা কৌশল যেমন এর বেশিরভাগ লোক "প্যাডিং" বলে মনে করবে তার সাথে আসলে কোনও সম্পর্ক নেই))

— ThatGuy
সূত্র

3

এই উত্তরটি এখন কিছুটা Access-Control-Allow-Originপুরানো because

— jفر00

মনে রাখবেন আপনি JSONP দিয়ে একটি ফর্ম POST করতে পারবেন না। এখানে আরও তথ্য: markhneedham.com/blog/2009/08/27/…

— thdoan

4

আপনি যদি এই স্ক্রিপ্টগুলি উত্পাদন-প্রস্তুত করতে চান তবে আপনাকে কী বিবেচনা করতে হবে?

— অতিথি

1

বাহ, এটি সত্যিই সহায়ক! শেষ পর্যন্ত আমি জেএসএনপি আসলে কী এবং এটি কীভাবে কাজ করে তা জানতে পারি!

— জেরি লিউ

145

JQuery ব্যবহার করে কীভাবে JSONP এর সাথে কাজ করতে হবে তার আরও সহজ উপায়

$.getJSON("http://example.com/something.json?callback=?", function(result){
   //response data are now in the result variable
   alert(result);
});

?URL এর প্রান্তে jQuery এর বলে যে এটি JSON পরিবর্তে একটি jsonp অনুরোধ। jQuery নিবন্ধভুক্ত এবং কলব্যাক ফাংশনটি স্বয়ংক্রিয়ভাবে কল করে।

আরও তথ্যের জন্য jQuery.getJSON ডকুমেন্টেশন দেখুন ।

— পেট্র পেলার
সূত্র

2

@ পেটারপেলার, দুর্দান্ত মনে হচ্ছে তবে আমি এটিকে থেকে কোনও পণ্য তৈরি করবো বলে মনে হয় না। আপনি কি একবার এটি দেখতে পারেন? জেএসফিডেল এটি কোনও ডেটা সতর্ক করে না। সম্ভবত আমি কিছু মিস করেছি

— টিকা

@ xDNP JSONP প্রতিক্রিয়া অবশ্যই সার্ভার দ্বারা সমর্থিত হবে। আপনার বিভাজন এটি সমর্থন করে বলে মনে হচ্ছে না কারণ আমি এখানে কোনও যুক্ত কলব্যাক দেখতে পাচ্ছি না: mylivecanvas.com/api/… । &callback=?এটি আপনার ক্ষেত্রে এটি প্রথম প্যারামিটার না হিসাবে ব্যবহার করা উচিত ।

— পেট্র পেলার 14

1

@ পেটারপেলার আমি আপনার সমাধানটি নিয়ে ব্যাপক আগ্রহী। কিন্তু, এটি আমার কাজ করে না। আমি একটি নতুন প্রশ্ন পোস্ট করতে চাই না তবে এটি আমার সাহায্য করে না। কী সার্ভার দ্বারা সমর্থন বলে মনে হচ্ছে না মানে? আমার কি করা উচিৎ? এবং আপনি কি আমাকে একটি সম্পূর্ণ URL দিতে পারেন যা আমার সার্ভারের জন্য কাজ করে? আমি আপনাকে কৃতজ্ঞ হবে। আমার কি কোনও সার্ভার কনফিগারেশন দরকার?

— টিকা

3

শেষ সম্পাদনাটি কী করে, "দয়া করে আর jQuery ব্যবহার করবেন না!" এর অর্থ কি?

— পার্কচিয়লু

1

এটি এখন 2018, এবং আমি নিশ্চিত নই যে 2017 এ কী ব্যবহার করা হবে!

— ভ্যাসিলি হল

28

ওপির প্রতিক্রিয়া হিসাবে, আপনার কোডের সাথে দুটি সমস্যা রয়েছে: আপনাকে jsonp = 'কলব্যাক' সেট করতে হবে, এবং আপনার মতো ভেরিয়েবলটিতে একটি কলব্যাক ফাংশন যুক্ত করা কাজ করবে বলে মনে হচ্ছে না।

আপডেট: আমি যখন এটি লিখেছিলাম টুইটার এপিআই সবেমাত্র খোলা ছিল, তবে তারা এটি পরিবর্তন করেছে এবং এটির এখন প্রমাণীকরণের প্রয়োজন। আমি দ্বিতীয় উদাহরণটিকে একটি ওয়ার্কিং (2014Q1) উদাহরণে পরিবর্তন করেছি, তবে এখন গিথুব ব্যবহার করছি।

এটি আর কাজ করে না - অনুশীলন হিসাবে, আপনি এটি গিথুব এপিআই দিয়ে প্রতিস্থাপন করতে পারেন কিনা তা দেখুন:

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: 'callback',
    });
});
function photos (data) {
    alert(data);
    console.log(data);
};

যদিও সতর্কতা () এর মতো কোনও অ্যারে তৈরি করা সত্যিকার অর্থে ভাল কাজ করে না ... ফায়ারব্যাগের "নেট" ট্যাব আপনাকে সঠিকভাবে জেএসএন প্রদর্শন করবে। আর একটি সহজ কৌশল করছে

alert(JSON.stringify(data));

আপনি jQuery.getJSON পদ্ধতিটিও ব্যবহার করতে পারেন । এখানে একটি সম্পূর্ণ এইচটিএমএল উদাহরণ যা গিথুব থেকে "গিস্টস" এর একটি তালিকা পায়। এটি আপনার জন্য এলোমেলোভাবে নামযুক্ত কলব্যাক ফাংশন তৈরি করে, এটিই চূড়ান্ত "কলব্যাক =?" ইউআরএল মধ্যে।

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JQuery (cross-domain) JSONP Twitter example</title>
        <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.getJSON('https://api.github.com/gists?callback=?', function(response){
                    $.each(response.data, function(i, gist){
                        $('#gists').append('<li>' + gist.user.login + " (<a href='" + gist.html_url + "'>" + 
                            (gist.description == "" ? "undescribed" : gist.description) + '</a>)</li>');
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul id="gists"></ul>
    </body>
</html>

— PapaFreud
সূত্র

2

আপনি ঠিক বলেছেন, এটি আর কাজ করে না। টুইটার তাদের এপিআই পরিবর্তন করেছে।

— পাপাফ্রেড

3

<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>An JSONP example </title>
</head>
<body>
<!-- DIV FOR SHOWING IMAGES -->
<div id="images">
</div>
<!-- SCRIPT FOR GETTING IMAGES FROM FLICKER.COM USING JSONP -->
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
  format: "json"
},
//RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV
function(data) {
  $.each(data.items, function(i,item){
  $("<img/>").attr("src", item.media.m).appendTo("#images");

 });
});</script>
</body>
</html>

উপরের কোডটি ফ্লিকার এপিআই থেকে চিত্র পেতে সহায়তা করে। এটি JSONP ব্যবহার করে চিত্রগুলি পাওয়ার জন্য জিইটি পদ্ধতি ব্যবহার করে। এটি বিস্তারিত এখানে পাওয়া যাবে

— গণেশ বাবু
সূত্র