Perbincangan ringkas tentang perbezaan antara JSON dan JSONP dan penggunaan jQuery's ajax jsonp_jquery

JSON dan JSONP

JSON (JavaScript Object Notation) ialah format pertukaran data ringan yang digunakan untuk bertukar maklumat antara penyemak imbas dan pelayan.

JSONP (JSON With Padding) ialah JSON (atau JSON yang dibungkus) yang dibungkus dalam panggilan fungsi.

JSON ialah format data dan JSONP ialah kaedah panggilan data.

Salin kod Kod adalah seperti berikut:

//JSON
{
“nama”: “sb”
}

Salin kod Kod adalah seperti berikut:

//JSONP
panggil balik({
“nama”: “sb”
})

Atas sebab keselamatan, skrip (AJAX) tidak boleh mengakses kandungan di luar domain ini. Walau bagaimanapun, sumber statik tidak dihadkan oleh dasar domain dan boleh memuatkan skrip, gaya, gambar dan sumber statik lain daripada mana-mana domain JSOP menggunakan prinsip ini untuk mencapai pemerolehan data merentas domain.

Contoh 1:

Salin kod Kod adalah seperti berikut:

//Tentukan fungsi shoPrice
function showPrice(data) {
alert("Simbol: " data.symbol ", Harga: " data.price);
}

Salin kod Kod adalah seperti berikut:

//Sertakan fungsi dan parameter showPrice dalam halaman Web

Contoh ini menunjukkan cara memanggil fungsi JavaScript dengan data JSON statik sebagai parameter.

Contoh 2:

Panggilan fungsi pertama boleh ditulis dalam fail js dan diletakkan pada pelayan, dimuatkan ke dalam halaman menggunakan teg skrip, dan teg ini boleh dibuat secara dinamik.

Salin kod Kod adalah seperti berikut:

Kandungan remote.js adalah sama seperti yang ditulis dalam teg sebelum ini:

1 showPrice({simbol: 'IBM', harga: 91.42});
Kod JavaScript yang dimasukkan secara dinamik mengambil data JSON untuk dihantar sebagai parameter dan parameter pernyataan panggilan fungsi showPrice.

Jadi persoalannya, adakah fungsi showPrice perlu dipanggil setiap kali data diperoleh? Ini memerlukan pengaturcara bahagian hadapan dan belakang untuk membuat perjanjian Sudah tentu, ini akan menyebabkan banyak kesulitan, terutamanya apabila antara muka terbuka kepada pembangunan awam. JSOP diproses dengan cara ini: hujung hadapan disokong untuk menghantar parameter nama fungsi panggil balik, hujung belakang menerima parameter nama fungsi panggil balik, dan kemudian menjana panggilan ke fungsi, lulus data JSON sebagai parameter dan memasukkannya ke dalam halaman apabila ia mencapai klien untuk memulakan pelaksanaan.

Contoh 3:

Masukkan kod secara dinamik dengan parameter panggil balik:

Salin kod Kod adalah seperti berikut:

Coretan kod perkhidmatan JSONP yang dilaksanakan dalam PHP pada bahagian belakang:

Salin kod Kod adalah seperti berikut:

