JSON ve JSONP arasındaki farklar nelerdir?

Biçim akıllıca, dosya türü akıllı ve pratik kullanım akıllıca?

JSONP, dolgu ile JSON'dur. Yani, başında bir dize ve etrafına bir çift parantez koyarsınız. Örneğin:

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

Sonuç, JSON'u bir komut dosyası olarak yükleyebilmenizdir. Daha önce çağrılan bir işlev ayarlarsanız func, komut dosyası yükleme işlemi tamamlandığında bu işlev JSON verileri olan bir bağımsız değişkenle çağrılır. Bu genellikle JSON verileriyle siteler arası AJAX'a izin vermek için kullanılır. Example.com'un yukarıda verilen JSONP örneğine benzeyen JSON dosyaları sunduğunu biliyorsanız, example.com etki alanında olmasanız bile, almak için böyle bir kod kullanabilirsiniz:

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

Temel olarak, aynı köken politikası nedeniyle AJAX aracılığıyla başka bir alan adından JSON verileri istemenize izin verilmez. AJAX, bir sayfa zaten yüklendikten sonra veri almanıza ve daha sonra geri döndüğünde bir kod çalıştırmanıza / bir işlevi çağırmanıza olanak tanır. AJAX'ı kullanamayız, ancak <script>kendi sayfamıza etiketler eklememize ve bunların diğer alanlarda barındırılan komut dosyalarına referans vermesine izin verilir.

Genellikle bunu jQuery gibi bir CDN'deki kütüphaneleri dahil etmek için kullanırsınız . Ancak, bunu kötüye kullanabilir ve bunun yerine veri almak için kullanabiliriz! JSON zaten geçerli bir JavaScript ( çoğunlukla ), ancak komut dosyası dosyamızda sadece JSON döndüremeyiz, çünkü komut dosyasının / verilerin ne zaman yüklenmesi bittiğini bilmenin hiçbir yolu yoktur ve bir değişkene atanmış veya bir işleve iletilmiştir. Bunun yerine yaptığımız şey, web servisine hazır olduğunda bizim adımıza bir işlevi çağırmasını söylemek.

Örneğin, bir borsa API'sından bazı veriler isteyebiliriz ve her zamanki API parametrelerimizle birlikte, ona bir geri arama veririz ?callback=callThisWhenReady. Web hizmeti daha sonra bizim fonksiyonu ile veri sarar ve şu şekilde döndürür: callThisWhenReady({...data...}). Komut dosyası yüklenir yüklenmez, tarayıcınız (normalde olduğu gibi) yürütmeye çalışacaktır, bu da rastgele işlevimizi çağırır ve bize istediğimiz verileri besler.

Anonim bir işlevi çağırmak yerine adlandırılmış işlevleri kullanmamız dışında normal bir AJAX isteği gibi çalışır.

jQuery, sizin için benzersiz bir adlandırılmış işlev oluşturarak ve bunu ileterek bunu sizin için sorunsuz bir şekilde destekler, bu da daha sonra istediğiniz kodu çalıştırır.

JSONP , JSON nesnenizden iletilen bir geri çağırma işlevi belirtmenize olanak tanır. Bu, aynı kaynak politikasını atlamanıza ve JSON'u harici bir sunucudan web sayfanızdaki JavaScript'e yüklemenize olanak tanır.

JSONP, "Dolgulu JSON" anlamına gelir ve farklı alanlardan veri yüklemek için bir çözümdür. Komut dosyasını DOM'nin başına yükler ve böylece bilgilere kendi alan adınıza yüklenmiş gibi erişebilir, böylece alanlar arası sorunu geçerek erişebilirsiniz.

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets."
        },
        {
            "siteName": "BLOGOOLA",
            "domainName": "http://www.blogoola.com",
            "description": "Expose your blog to millions and increase your audience."
        },
        {
            "siteName": "PHPSCRIPTS4U",
            "domainName": "http://www.phpscripts4u.com",
            "description": "The Blog of Enthusiastic PHP Scripters"
        }
    ]
});

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

Artık JSONP'yi JSONP ve JSON içeriği etrafında oluşturduğumuz geri çağırma işlevini kullanarak AJAX aracılığıyla isteyebiliriz. Çıktı, nesne olarak JSON olmalı ve bu verileri daha sonra kısıtlama olmaksızın istediğimiz her şey için kullanabiliriz.

JSONP aslında, verilerin etrafına sarılmış bir işlev çağrısı gibi ekstra kodlu JSON'dur. Ayrıştırma sırasında verinin üzerine işlem yapılmasını sağlar.

JSON

JSON (JavaScript Nesne Gösterimi) , özellikle hedef bir JavaScript uygulaması olduğunda, uygulamalar arasında veri aktarmanın uygun bir yoludur.

Misal:

Sunucu yanıtı için aktarım olarak JSON kullanan minimal bir örnek. İstemci, jQuery kısayol işlevi $ .getJSON ile bir Ajax isteği yapar. Sunucu bir karma oluşturur, JSON olarak biçimlendirir ve bunu istemciye döndürür. İstemci bunu biçimlendirir ve bir sayfa öğesine yerleştirir.

Sunucu:

get '/json' do
 content_type :json
 content = { :response  => 'Sent via JSON',
            :timestamp => Time.now,
            :random    => rand(10000) }
 content.to_json
end

Müşteri:

var url = host_prefix + '/json';
$.getJSON(url, function(json){
  $("#json-response").html(JSON.stringify(json, null, 2));
});

Çıktı:

  {
   "response": "Sent via JSON",
   "timestamp": "2014-06-18 09:49:01 +0000",
   "random": 6074
  }

JSONP (Dolgu ile JSON)

JSONP , istemciden farklı alan adlarından JSON yanıtları gönderirken tarayıcı kısıtlamalarının üstesinden gelmenin basit bir yoludur.

JSONP ile istemci tarafında tek değişiklik URL'ye geri arama parametresi eklemektir

Sunucu:

get '/jsonp' do
 callback = params['callback']
 content_type :js
 content = { :response  => 'Sent via JSONP',
            :timestamp => Time.now,
            :random    => rand(10000) }
 "#{callback}(#{content.to_json})"
end

Müşteri:

var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
  $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});

Çıktı:

 {
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}

Bağlantı: http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

“JSONP ekstra kodlu JSON” gerçek dünya için çok kolay olurdu. Hayır, çok az tutarsızlığınız olmalı. Her şey olursa programlama eğlenceli nedir Sadece çalışır ?

Dışarı Dönüşler JSON JavaScript bir alt kümesi değildir . Tek yaptığınız bir JSON nesnesi alıp bir işlev çağrısına sarmaksa, bir gün, bugünkü gibi garip sözdizimi hatalarından ısırılırsınız.

JSONP, istemciden farklı alan adlarından JSON yanıtları gönderirken tarayıcı kısıtlamalarının üstesinden gelmenin basit bir yoludur.

Ancak yaklaşımın pratik uygulaması, genellikle net bir şekilde açıklanmayan ince farklılıkları içerir.

JSON ve JSONP'yi yan yana gösteren basit bir öğretici.

Tüm kod Github'da ücretsiz olarak mevcuttur ve canlı bir sürüm http://json-jsonp-tutorial.craic.com adresinde bulunabilir.