JSONP JQuery ' s dijelaskan dengan contoh

Ringkasan mata utama

JSONP (JSON with Padding) membolehkan panggilan Ajax silang domain, mengelakkan dasar homolog yang menyekat skrip daripada mengakses data dari sumber yang berbeza. Ini dilakukan dengan mempunyai data JSON Return Server yang mengandungi panggilan fungsi, yang boleh mentafsir penyemak imbas.
Walaupun JSONP adalah berharga untuk mendapatkan data dari sumber yang berbeza dan mengakses kandungan untuk pelbagai perkhidmatan, ia juga mempunyai beberapa batasan. JSONP hanya boleh melakukan permintaan merentas domain dan mesti disokong secara eksplisit oleh pelayan. Ia juga mempunyai masalah keselamatan yang berpotensi kerana ia membuka kemungkinan untuk serangan skrip lintas tapak (XSS).
Penyelesaian lain untuk dasar homolog termasuk penggunaan proksi atau pelaksanaan perkongsian sumber silang asal (CORS). Proksi ini membolehkan kod pelayan untuk melaksanakan permintaan silang asal, sementara CORS membolehkan pelayar untuk berkomunikasi merentasi domain dengan memasukkan pengepala HTTP yang berasaskan akses-kawalan-asal dalam respons. Walau bagaimanapun, setiap kaedah mempunyai kekurangan dan batasannya sendiri.

Artikel ini dikemas kini pada 23 Jun 2016 untuk menangani isu -isu kualiti. Komen yang berkaitan dengan artikel lama telah dipadamkan. Jika anda sedang membangunkan aplikasi berasaskan web dan cuba memuatkan data dari domain yang tidak berada di bawah kawalan anda, anda mungkin melihat mesej berikut dalam konsol penyemak imbas: XMLHTTPREQUEST tidak dapat memuatkan

https: //www.php .cn/link/0df0dbfc4725c2259dc0bb045e9bf6d2 '' Oleh itu, tidak dibenarkan akses. Dalam artikel ini, kita akan meneroka apa yang menyebabkan kesilapan ini dan bagaimana menyelesaikan masalah ini dengan menggunakan jQuery dan JSONP.

Dasar Asal Sama

laman web umum boleh menggunakan objek XMLHTTPREQUEST untuk menghantar dan menerima data ke pelayan jauh, tetapi dasar asal yang sama mengehadkan apa yang dapat mereka lakukan. Ini adalah konsep penting dalam model keselamatan penyemak imbas, yang menetapkan bahawa pelayar web hanya boleh membenarkan skrip pada halaman A untuk mengakses data pada halaman B jika kedua -dua halaman mempunyai sumber yang sama. Sumber halaman ditakrifkan oleh protokol

, host dan nombor port . Sebagai contoh, sumber halaman ini adalah "https", "www.sitePoint.com", "80". Dasar homogen adalah mekanisme keselamatan. Ia menghalang skrip dari membaca data dari domain anda dan menghantarnya ke pelayan mereka. Tanpa ini, mudah bagi laman web yang berniat jahat untuk merangkak maklumat sesi anda ke laman web lain (seperti Gmail atau Twitter) dan melakukan tindakan bagi pihak anda. Malangnya, ia juga menyebabkan kesilapan yang kita lihat di atas dan sering menyebabkan masalah bagi pemaju yang cuba menyelesaikan tugas yang sah.

Contoh kegagalan

mari kita lihat apa yang tidak berfungsi. Ini adalah fail JSON yang terletak di domain yang berbeza dan kami mahu memuatkannya menggunakan kaedah getJson JQuery.

<code class="language-javascript">$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);</code>

Jika anda membuka konsol dalam penyemak imbas anda dan cuba, anda akan melihat mesej yang serupa dengan yang disebutkan di atas. Jadi apa yang boleh kita lakukan?

Penyelesaian yang mungkin

bernasib baik, tidak semuanya dipengaruhi oleh dasar homolog. Sebagai contoh, adalah mungkin untuk memuatkan imej atau skrip ke dalam halaman anda dari domain yang berbeza - anda melakukan ini apabila anda memasukkan jQuery dari CDN (contohnya). Ini bermakna kita boleh membuat tag <script></script>, tetapkan atribut src ke fail JSON kami, dan menyuntiknya ke halaman.

<code class="language-javascript">var script = $("<script>", {
    src: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
    type: "application/json"
  }
);

