Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang contoh kaedah silang domain dalam kemahiran js_javascript

Penjelasan terperinci tentang contoh kaedah silang domain dalam kemahiran js_javascript

WBOYasal: 2016-05-16 15:53:231151semak imbas

Contoh dalam artikel ini menerangkan kaedah pelaksanaan merentas domain dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Disebabkan sekatan dasar asal yang sama, XMLHttpRequest hanya dibenarkan meminta sumber daripada sumber semasa (termasuk nama domain, protokol dan port).

Perbezaan antara json dan jsonp:

JSON ialah format pertukaran data, manakala JSONP ialah protokol pertukaran data merentas domain tidak rasmi yang dibuat oleh pembangun.

Teg skrip

sering digunakan untuk memuatkan sumber daripada domain yang berbeza dan boleh memintas dasar asal yang sama. (Sesiapa sahaja yang mempunyai atribut src boleh mendapatkan fail asing).
Jika data jauh yang diminta itu sendiri ialah js boleh laku, maka js ini akan dilaksanakan (bersamaan dengan eval).

Kaedah 1:

Gunakan tag skrip untuk meminta (fdf5dd3711dd56a5f8e25d980d79eadb2cacc6d41bbb37262a98f745aa00fbf0)
Sebelum menggunakan teg skrip untuk meminta, mula-mula isytiharkan fungsi panggil balik,

<script>
function 回调函数名(data数据){ 。。。。 }
</script>
<script src="http://....jsp&#63;callback=回调函数名"></script>

Menggunakan JSON untuk memindahkan objek javascript ialah cara paling mudah Kaedah komunikasi merentas domain ini dipanggil JSONP.

Rentetan tampalan pelayan jauh:

Nama fungsi panggil balik ({"name1":"data1","name2","data2"})

Data json jenis ini disatukan di latar belakang dan dikembalikan kepada klien dalam bentuk menghantar parameter melalui fungsi panggil balik
(Anda boleh memanggilnya terus, yang bersamaan dengan pemprosesan eval rentetan yang diperoleh)

Contohnya:

function databack(data){ alert(data.name1) }
// 会输出显示"data1"

Kaedah 2:

Lebih mudah untuk melaksanakan kaedah pemuatan asing dengan jquery (sama seperti kaedah permintaan tak segerak bagi ajax)

$.ajax({
  type : "get",
  dataType:"json",
  success : function(data){ alert(data.name1) };
})

atau bentuk singkatan

var url = "http://.....jsp&#63;callback=&#63;";
// 在jquery中此处的callback值可以为任意，
// 因为jquery进行处理后都是利用success回调函数进行数据的接受；
$.getJSON( url, function(data){ alert(data.name1) });

Kaedah 3:

Proksi pelayan merentas domain Ajax

Sediakan program proksi (proxy.jsp...) di latar belakang sumber yang sama;
Berinteraksi dengan pelayan dalam domain asing di bahagian pelayan.

penghantaran data bahagian hadapan jquery:

Contohnya:

$.get(
　　 'http://。。。.jsp', // 代理程序地址
　　 {
　　  name1 : "data1",
　　  name2 : "data2"
　　 },
　　 function(data){
　　 if(data == 1) alert('发送成功！');
　　 }
);

Pemprosesan data latar belakang:

String data1 = request.getParameter("name1");
........
// 此处的url为另一域下的地址并带有参数
String url = "http://.....com/.../sss.jsp&#63;" +　"name1=" + data1+　"name2=" + data2;
// 跳转到另一个域进行数据的处理并返回json格式的数据
request.getRequestDispatcher(url).forward(request,response);

Kaedah 4:

Gunakan atribut src bagi teg iframe untuk melaksanakan akses merentas domain, simpan nilai yang diperoleh dalam iframe semasa, dan kemudian dapatkan nilai dalam badan iframe pada halaman yang sama.

<body>
  <div id="show"></div>
  <iframe id="frame" style="display: none;"></iframe>
</body>
<script>
$("#frame").attr("src", "路径&#63;time=" + new Date().getTime()).load(function(){
 // 获取iframe标签的值并进行获取，显示到页面
 $("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text()+ " ]");
});
</script>

Kaedah 5:

Soket web dalam HTML5 boleh menyediakan akses merentas domain;

Buat objek websocket:

Salin kod Kod adalah seperti berikut:

var ws = new WebSocket(url);

Jenis acara utama yang diproses adalah (onopen, onclose, onmessage, onerror);

Contohnya:

ws.onopen = function(){
console.log("open")；
// 向后台发送数据
ws.send("open");
}

Latar belakang boleh berupa java, php, nodejs, dsb. Untuk pemprosesan data, gunakan acara time onmessage untuk melaksanakan pemprosesan bahagian hadapan pada nilai yang dikembalikan.

ws.onmessage = function(eve){
console.log(eve.data);
}

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang penggunaan Sesi klien dalam Node.js programming_node.jsArtikel seterusnya：Penjelasan terperinci tentang penggunaan Sesi klien dalam Node.js programming_node.js

Artikel berkaitan

Lihat lagi