Ringkasan beberapa kaedah untuk mencapai js merentas domain (ping gambar, JSONP dan CORS)_kemahiran javascript

Merentas domain

Walaupun terdapat dasar asal yang sama, domain silang masih sangat biasa dalam js, termasuk document.domain, window.name, ping imej, jsonp dan CORS Berikut ialah ringkasan ringkas ping imej, jsonp, dan persiapan CORS lupa.

Ping gambar

Imej boleh dimuatkan daripada mana-mana URL, jadi menetapkan src img kepada URL domain lain boleh mencapai rentas domain yang mudah Anda boleh menggunakan peristiwa onload dan onerror untuk menentukan sama ada respons telah diterima.

var img=new Image();
img.src='http://www.jb51.net';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

Objek img baharu dibuat di sini URL yang diberikan ialah alamat blog Ini adalah peristiwa ralat, jadi ralat muncul jika URL ditukar kepada imej http://images.jb51. net//710118 /o_MacBook Air.png, kejayaan maklumat pemuatan beban akan muncul, sekali gus mencapai rentas domain yang mudah.

Menggunakan ping imej merentas domain, anda hanya boleh menghantar mendapatkan permintaan dan anda tidak boleh mengakses teks respons Anda hanya boleh memantau sama ada terdapat respons, yang boleh digunakan untuk menjejak klik iklan.

jsonp

jsonp ialah json dengan fungsi panggil balik Nama asalnya ialah json dengan padding Ia diterjemahkan sebagai json berlapis dan parameter json.

Oleh kerana src skrip boleh merentas domain, tambahkan parameter panggil balik selepas URL yang dihantar dan hantar ke pelayan Kemudian data yang dikembalikan oleh pelayan akan digunakan sebagai parameter panggilan balik ini oleh diri kita sendiri, ia boleh menerima data json untuk diproses.

Kod mudah adalah seperti berikut:

<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/&#63;callback=call'></script>

Di sini, kami menetapkan src skrip kepada http://freegeoip.net/json/?callback=call, iaitu API untuk mendapatkan alamat IP pengguna (jika berminat, anda boleh klik di sini untuk melihat ), dan kemudian sambungkan panggilan balik sebagai parameter dalam URL, dan data json yang dikembalikan akan digunakan sebagai parameter panggilan balik Di sini kami mentakrifkan panggilan balik sebagai fungsi panggilan, iaitu, data json yang dikembalikan diluluskan sebagai parameter panggilan Fungsi panggilan ini Hanya bandar pengguna muncul. Hasil keluaran di sini ialah Hebei. Untuk maklumat IP lain, anda boleh menyemak tapak web rasmi, yang mempunyai senarai terperinci, seperti nama_negara, zon_masa, dsb.

CORS (Perkongsian Sumber silang)

CORS ialah perkongsian sumber merentas tapak Ia kira-kira sama dengan ajax untuk IE, objek xdr, XDomainRequest, adalah satu-satunya perkara yang boleh kita akses ialah responseText kaedah adalah lebih kurang sama dengan xhr, dan buka dan hantar juga diperlukan.

Untuk penyemak imbas lain seperti ff dan chrome, xhr digunakan di sini myvin hanya menggunakan xhr untuk menunjukkan jika anda ingin mencapai penyemak imbas silang, anda boleh bekerjasama dengan xdr untuk mencapai keserasian.

xhr adalah seperti berikut:

var xhr=new XMLHttpRequest();   
var url="http://www.jb51.net";
xhr.open('GET', url); 
xhr.send(null);

URL yang digunakan di sini ialah http://www.jb51.net Satu-satunya perbezaan daripada ajax ialah url menggunakan alamat mutlak merentas domain Alamat relatif dalam halaman ini digunakan dalam ajax alamat atau alamat mutlak.

Lihat konsol, ff40.0.3 digunakan di sini, dan maklumat yang dipaparkan adalah seperti berikut:

Permintaan silang asal disekat: Dasar asal yang sama melarang membaca sumber jauh di http://www.jb51.net. (Punca: pengepala CORS 'Access-Control-Allow-Origin' tiada).

Jadi terdapat satu lagi langkah untuk melaksanakan merentas domain menggunakan CORS, iaitu menetapkan Access-Control-Allow-Origin pada bahagian pelayan.