$("head").append(script);</script></code>

Walaupun ini berfungsi, ia tidak banyak membantu kita, kerana kita tidak dapat mengakses data yang terkandung di dalamnya.

pemula JSONP

jsonp (bagi pihak JSON dengan padding) adalah berdasarkan teknik ini dan memberi kita cara untuk mengakses data yang dikembalikan. Ia dilaksanakan dengan mempunyai data JSON Return Server yang mengandungi panggilan fungsi ("popular") yang mana penyemak imbas kemudian dapat mentafsir. Fungsi ini mesti ditakrifkan dalam halaman yang menilai tindak balas JSONP.

mari kita lihat apa contoh sebelumnya. Ini adalah fail JSON yang dikemas kini yang membungkus data JSON asal dalam fungsi jsonCallback.

<code class="language-javascript">function jsonCallback(json){
  console.log(json);
}

$.ajax({
  url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json",
  dataType: "jsonp"
});</code>

Ini merekodkan hasil yang diharapkan kepada konsol. Kami kini mempunyai (walaupun agak terhad) Ajax silang domain.

API pihak ketiga

Beberapa API pihak ketiga membolehkan anda menentukan nama fungsi panggil balik yang harus dilaksanakan apabila permintaan itu kembali. Satu API sedemikian ialah API GitHub.

Dalam contoh berikut, kami mendapat maklumat pengguna John Resig (pencipta jQuery) dan log respons kepada konsol menggunakan fungsi panggilan balik logResults.

<code class="language-javascript">function logResults(json){
  console.log(json);
}

$.ajax({
  url: "https://api.github.com/users/jeresig",
  dataType: "jsonp",
  jsonpCallback: "logResults"
});</code>

ini juga boleh ditulis sebagai:

<code class="language-javascript">$.getJSON("https://api.github.com/users/jeresig?callback=?",function(json){
  console.log(json);
});</code>

? pada akhir URL memberitahu jQuery bahawa ia memproses permintaan JSONP dan bukannya JSON. JQuery kemudian secara automatik mendaftarkan fungsi panggil balik, yang dipanggil apabila permintaan itu kembali.

Jika anda ingin mengetahui lebih lanjut mengenai kaedah getjson jQuery, sila lihat: Ajax/jQuery.getjson contoh mudah

Langkah berjaga -jaga

Tetapi seperti yang anda mungkin sedar sekarang, pendekatan ini mempunyai beberapa kelemahan.

Sebagai contoh, JSONP hanya boleh melakukan permintaan merentas domain, dan pelayan mesti secara eksplisit menyokongnya. JSONP bukan tanpa masalah keselamatan, jadi mari kita memperkenalkan beberapa penyelesaian lain.

Menggunakan ejen

Kod sisi pelayan tidak tertakluk kepada dasar asal yang sama dan boleh melaksanakan permintaan silang asal tanpa sebarang masalah. Oleh itu, anda boleh membuat beberapa jenis proksi dan menggunakannya untuk mendapatkan sebarang data yang anda perlukan. Rujuk kepada contoh pertama kami:

<code class="language-php">/* proxy.php */
$url = "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec ($ch);
curl_close ($ch);
echo $result;</code>

di pelanggan:

<code class="language-javascript">$.getJSON("https://www.php.cn/link/28db3b5e7bfadf38b792da7192530ac1.com/proxy.php", function(json) {
  console.log(json);
})</code>

tetapi kaedah ini juga mempunyai kelemahannya. Sebagai contoh, jika tapak pihak ketiga menggunakan kuki untuk pengesahan, kaedah ini tidak akan berfungsi.

cors

Perkongsian Sumber Sumber Cross-Origin (CORS) adalah spesifikasi W3C yang membolehkan pelayar berkomunikasi di seluruh domain. Ini dilakukan dengan memasukkan pengepala HTTP yang berasaskan akses-Allow-Orow-Origin dalam respons.

merujuk kepada contoh pertama kami, anda boleh menambah yang berikut ke fail .htaccess (dengan asumsi Apache) untuk membenarkan permintaan dari sumber yang berbeza:

<code class="language-javascript">$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);</code>

