1. Apa itu domain silang?
Karena browser mengadopsi pembatasan kebijakan asal-kata untuk alasan keamanan, jQuery tidak dapat secara langsung mengoperasikan objek atau data di seluruh nama domain. Misalnya: A.com
Halaman A.html tidak dapat mengoperasikan objek atau data halaman B.html di bawah nama domain B.com menggunakan jQuery, dan secara default, nama domain test.a.com tidak dapat dioperasikan.
Objek atau data test.html. Selama jQuery memenuhi kondisi berikut, itu akan dianggap sebagai nama domain lintas:
1. Domain utamanya sama, subdomain berbeda, seperti xxx.aaa.com dan yyy.aaa.com
2. Nama domainnya sama, tetapi portnya berbeda, seperti xxx.aaa.com:8000 dan xxx.aaa.com
3. Nama domainnya sama, tetapi protokolnya berbeda, seperti http://www.aaa.com/ dan https://www.aaa.com/
Hanya jika protokol, nama domain, dan port adalah jQuery yang persis sama akan dianggap bukan nama domain lintas.
2. Solusi untuk objek operasi name lintas domain jQuery
1. Situasi kedatangan pertama nama domain tingkat atas
Secara default, halaman A.html di bawah nama domain A.com tidak dapat mengoperasikan objek atau data test.html di bawah nama domain test.a.com menggunakan jQuery. Tetapi untuk situasi yang sama seperti nama domain tingkat atas, cukup peroleh ulang dokumen.domain = A.com di A.html dan test.html.
2. Situasi di mana nama domain tingkat atas berbeda
Ada dua metode untuk halaman A.html di bawah nama domain A.com, $ .getjson dan $ .Ajax
(1) Domain silang melalui Ajax JQuery, yang sebenarnya diimplementasikan menggunakan metode JSONP.
JSONP adalah singkatan dari JSON dengan padding dalam bahasa Inggris. Ini memungkinkan pembuatan tag skrip di sisi server untuk kembali ke klien, yaitu secara dinamis menghasilkan tag JavaScript.
Pembacaan data direalisasikan melalui bentuk panggilan balik JavaScript.
Kode sampel untuk sisi halaman HTML:
Kodenya adalah sebagai berikut:
// Pertama-tama, Anda perlu memperkenalkan jQuery's jQuery (dokumen) .ready (function () {$ .Ajax ({type: "get", // jquey tidak mendukung metode post-domain async: false, false: "http://api.vevb.com/apookools/Ajax_prop. "JSONP", // ditempelkan ke pawang permintaan untuk mendapatkan nama parameter nama fungsi panggilan balik JSONP (default: callback) jsonp: "jsoncallback", // nama fungsi callback jsonp kustom adalah fungsi random default yang akan dilakukan secara otomatis oleh jQuery: "sugil_jsonpcallback", JONSOLABLATE ONDOMS THE CONSOMINING ONDOMSED ONDOMSED ONDOMSED ONDOMES ONDOMES ONDOMED ONDOME DOKSED ONDOMED ONDOMED ONDOMED ONDOMED OFFOME ONDOMIAD ONDOMED OFFOMTOME ONCOAING ONDOMED ON AFOMATIONAL LAGIONAL LUCKAIN TETOMED ON AFOMATIONAL: " dieksekusi secara dinamis.Kode sampel sisi server, ambil Java sebagai contoh:
Kode sisi server adalah titik kunci. Saya awalnya berpikir bahwa selama klien dapat secara langsung mengakses di seluruh domain melalui JSONP, itu tidak terjadi, dan dukungan sisi server diperlukan.
Kodenya adalah sebagai berikut:
public void jsonptest () melempar ioException {httpservletRequest request = servletActionContext.getRequest (); HttpservletResponse response = servletActionContext.getResponse (); // Dapatkan nama fungsi callback berdasarkan nama parameter dari fungsi callback JSONP yang ditentukan oleh html // nilai callbackName sebenarnya: success_jsonpcallback string callbackName = (string) request.getAttribute ("jsoncallback"); // Simpul dengan mudah mensimulasikan string JSON. Faktanya, Anda dapat menggunakan Google GSON untuk mengonversi, dan berapa kali disambung melalui splicing string // {"name": "Zhang San", "Age": 28} /// Ini untuk melarikan diri dari "tanda. String jsonstr =" {/"name/":/"Zhang San/",/"usia/": 28} "; Success_jsonpcallback ({"name": "Zhang San", "Age": 28}) string renderstr = callbackName+"("+jsonstr+")";Prinsip JSONP:
Pertama -tama daftarkan panggilan balik (seperti 'jsoncallback') pada klien, dan kemudian lulus nama panggilan balik (seperti: success_jsonpcallback) ke fungsi pemrosesan yang sesuai di sisi server.
Server menghasilkan data JSON yang perlu dikembalikan ke klien. Kemudian, dalam bentuk sintaks JavaScript, suatu fungsi dihasilkan, dan nama fungsi adalah nilai parameter yang diteruskan (jsoncallback) (Success_jsonpcallback).
Akhirnya, data JSON ditempatkan langsung ke fungsi sebagai parameter, sehingga menghasilkan dokumen sintaks JS dan mengembalikannya ke klien.
Browser klien mem -parsing tag skrip dan menggunakan data yang dikembalikan oleh server sebagai parameter.
Ini diteruskan ke fungsi callback yang telah ditentukan sebelumnya oleh klien (seperti pada contoh di atas, keberhasilan: fungsi (JSON) yang dienkapsulasi oleh metode jQuery $ .AJAX ()).
Bahkan, domain lintas memuat data dengan menambahkan skrip secara dinamis, dan data tidak dapat diperoleh secara langsung, sehingga fungsi panggilan balik diperlukan.
(2) Gunakan getjson jQuery untuk membaca data di seluruh domain
Faktanya, prinsip mendasar dari metode Getjson sama dengan cara Ajax menggunakan JSONP.
Getjson biasanya digunakan di jQuery untuk menelepon untuk mendapatkan data jarak jauh dan mengembalikannya melalui format JSON. Prototipe fungsi adalah sebagai berikut:
jquery.getjson (url, data, keberhasilan (data, status, xhr))
Deskripsi parameter
URL diperlukan. Menentukan URL mana yang akan dikirim ke permintaan.
Data adalah opsional. Menentukan data yang dikirim ke server bersama dengan permintaan.
Sukses (data, status, XHR) adalah opsional. Menentukan fungsi yang akan dijalankan saat permintaan berhasil.
Parameter tambahan:
respons - berisi data hasil dari permintaan
Status - berisi status permintaan
xhr - Berisi objek XMLHTTPREQUEST
Fungsi ini disingkat fungsi AJAX, yang sebenarnya setara dengan:
Kodenya adalah sebagai berikut:
$ .AJAX ({url: url, data: data, sukses: callback, dataPePe: json});Mari kita kembali ke intinya, mari kita lihat cara menggunakan GETJSON untuk mendapatkan data di seluruh domain.
Kode sampel untuk halaman HTML:
Kodenya adalah sebagai berikut:
$ .getjson ("http://api.vevb.com/apitools/ajax_props.do&jsoncallback=?", function (data) {alert (data);});Prinsip Eksekusi:
Saat mengirim permintaan, Anda harus melewati nama fungsi panggilan balik balik ke sisi server. Sisi server mendapatkan nama fungsi callback dan kemudian mengembalikan data pengembalian ke klien dalam bentuk parameter, sehingga klien dapat memanggilnya.
Oleh karena itu, setelah alamat URL permintaan, Anda harus menggunakan parameter seperti JSonCallback =?, Dan jQuery akan secara otomatis mengganti? Nomor dengan nama fungsi callback yang dihasilkan secara otomatis.
Jadi permintaan aktual terakhir adalah: http://api.vevb.com/apitools/ajax_props.do&jsoncallback=jsonp1322444222697
Jadi, jika Anda ingin membandingkannya dengan metode AJAX, yaitu, fungsi callback adalah salah satu nama fungsi yang dihasilkan secara otomatis dan yang lainnya adalah nama fungsi yang ditentukan secara manual.
Perhatikan poin -poin berikut:
1. Alamat yang dikirim ke penerima data harus ditambahkan dengan parameter seperti callback =?, Dan ini? adalah nama metode callback yang akan secara otomatis diganti dengan jQuery. (Di JQuery 1.4, Anda dapat menentukan nama metode panggilan balik sendiri)
2. Perhatikan bahwa data yang dikirim oleh skrip JS tidak dapat ditulis sebagai var data = "{'username': 'sanjer', 'userid': '110'}"; tetapi harus ditulis sebagai var data = {username: 'sanjer', userid: '110'}, dan Anda harus memperhatikan poin ini. Untuk menerima data yang dikembalikan oleh server, server harus merangkum data menjadi string format JSON dan mengembalikannya bersama dengan nilai callback. (Harap baca kode sampel di atas dengan cermat).
3. Saat menelepon metode $ .getjson JQuery, JQuery memiliki pemrosesan sendiri, yang sebenarnya diminta melalui SCR skrip, tetapi Anda harus tahu bahwa data akhirnya dikirim melalui URL melalui GET. Ini menentukan bahwa jumlah data yang dikirim tidak terlalu banyak, jika tidak, URL akan gagal menerimanya terlalu lama (tidak mungkin untuk mengirimkannya dalam metode pos ketika metode GETJSON diajukan).
Jika Anda ingin mengirim data besar di seluruh domain, Anda dapat memilih metode AJAX yang disediakan oleh jQuery, dan sebaiknya tidak menggunakan metode GETJSON.
4. Contoh -contoh di atas didasarkan pada premis bahwa kedua aspek pengembangan berada di bawah kendali Anda. Juga, hati -hati bahwa faktor keamanan program server tidak tinggi (disarankan agar Anda tidak menempatkan unit pemrosesan logika yang penting dan sensitif pada ujung penerima data).
Metode Java di atas dikombinasikan dengan jQuery untuk mencapai data akuisisi nama lintas domain adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.