Saat menghadapi masalah lintas domain dalam pengembangan proyek, mereka umumnya diselesaikan melalui JSONP. Tapi apa itu JSONP dan apa prinsip implementasi. Anda dapat mempelajarinya dengan hati -hati selama waktu luang proyek.
1. Apa itu JSONP?
Untuk memahami JSONP, saya harus menyebutkan JSON, jadi apa itu JSON?
JSON adalah subset dari notasi literal objek dari JavaScript. Karena JSON adalah subset dari JavaScript, itu dapat digunakan dalam bahasa tanpa MUS atau keributan.
JSONP (JSON dengan Padding) adalah protokol tidak resmi yang memungkinkan integrasi tag skrip di sisi server untuk kembali ke klien, dan akses silang domain dicapai melalui bentuk callback JavaScript (ini hanyalah implementasi sederhana dari JSONP).
2. Apa gunanya JSONP?
Karena keterbatasan kebijakan asal-kata, XmlHttpRequest hanya memungkinkan sumber daya sumber saat ini (nama domain, protokol, port). Untuk mengimplementasikan permintaan lintas domain, permintaan lintas domain dapat diimplementasikan melalui tag skrip, dan kemudian menghasilkan data JSON di server dan menjalankan fungsi callback, sehingga menyelesaikan permintaan data lintas domain.
Generasi JSONP
1. Seperti yang kita semua tahu, sumber daya permintaan AJAX dibatasi oleh domain yang sama, apakah mereka sumber daya statis, halaman dinamis, atau layanan web.
2. Pada saat yang sama, kami menemukan bahwa ketika memanggil file JS di halaman web, mereka tidak terpengaruh oleh domain silang (tidak hanya itu, kami juga menemukan bahwa semua tag dengan atribut 'SRC' memiliki kemampuan lintas domain, seperti <ript>, <mmg>, <frame>, dll.)
3. Dapat dibayangkan bahwa saat ini, jika Anda ingin mengakses data di seluruh domain melalui Web (Kontrol Activex, Agen Server, Websockets HTML5, dll.) Hanya ada satu kemungkinan, yaitu, server akan memuat data ke dalam file format JS untuk klien untuk menelepon dan memproses
4. Transmisi Data. Kita tahu bahwa format data karakter murni yang disebut JSON dapat secara ringkas menggambarkan struktur data yang kompleks, dan juga secara alami didukung oleh JS. Ini dapat dengan mudah memproses data dalam format ini pada klien.
5. Solusinya jelas. Sisi web memanggil file JS yang dihasilkan secara dinamis di server cross-domain dengan cara yang sama seperti skrip panggilan. Alasan mengapa server ingin menghasilkan file JS secara dinamis adalah untuk mendapatkan nama fungsi panggilan balik klien dan meneruskan data yang diperlukan oleh klien ke dalam format JSON (atau Pure String).
6. Setelah klien berhasil memanggil file JS, parameter dalam fungsi callback diperoleh. Sisanya adalah pemrosesan data. Metode ini terlihat sangat mirip dengan Ajax, tetapi tidak sama (jQuery merangkum JSONP dan Ajax bersama -sama, dan jika Anda tidak mengerti, Anda akan membingungkannya)
7. Untuk memfasilitasi klien untuk menggunakan data, protokol transmisi informal telah dibentuk secara bertahap. Orang -orang menyebutnya JSONP. Salah satu poin utama dari protokol ini adalah memungkinkan pengguna untuk meneruskan parameter panggilan balik ke server. Ketika server mengembalikan data, parameter callback akan digunakan sebagai nama fungsi untuk membungkus data JSON, sehingga klien dapat menyesuaikan fungsinya sendiri untuk secara otomatis memproses data pengembalian.
Oke, saya tidak tahu apakah Anda mengerti JSONP. Jika tidak, saya akan merangkumnya. Jika Anda tidak memilikinya, jangan pukul saya.
Bahkan, prinsipnya adalah bahwa klien meminta tautan dan menambahkan parameter yang diperlukan. Callback berarti bahwa itu adalah permintaan JSONP (front-end dan back-end dapat disatukan sendiri). Latar belakang mem -parsing tautan permintaan dan menemukan bahwa itu adalah permintaan JSONP. Kemudian menghasilkan metode panggilan, dan secara dinamis menghasilkan string (dapat berupa JSON atau string murni) sesuai dengan parameter permintaan. Dengan cara ini, klien dapat mengakses data dan melakukan pemrosesan selanjutnya.
Setelah banyak mengatakan, bukan gaya saya untuk tidak menambahkan kode, saya menambahkan kode. .
Tes fungsi (data) {console.log (data)} var url = "http://www.x.com/test?a=1&callback=test" // lulus parameter nilai 1 ke x.com/test, dan katakan kepadanya bahwa nama fungsi yang akan dipanggil adalah "uji" // Latar belakang intercepts intercept, mengetahui bahwa a adalah name yang dipanggil adalah "test"/ Pemrosesan latar belakang menghasilkan tes (data fiktif) berikut ("aaaaaaa") test ({a: 1, b: 2}) // Kemudian ujung depan mengakses dan mengeksekusinya melalui tag skrip, skrip var di atas = document.createElement ('skrip'); tag head.setAttribute ('src', url);//freate -skrip '); script. document.geteLementsbyTagname ('head') [0] .AppendChild (skrip); // Kemudian metode uji halaman akan dipanggil, yang merupakan prinsip implementasi JSONP.Tentang realitas jsonp di jQuery
$ .Ajax ({type: "get", url: "http: //xdcn/asych/adv.html? loc = 8 & callback =?", // Ceritakan latar belakang bahwa ini adalah permintaan jsonp, apa yang perlu dipanggil? Pada keberhasilan) ketik: "Posting", // JSONP hanya dapat mengirim permintaan mendapatkan, bahkan jika saya mengatur jenis permintaan ke postdataType: "jsonp", // beri tahu jQuery ini adalah data jsonp, Anda perlu menghasilkan tag skrip untuk memuat jsdata: {a: "1"},/*Success: function (data) {"Metode JSData: {a:" 1 "},/*Success: function (Data) {//Metode yang keberhasilan JSDATA: {a:" 1 "},/*Success: function (Data) {// $ ("body"). append (data);},*/error: function (xmlHttpRequest, textstatus, errorthrown) {//alert(errorthown); }).Setelah membaca kode dan komentar di atas, saya percaya semua orang memahaminya. Meskipun jQuery merangkum JSONP ke Ajax, pada dasarnya berbeda.
Inti dari AJAX adalah untuk mendapatkan konten selain dari halaman ini melalui XMLHTTPREQUEST, sedangkan inti JSONP adalah menambahkan tag <script> secara dinamis untuk memanggil skrip JS yang disediakan oleh server.
Oleh karena itu, perbedaan antara AJAX dan JSONP bukanlah apakah itu domain silang. Ajax juga dapat mencapai domain silang melalui proxy sisi server, dan JSONP sendiri tidak mengecualikan akuisisi data dalam domain yang sama.
Seperti disebutkan di atas, format data JSONP dan AJAX tidak harus menjadi JSON, tetapi juga bisa menjadi string murni.
Singkatnya, JSONP bukan bagian dari Ajax, dan bahkan jika JQuery merangkum JSONP ke Ajax, itu tidak dapat mengubah ini.
Di atas adalah penjelasan terperinci tentang contoh permintaan lintas domain dari JS JSOP yang diperkenalkan kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!