(jika anda menjalankan pelayan yang bukan Apache, sila periksa di sini: https://www.php.cn/link/819e2e55be8ef0957b56ea94356bfb79 )

anda boleh mengetahui lebih lanjut mengenai CORS dalam salah satu tutorial baru -baru ini: Ketahui lebih lanjut mengenai CORS

Kesimpulan

JSONP membolehkan anda memintas dasar homolog dan sedikit sebanyak membuat panggilan Ajax silang domain. Ia bukan pil sihir, dan sudah tentu ia mempunyai masalah, tetapi dalam beberapa kes ia dapat membuktikan tidak ternilai apabila data diambil dari sumber yang berbeza.

JSONP juga membolehkan anda mengekstrak pelbagai kandungan dari perkhidmatan yang berbeza. Banyak laman web yang terkenal menawarkan perkhidmatan JSONP (seperti Flickr) yang membolehkan anda mengakses kandungan mereka melalui API yang telah ditetapkan. Anda boleh mencari senarai lengkap mereka dalam direktori API ProgrammableWeb.

(berikut adalah bahagian FAQ, yang telah diselaraskan dan dipermudahkan mengikut teks asal untuk mengelakkan maklumat pendua)

Soalan Lazim Mengenai JSONP (FAQ)

• Apakah perbezaan utama antara JSON dan JSONP? Kedua -dua JSON dan JSONP adalah format yang digunakan untuk memproses data antara pelayan dan aplikasi web. Perbezaan utama ialah bagaimana mereka mengendalikan permintaan silang domain. JSON tidak dapat menyokong permintaan silang domain kerana dasar homolog (langkah keselamatan yang dilaksanakan dalam pelayar web). Sebaliknya, JSONP memintas dasar ini dengan menggunakan kaedah populasi, yang membolehkan data diminta dari pelayan dengan domain yang berbeza daripada pelanggan.

• Bagaimanakah JSONP memintas dasar asal yang sama? JSONP memintas dasar homolog dengan menggunakan kaedah padding atau "isi permintaan". Dalam kaedah ini, pelanggan meminta data dari pelayan dalam domain yang berbeza dengan memancarkan fungsi panggil balik ke URL. Pelayan kemudian membungkus data yang diminta dalam fungsi ini dan menghantarnya kembali kepada pelanggan. Pelanggan melaksanakan fungsi ini untuk mengakses data. Kaedah ini membolehkan JSONP mengatasi batasan silang domain yang dikenakan oleh dasar homolog.

• Adakah JSONP selamat? Walaupun JSONP menyediakan penyelesaian untuk dasar homolog, ia mempunyai risiko keselamatan sendiri. Kerana JSONP melibatkan skrip yang diterima dari pelayan, jika pelayan rosak, ia membuka kemungkinan untuk serangan skrip lintas tapak (XSS). Oleh itu, pastikan anda menggunakan JSONP hanya dengan sumber yang dipercayai.

• Bolehkah jsonp mengendalikan respons ralat? Tidak seperti JSON, JSONP tidak mempunyai pengendalian ralat terbina dalam. Jika permintaan JSONP gagal, penyemak imbas tidak membuang ralat dan fungsi panggil balik tidak dilaksanakan. Untuk mengendalikan kesilapan di JSONP, anda boleh melaksanakan mekanisme masa tamat yang mencetuskan ralat jika fungsi panggil balik tidak dilaksanakan dalam masa yang ditentukan.

• Bagaimana membuat permintaan JSONP menggunakan jQuery? JQuery menyediakan cara mudah untuk membuat permintaan JSONP menggunakan kaedah $ .ajax (). Anda perlu menentukan datatype sebagai "jsonp" dalam tetapan $ .ajax ().

• Apakah batasan JSONP? JSONP mempunyai beberapa batasan. Ia hanya menyokong permintaan mendapatkan dan tidak menyokong pos atau kaedah HTTP yang lain. Ia juga tidak mempunyai keupayaan pengendalian ralat. Di samping itu, JSONP menimbulkan risiko keselamatan kerana pendekatannya untuk melangkaui dasar homolog.

• adakah jsonp masih digunakan sekarang? Walaupun JSONP adalah penyelesaian yang popular untuk permintaan silang domain pada masa lalu, CORS kini mempunyai kekerapan penggunaan yang rendah kerana kemunculan CORS (perkongsian sumber silang asal), CORS menyediakan domain yang lebih selamat dan lebih kuat permintaan.

Atas ialah kandungan terperinci JSONP JQuery ' s dijelaskan dengan contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!