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

— साइमन
स्रोत

$ .ajax ({url: pm_url, dataType: 'jsonp', jsonpCallback: photos, jsonp: false,}); आपने एक स्ट्रिंग के रूप में तस्वीरें दर्ज की थीं।

— wOlVeRiNe

388

JSONP वास्तव में XMLHttpRequest समान डोमेन नीति को पार करने के लिए एक सरल चाल है । (जैसा कि आप जानते हैं कि कोई एक अलग डोमेन के लिए AJAX (XMLHttpRequest) अनुरोध नहीं भेज सकता है ।)

इसलिए - XMLHttpRequest का उपयोग करने के बजाय हमें स्क्रिप्ट HTMLl टैग्स का उपयोग करना होगा , जिन्हें आप आमतौर पर JS फ़ाइलों को लोड करने के लिए उपयोग करते हैं, ताकि JS दूसरे डोमेन से डेटा प्राप्त कर सकें। अजीब लगता है?

बात यह है - बारी बारी से स्क्रिप्ट टैग 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>

हालाँकि यह थोड़ा असुविधाजनक है, क्योंकि हमें इस सरणी को स्क्रिप्ट टैग से प्राप्त करना है । तो JSONP रचनाकारों ने फैसला किया कि यह बेहतर काम करेगा (और यह है):

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";

वहाँ पर my_callback फ़ंक्शन को नोटिस करें ? इसलिए - जब JSONP सर्वर आपका अनुरोध प्राप्त करता है और कॉलबैक पैरामीटर पाता है - सादे जेएस सरणी को वापस करने के बजाय यह इसे वापस करेगा:

my_callback({['some string 1', 'some data', 'whatever data']});

देखें कि लाभ कहां है: अब हम स्वचालित कॉलबैक ( my_callback ) प्राप्त करते हैं जो डेटा प्राप्त करने के बाद चालू हो जाएगा। JSONP के बारे में जानने के लिए बस इतना ही है : यह एक कॉलबैक और स्क्रिप्ट टैग है।

नोट:
ये JSONP उपयोग के सरल उदाहरण हैं, ये तैयार स्क्रिप्ट का उत्पादन नहीं हैं।

रॉ जावास्क्रिप्ट प्रदर्शन (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>

JSONP पैडिंग के साथ JSON के लिए खड़ा है । (बहुत खराब तरीके से नामित तकनीक के रूप में इसका वास्तव में कोई लेना-देना नहीं है कि ज्यादातर लोग "पैडिंग" के बारे में क्या सोचते हैं।)

— वह लड़का
स्रोत

3

यह उत्तर अब कुछ हद तक पुराना है क्योंकि ब्राउज़र अब Access-Control-Allow-Originहेडर का समर्थन करते हैं जो कुछ क्रॉस-ऑरिजिन डोमेन के लिए नियमित अजाक्स कॉल करने की अनुमति देते हैं।

— jfriend00

ध्यान रखें कि आप JSONP के साथ एक फॉर्म POST नहीं कर सकते हैं। यहाँ अधिक जानकारी: markhneedham.com/blog/2009/08/27/…

— thdoan

4

यदि आप इन लिपियों को उत्पादन-तैयार करना चाहते हैं, तो आपको क्या विचार करना होगा?

— अतिथि

1

वाह, यह वास्तव में उपयोगी है! मुझे आखिरकार पता है कि वास्तव में JSONP क्या है और यह कैसे काम करता है!

— जेरी लियू

145

JSON का उपयोग करके 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

@PetrPeller, बहुत अच्छा लगता है, लेकिन मुझे इससे कोई उत्पाद नहीं लगता है। क्या आप एक बार इसे देख सकते हैं? JSFiddle यह कोई डेटा नहीं सचेत करता है। शायद मैं कुछ याद किया

— tika

@ xDNP JSONP प्रतिसाद सर्वर द्वारा समर्थित होना चाहिए। आपका विच्छेद इसका समर्थन नहीं करता क्योंकि मैं यहां कोई जोड़ा कॉलबैक नहीं देख सकता: mylivecanvas.com/api/… । इसके अलावा आपको इसका उपयोग करना चाहिए &callback=?क्योंकि यह आपके मामले में पहला पैरामीटर नहीं है।

— पेट्र पेलर

1

@PetrPeller मुझे आपके समाधान पर बहुत दिलचस्पी है। लेकिन, वह मुझ पर काम नहीं करता है। मैं एक नया प्रश्न पोस्ट नहीं करना चाहता लेकिन यह मेरी मदद नहीं करता है। सर्वर द्वारा समर्थन का क्या मतलब नहीं लगता है? मुझे क्या करना चाहिए? और क्या आप मुझे पूरा URL दे सकते हैं जो मेरे सर्वर के लिए काम करता है? मैं आपका आभारी रहूंगा। क्या मुझे किसी सर्वर कॉन्फ़िगरेशन की आवश्यकता है?

— टीका

3

अंतिम संपादन क्या करता है, "कृपया अब jQuery का उपयोग न करें!" क्या मतलब है?

— पार्कचोलू

1

यह अब 2018 है, और मुझे यकीन नहीं है कि 2017 में इसका क्या उपयोग किया जाना चाहिए!

— वसीली हॉल

28

ओपी के जवाब में, आपके कोड के साथ दो समस्याएं हैं: आपको jsonp = 'callback' सेट करने की आवश्यकता है, और एक कॉलबैक फ़ंक्शन में एक चर में जोड़ना जैसे कि आपको काम नहीं लगता है।

अद्यतन: जब मैंने यह लिखा था कि ट्विटर एपीआई सिर्फ खुला था, लेकिन उन्होंने इसे बदल दिया और अब इसे प्रमाणीकरण की आवश्यकता है। मैंने दूसरे उदाहरण को एक कामकाजी (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);
};

हालांकि अलर्ट () एक सरणी को पसंद करता है जो वास्तव में अच्छी तरह से काम नहीं करता है ... फायरबग में "नेट" टैब आपको JSON को ठीक से दिखाएगा। एक और आसान चाल है

alert(JSON.stringify(data));

आप jQuery.getJSON पद्धति का भी उपयोग कर सकते हैं । यहाँ एक पूर्ण html उदाहरण दिया गया है, जिसे जीथब से "जिस्ट" की सूची मिलती है। इस तरह यह आपके लिए एक बेतरतीब ढंग से नामित कॉलबैक फ़ंक्शन बनाता है, यह अंतिम "कॉलबैक =?" url में।

<!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 का उपयोग करके चित्र प्राप्त करने के लिए GET विधि का उपयोग करता है। यह यहाँ पर विस्तार से पाया जा सकता है

— गणेश बाबू
स्रोत