Apa perbedaan antara JSON dan JSONP?

Format bijaksana, jenis file bijaksana dan penggunaan praktis bijaksana?

JSONP adalah JSON dengan bantalan. Artinya, Anda meletakkan string di awal dan sepasang tanda kurung di sekitarnya. Sebagai contoh:

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

Hasilnya adalah Anda dapat memuat JSON sebagai file skrip. Jika sebelumnya Anda mengatur fungsi yang dipanggil func, maka fungsi itu akan dipanggil dengan satu argumen, yaitu data JSON, ketika file skrip selesai dimuat. Ini biasanya digunakan untuk memungkinkan lintas situs AJAX dengan data JSON. Jika Anda tahu bahwa example.com melayani file JSON yang terlihat seperti contoh JSONP yang diberikan di atas, maka Anda dapat menggunakan kode seperti ini untuk mengambilnya, bahkan jika Anda tidak berada di domain example.com:

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

Pada dasarnya, Anda tidak diizinkan untuk meminta data JSON dari domain lain melalui AJAX karena kebijakan asal-sama. AJAX memungkinkan Anda untuk mengambil data setelah halaman dimuat, dan kemudian menjalankan beberapa kode / fungsi panggilan setelah kembali. Kami tidak dapat menggunakan AJAX tetapi kami diizinkan untuk menyuntikkan <script>tag ke halaman kami sendiri dan mereka diizinkan untuk referensi skrip yang dihosting di domain lain.

Biasanya Anda akan menggunakan ini untuk memasukkan perpustakaan dari CDN seperti jQuery . Namun, kami dapat menyalahgunakan ini dan menggunakannya untuk mengambil data sebagai gantinya! JSON sudah merupakan JavaScript yang valid ( sebagian besar ), tetapi kami tidak bisa hanya mengembalikan JSON dalam file skrip kami, karena kami tidak memiliki cara untuk mengetahui kapan script / data selesai dimuat dan kami tidak memiliki cara mengaksesnya kecuali itu ditugaskan ke suatu variabel atau diteruskan ke suatu fungsi. Jadi yang kami lakukan adalah memberi tahu layanan web untuk memanggil fungsi atas nama kami ketika sudah siap.

Misalnya, kami dapat meminta beberapa data dari API pertukaran saham, dan bersama dengan parameter API kami yang biasa, kami memberikannya panggilan balik, seperti ?callback=callThisWhenReady. Layanan web maka membungkus data dengan fungsi dan mengembalikannya seperti ini: callThisWhenReady({...data...}). Sekarang begitu skrip dimuat, browser Anda akan mencoba untuk mengeksekusinya (seperti biasa), yang pada gilirannya memanggil fungsi sewenang-wenang kami dan memberi kami data yang kami inginkan.

Ini berfungsi seperti permintaan AJAX normal kecuali alih-alih memanggil fungsi anonim, kita harus menggunakan fungsi bernama.

jQuery sebenarnya mendukung ini dengan mulus untuk Anda dengan membuat fungsi bernama unik untuk Anda dan meneruskannya, yang kemudian akan menjalankan kode yang Anda inginkan.

JSONP memungkinkan Anda untuk menentukan fungsi panggilan balik yang dilewatkan objek JSON Anda. Ini memungkinkan Anda untuk memotong kebijakan asal yang sama dan memuat JSON dari server eksternal ke JavaScript di halaman web Anda.

JSONP adalah singkatan dari "JSON with Padding" dan ini merupakan solusi untuk memuat data dari domain yang berbeda. Itu memuat skrip ke dalam kepala DOM dan dengan demikian Anda dapat mengakses informasi seolah-olah itu dimuat di domain Anda sendiri, sehingga dengan melewati masalah lintas domain.

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

Sekarang kita dapat meminta JSON melalui AJAX menggunakan JSONP dan fungsi panggilan balik yang kita buat di sekitar konten JSON. Outputnya haruslah JSON sebagai objek yang kemudian dapat kita gunakan data untuk apa pun yang kita inginkan tanpa batasan.

JSONP pada dasarnya adalah, JSON dengan kode tambahan, seperti panggilan fungsi yang melingkari data. Ini memungkinkan data untuk ditindaklanjuti selama parsing.

JSON

JSON (JavaScript Object Notation) adalah cara mudah untuk mentransport data antar aplikasi, terutama ketika tujuannya adalah aplikasi JavaScript.

Contoh:

Berikut adalah contoh minimal yang menggunakan JSON sebagai transportasi untuk respons server. Klien membuat permintaan Ajax dengan fungsi steno jQuery $ .getJSON. Server menghasilkan hash, memformatnya sebagai JSON dan mengembalikan ini ke klien. Klien memformat ini dan meletakkannya di elemen halaman.

Server:

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

Klien:

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

Keluaran:

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

JSONP (JSON dengan Padding)

JSONP adalah cara sederhana untuk mengatasi pembatasan peramban saat mengirim respons JSON dari berbagai domain dari klien.

Satu-satunya perubahan di sisi klien dengan JSONP adalah menambahkan parameter panggilan balik ke URL

Server:

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

Klien:

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

Keluaran:

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

Tautan: http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

“JSONP adalah JSON dengan kode tambahan” akan terlalu mudah bagi dunia nyata. Tidak, Anda harus memiliki sedikit perbedaan. Apa yang menyenangkan dalam pemrograman jika semuanya berfungsi ?

Ternyata JSON bukan bagian dari JavaScript . Jika semua yang Anda lakukan adalah mengambil objek JSON dan membungkusnya dalam panggilan fungsi, suatu hari Anda akan digigit oleh kesalahan sintaks aneh, seperti saya hari ini.

JSONP adalah cara sederhana untuk mengatasi pembatasan peramban saat mengirim respons JSON dari berbagai domain dari klien.

Tetapi implementasi praktis dari pendekatan ini melibatkan perbedaan-perbedaan kecil yang seringkali tidak dijelaskan dengan jelas.

Berikut ini adalah tutorial sederhana yang menunjukkan JSON dan JSONP berdampingan.

Semua kode tersedia secara gratis di Github dan versi live dapat ditemukan di http://json-jsonp-tutorial.craic.com