$jsonData = getDataAsJson($_GET['simbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// Cetakan: showPrice({"symbol" : "IBM", "price" : "91.42"});

Ia sesuai dengan takrifan JSONP dan membungkus data JSON dalam panggilan fungsi.

Contoh di atas datang daripada:

Menggunakan JSONP untuk komunikasi merentas domain, Bahagian 1: Bina mashup berkuasa dengan cepat menggunakan JSONP dan jQuery


Menggunakan JSONP dengan jQuery
Kaedah panggilan AJAX dan JSONP dalam jQuery kelihatan sangat serupa. Jangan keliru dengan fenomena ini. AJAX memperoleh kandungan bukan halaman melalui objek XMLHttpRequest, manakala JSONP secara dinamik menambah tag Walaupun jQuery merangkum JSONP sebagai satu bentuk AJAX, JSONP bukanlah satu bentuk atau kes khas AJAX.

Salin kod Kod adalah seperti berikut:

$.ajax({
URL: "
http://query.yahooapis.com/v1/public/yql", jsonpCallback: "showPrice",
​ jsonp: "panggil balik",
// beritahu jQuery kami menjangkakan JSONP
Jenis Data: "jsonp",
Data: {
q: "pilih tajuk,abstrak,url daripada carian.berita di mana pertanyaan="kucing"",
format: "json"
},
// bekerja dengan respons
Kejayaan: fungsi(data) {
            console.log( data ); // respons pelayan
}
});

Perihalan parameter permintaan Ajax:

DataType String

Jenis data dijangka akan dikembalikan oleh pelayan. Jika tidak dinyatakan, jQuery secara automatik akan membuat pertimbangan pintar berdasarkan maklumat MIME pakej HTTP Contohnya, jenis XML XML diiktiraf sebagai XML. Dalam 1.4, JSON akan menjana objek JavaScript dan skrip akan melaksanakan skrip. Data yang dikembalikan oleh pelayan kemudiannya akan dihuraikan berdasarkan nilai ini dan dihantar ke fungsi panggil balik. Nilai yang tersedia:

"xml": Mengembalikan dokumen XML yang boleh diproses dengan jQuery.

"html": Mengembalikan maklumat HTML teks biasa; teg skrip yang disertakan akan dilaksanakan apabila dimasukkan ke dalam dom.

"skrip": Mengembalikan kod JavaScript teks biasa. Keputusan tidak dicache secara automatik. Melainkan parameter "cache" ditetapkan. '''Nota:''''Apabila membuat permintaan jauh (bukan di bawah domain yang sama), semua permintaan POST akan ditukar kepada permintaan GET. (Kerana teg skrip DOM akan digunakan untuk memuatkan)

"json": Mengembalikan data JSON.

"jsonp": format JSONP. Apabila memanggil fungsi menggunakan format JSONP, seperti "myurl?callback=?" secara automatik akan menggantikan ?

"teks": Mengembalikan rentetan teks biasa

jsonp,

Tulis semula nama fungsi panggil balik dalam permintaan jsonp. Nilai digunakan untuk menggantikan bahagian "panggilan balik" dalam parameter URL permintaan GET atau POST seperti "panggilan balik=?" Contohnya, {jsonp:'onJsonPLoad'} akan menyebabkan "onJsonPLoad" dihantar ke pelayan.

jsonpCallback,

Tentukan nama fungsi panggil balik untuk jsonp. Nilai ini akan digunakan dan bukannya nama fungsi rawak yang dijana secara automatik oleh jQuery. Ini digunakan terutamanya untuk membenarkan jQuery menjana nama fungsi unik supaya lebih mudah untuk mengurus permintaan dan menyediakan fungsi panggil balik dan pengendalian ralat. Anda juga boleh menentukan nama fungsi panggil balik ini apabila anda mahu penyemak imbas cache GET permintaan. Walau bagaimanapun, dalam penggunaan sebenar, tidak perlu menulis fungsi panggil balik, seperti showPrice dalam contoh ini, dan tiada ralat akan dilaporkan jika anda tidak menulisnya, kerana jQuery secara automatik menjana fungsi panggil balik untuk anda semasa memproses JSONP dan mengambil keluar data untuk memanggil kaedah kejayaan. Ia mungkin kelihatan seperti ini:

Salin kod Kod adalah seperti berikut:

function success_jsonpCallback(data) { success(data);

Di atas adalah keseluruhan kandungan artikel ini Adakah anda mempunyai pemahaman terperinci tentang jsonp? Jika anda mempunyai sebarang pertanyaan, sila tinggalkan saya mesej dan kita boleh membincangkannya bersama.