Kullanarak temel örnek .() ajax JSONP ile?

SORU

9 Mayıs 2011, PAZARTESİ

Kullanarak temel örnek .() ajax JSONP ile?

Biri bana JSONP ile başlamak için nasıl yardım eder misin lütfen?

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/

Bir uyarı, Bu belgelerden iş olarak üretmek gerekir: (ama ya hataları üreten değil). değil

teşekkürler.

CEVAP

29 Temmuz 2011, Cuma

JSONPçok basit bir hile üstesinden gelmektirXMLHttpRequestaynı ilke. (Gibi bir gönderilemiyorAJAX (XMLHttpRequest)farklı bir etki alanı için talep ediyoruz.)

Yani kullanmak yerineXMLHttpRequestkullanmak zorundayızscriptHTMLl etiketler, genellikle JS dosyaları yüklemek için kullanın olanlar, JS için başka bir etki alanından veri almak için. Kulağa garip geliyor?

Şey çıkıyorscriptetiketler moda benzer olarak kullanılabilirXMLHttpRequest! Şuna bir bak:

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

Bir ile sona erecekscriptbu verileri yükler, sonra bu gibi görünüyor segment:

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

Ancak bu, bu dizi getirmek zorundayız çünkü biraz zahmetliscriptetiket. Bu yüzdenJSONPyaratıcıları bu daha iyi (ve) çalışacak karar verdi:

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

Dikkat edinmy_callbackorada işlevi bitti mi? - Ne zaman bu kadarJSONPsunucu isteği alır ve geri arama parametresi bulur - düz JS dizi döndürmek yerine bu dönersiniz:

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

Kar nerede olduğunu görmek: artık otomatik geri alırız (my_callbackveri gittiğimizde tetikledi. Bu konuda bilinmesi gereken tek şey buJSONPbir geri arama ve komut dosyası etiketleri.

NOT:
Bu JSONP kullanımı basit örnekler, bu hazır scriptleri üretim değildir.

RAW JavaScript gösteri (basit Twitter yem kullanarak 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>

Temel jQuery örnek (basit Twitter yem JSONP kullanarak):

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

JSONPduruyorDolgu ile JSON. (gerçekten çoğu kişi gibi düşünüyorum ne ilgisi olarak çok kötü tekniği “adlı”.) doldurma

Bunu Paylaş: