Fahami sepintas lalu: Penjelasan terperinci tentang jsonp

Saya percaya bahawa semua orang banyak menggunakan json. Saya tidak pernah mempunyai peluang untuk menggunakan jsonp, tetapi saya sering melihatnya. Saya hanya tahu bahawa ia "digunakan untuk merentas domain" dan saya tidak tahu apa itu. Saya akhirnya memikirkannya hari ini. Mari kita langkah demi langkah untuk mengetahui apa itu jsonp.

Dasar Asal Yang Sama

Pertama sekali, atas sebab keselamatan, penyemak imbas mempunyai mekanisme yang dipanggil dasar asal yang sama menghalang dokumen atau skrip yang dimuatkan daripada satu sumber daripada mendapatkan atau menetapkan atribut dokumen yang dimuatkan daripada sumber lain. Nampaknya saya tidak tahu apa maksudnya, tetapi anda akan mengetahuinya selepas anda mengamalkannya.

1. Cipta dua halaman web sesuka hati

Satu port ialah 2698 dan satu lagi ialah 2701. Secara definisi, ia adalah daripada sumber yang berbeza.

2. Gunakan jQuery untuk memulakan permintaan daripada sumber yang berbeza
Tambahkan butang pada halaman web pada port 2698 dan acara Klik akan memulakan dua permintaan ke domain dengan port 2701.

Salin kod Kod adalah seperti berikut:

$("#getOtherDomainThings").klik(fungsi () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", fungsi (data) {
console.log(data)
})

$.get("http://localhost:2701/home/index", fungsi (data) {
console.log(data)
})
})

Mengikut dasar asal yang sama, ia jelas akan menjadi tragis. Penyemak imbas akan menyekat dan tidak memulakan permintaan sama sekali. (tidak dibenarkan oleh Access-Control-Allow-Origin)

OK, ternyata jsonp adalah untuk menyelesaikan masalah ini.

Keupayaan merentas domain bagi teg skrip
Saya tidak tahu sama ada anda tahu tentang CDN, seperti CDN Microsoft Menggunakannya, halaman web kami tidak perlu menyediakan jQuery, dan tapak web Microsoft akan menyediakannya untuk kami:

Salin kod Kod adalah seperti berikut:

Kembali ke halaman web 2698 port kami, di atas kami mempunyai permintaan untuk fail jQuery dalam domain port 2701 dalam acara Klik, kali ini menggunakan teg skrip untuk meminta.

Salin kod Kod adalah seperti berikut:

Sudah tentu, 200, OK

Halaman web yang sama dengan port 2698 memulakan permintaan untuk domain 2701 Menetapkan atribut scr dalam skrip adalah OK, tetapi cara lain adalah tragis. Mengambil kesempatan daripada keupayaan skrip merentas domain, ini adalah asas jsonp.

Gunakan skrip untuk mendapatkan json daripada sumber yang berbeza
Oleh kerana ia dipanggil jsonp, jelas bahawa tujuannya masih json, dan ia diperoleh merentasi domain. Berdasarkan analisis di atas, mudah untuk difikirkan: gunakan js untuk membina teg skrip, tetapkan url json kepada atribut scr skrip, masukkan skrip ke dalam dom, dan biarkan penyemak imbas mendapatkannya. Amalan:

Salin kod Kod adalah seperti berikut:

fungsi CreateScript(src) {
$("

Artikel terbaru oleh pengarang