JSONP ile .ajax () kullanımına temel örnek?

187

Lütfen birisi JSONP kullanmaya nasıl başlayacağımı öğrenmeme yardımcı olabilir mi?

Kod:

$('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,
    });
});

Keman: http://jsfiddle.net/R7EPt/6/

Belgelerden çalışabildiğim kadarıyla bir uyarı üretmelidir: değil (ama herhangi bir hata üretmiyor).

Teşekkürler.

ajax  json  jsonp 
— Simon
kaynak
$ .ajax ({url: pm_url, dataType: 'jsonp', jsonpCallback: fotoğraflar, jsonp: yanlış,}); Fotoğrafları dize olarak girdiniz.
— wOlVeRiNe

Yanıtlar:

388

JSONP , aynı alan adı politikasının XMLHttpRequest'in üstesinden gelmek için gerçekten basit bir numara . (Bildiğiniz gibi , farklı bir alana AJAX (XMLHttpRequest) isteği gönderemezsiniz .)

Yani - kullanmak yerine XMLHttpRequest biz kullanılması gereken komut JS başka bir alandan veri almak için HTMLl etiketleri, genelde kullandığınız olanlar sırayla, JS dosyaları yüklemek için. Kulağa garip geliyor?

Şey - çıkıyor komut dosyası etiketleri XMLHttpRequest benzer bir şekilde kullanılabilir ! Şuna bir bak:

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

Verileri yükledikten sonra şöyle görünen bir komut dosyası segmentiyle karşılaşacaksınız:

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

Ancak bu biraz rahatsız edici, çünkü bu diziyi kod etiketinden almamız gerekiyor . Yani JSONP yaratıcıları bu daha iyi çalışır (ve öyle) olduğuna karar:

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

Orada my_callback fonksiyonuna dikkat ettiniz mi? Yani - JSONP sunucusu isteğinizi aldığında ve geri arama parametresi bulduğunda - düz JS dizisini döndürmek yerine şunu döndürür:

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

Kârın nerede olduğunu görün: Şimdi verileri aldığımızda tetiklenecek otomatik geri arama ( my_callback ) alıyoruz. JSONP hakkında bilmeniz gereken her şey bu : geri arama ve kod etiketleri.

NOT:
Bunlar JSONP kullanımının basit örnekleridir, bunlar üretime hazır komut dosyaları değildir.

RAW JavaScript demosu (JSONP kullanarak basit Twitter yayını):

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


Temel jQuery örneği (JSONP kullanarak basit Twitter yayını):

<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 , Dolgu ile JSON'un kısaltmasıdır . (çoğu insanın “dolgu” olarak düşündüğü şeyle gerçekten ilgisi olmadığı için çok kötü adlandırılmış bir teknik.)

— O adam
kaynak
3
Tarayıcılar artık Access-Control-Allow-Originbazı çapraz menşe alanlara düzenli Ajax çağrıları yapılmasına izin veren başlıkları desteklediğinden, bu yanıt şimdi biraz güncel değil .
— jfriend00 13:15
JSONP ile bir form POST yapamayacağınızı unutmayın. Daha fazla bilgi için: markhneedham.com/blog/2009/08/27/…
— thdoan
4
Bu komut dosyalarını üretime hazır hale getirmek istiyorsanız nelere dikkat etmelisiniz?
— konuk
1
Vay canına, bu gerçekten yardımcı oluyor! Sonunda JSONP'nin tam olarak ne olduğunu ve nasıl çalıştığını öğreniyorum!
— Jerry Liu
146

JQuery kullanarak JSONP ile çalışmanın daha kolay bir yolu var

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

?URL ucunda yerine JSON bir JSONP isteği olduğunu jQuery söyler. jQuery geri arama işlevini otomatik olarak kaydeder ve çağırır.

Daha fazla ayrıntı için jQuery.getJSON belgelerine bakın .

— Petr Peller
kaynak
2
@PetrPeller, Harika görünüyor ama bundan bir ürün yapmıyorum. Bunu bir kez görebiliyor musun? JSFiddle Hiçbir veriyi uyarmaz . Belki bir şey kaçırdım
— tika
@xDNP JSONP yanıtı sunucu tarafından desteklenmelidir. Burada herhangi bir ek geri arama göremediğim için sunucunuz bunu desteklemiyor gibi görünüyor: mylivecanvas.com/api/… . Ayrıca &callback=?, durumunuzdaki ilk parametre olmadığından kullanmalısınız .
— Petr Peller
1
@PetrPeller Çözümünüzle çok ilgileniyorum. Ama bu benim üzerimde çalışmıyor. Yeni bir soru göndermek istemiyorum ama bu bana yardımcı olmuyor. Ne yok sunucu tarafından desteklenmesi görünmüyor ortalama? Ne yapmalıyım? Ve bana sunucum için çalışan tam bir URL verebilir misiniz? Sana minnettar olurum. Herhangi bir sunucu yapılandırmasına ihtiyacım var mı?
— tika
3
Son düzenleme, "Lütfen artık jQuery kullanmayın!" anlamına gelmek?
— ParkCheolu
1
Şimdi 2018 ve 2017'de neyin kullanılması gerektiğinden emin değilim!
— Vasily Hall
28

OP'ye yanıt olarak, kodunuzla ilgili iki sorun vardır: jsonp = 'geri arama' ayarlamanız gerekir ve sizin gibi bir değişkene geri arama işlevi eklemek işe yaramaz gibi görünüyor.

Güncelleme: Bunu yazdığımda Twitter API'si açıktı, ancak değiştirdiler ve şimdi kimlik doğrulaması gerektiriyor. İkinci örneği çalışan (2014Q1) bir örnekle değiştirdim, ancak şimdi github kullanıyorum.

Bu artık işe yaramıyor - bir alıştırma olarak, Github API ile değiştirip değiştiremeyeceğinize bakın: 

$('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);
};

her ne kadar alert () ing böyle bir dizi gerçekten iyi çalışmıyor ... Firebug "Net" sekmesi size JSON düzgün gösterecektir. Başka bir kullanışlı hile yapmak

alert(JSON.stringify(data));

JQuery.getJSON yöntemini de kullanabilirsiniz . İşte github "gists" bir listesini alır tam bir html örneği. Bu şekilde sizin için rastgele adlandırılmış bir geri arama işlevi oluşturur, bu son "geri arama =?" url'de.

<!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
kaynak
2
Haklısın, artık işe yaramıyor. Twitter API'larını değiştirdi.
— PapaFreud
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>

Yukarıdaki kod, Flicker API'sından resim almaya yardımcı olur. JSONP kullanarak görüntü almak için GET yöntemini kullanır. Bu ayrıntılı olarak bulunabilir burada

— Ganesh Babu
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.