Fahami sepintas lalu: Penjelasan terperinci tentang jsonp_jquery

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) {
$("<script>/script>").attr("src", src).appendTo("body")<br /> }<br /> </script>

Tambahkan acara butang untuk mengujinya:

Salin kod Kod adalah seperti berikut:

$("#getOtherDomainJson").klik(fungsi () {
$.get('http://localhost:2701/home/somejson', fungsi (data) {
console.log(data)
})
})

Pertama sekali, dalam penyemak imbas pertama, Url http://localhost:2701/home/somejson memang mempunyai json dan menggunakan teg skrip pada halaman web 2698 untuk meminta Url 2701 juga 200 OK, tetapi Ralat sintaks js dilaporkan di bahagian bawah. Ternyata selepas memuatkan dengan teg skrip, respons akan dilaksanakan serta-merta kerana js jelas sekali {"Email":"zhww@outlook.com","Remark":"I come from the far east"} bukanlah sebuah. kenyataan js undang-undang.

Gunakan skrip untuk mendapatkan jsonp asing

Jelas sekali, meletakkan json di atas ke dalam kaedah panggil balik adalah cara paling mudah. Sebagai contoh, ia menjadi seperti ini:

Jika kaedah jsonpcallback wujud, maka jsonpcallback({"Email":"zhww@outlook.com","Remark":"Saya datang dari timur jauh"}) ialah pernyataan js yang sah.

Memandangkan pelayan tidak mengetahui apakah panggilan balik pelanggan, adalah mustahil untuk mengekodkannya ke dalam jsonpcallback, jadi ia membawa QueryString untuk membolehkan pelanggan memberitahu pelayan apakah kaedah panggil balik Sudah tentu, kunci QueryString mesti mematuhi perjanjian pelayan, seperti di atas Ia adalah "panggilan balik".

Tambah fungsi panggil balik:

Salin kod Kod adalah seperti berikut:

fungsi jsonpcallback(json) {
console.log(json)
}

Tukar sedikit parameter kaedah sebelumnya:

Salin kod Kod adalah seperti berikut:

$("#getJsonpByHand").klik(fungsi () {
CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

200OK, pelayan mengembalikan jsonpcallback({"Email":"zhww@outlook.com","Remark":"Saya datang dari timur jauh"}). dilaksanakan. OK mendapat json dengan jayanya. Betul, ini semua tentang jsonp.

Gunakan jQuery untuk mendapatkan jsonp
Dalam kaedah di atas, anda perlu memasukkan teg skrip dan mentakrifkan panggilan balik, yang agak menyusahkan Anda boleh menggunakan jQuery untuk mendapatkan data json yang dikehendaki secara langsung, sama seperti jsonp di atas:

Salin kod Kod adalah seperti berikut:

$("#getJsonpByJquery").klik(fungsi () {
$.ajax({
​ url: 'http://localhost:2701/home/somejsonp',
         dataType: "jsonp",
         jsonp: "panggilan balik",
Kejayaan: fungsi (data) {
console.log(data)
}
})
})

Keputusan yang diperoleh adalah sama seperti di atas.

Ringkasan

Dalam satu ayat, anda boleh menggunakan teg skrip untuk memintas dasar asal yang sama dan mendapatkan data seperti ini jsonpcallback ialah kaedah panggil balik yang wujud pada halaman dan parameternya ialah json yang diingini.

Salin kod Kod adalah seperti berikut:

jsonpcallback({"Emel":"zhww@outlook.com","Remark":"Saya datang dari timur jauh"})

TAMBAH JS asli:

Salin kod Kod adalah seperti berikut:

klik