cari

Rumah  >  Artikel  >  hujung hadapan web  >  Ringkasan kaedah untuk pelaksanaan merentas domain dalam kemahiran javascript_javascript

Ringkasan kaedah untuk pelaksanaan merentas domain dalam kemahiran javascript_javascript

WBOY
WBOYasal
2016-05-16 15:52:481169semak imbas

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 interaksi 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 teg skrip untuk meminta (f76e6c8c55bc1455623c3c1032a63d302cacc6d41bbb37262a98f745aa00fbf0)
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.
 
Pelayan jauh menggabungkan rentetan:
Nama fungsi panggil balik ({"name1":"data1","name2","data2"})
Data json jenis ini disatukan di latar belakang dan dikembalikan kepada klien menggunakan fungsi panggil balik untuk menghantar parameter
(Anda boleh memanggilnya terus, yang bersamaan dengan pemprosesan eval rentetan yang diperoleh)
Contohnya: function databack(data){ alert(data.name1) } // Akan mengeluarkan dan memaparkan "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?callback=?"; // Nilai panggil balik di sini dalam jquery boleh sewenang-wenangnya, kerana

Selepas jquery diproses, fungsi panggil balik kejayaan digunakan untuk menerima data
$.getJSON( url, fungsi(data){ alert(data.name1) });

Kaedah tiga:

Proksi pelayan merentas domain Ajax
Sediakan program proksi (proxy.jsp...) di latar belakang asal 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 tag 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:

Websocket dalam HTML5 boleh menyediakan akses merentas domain
Cipta objek websocket:

　var ws = WebSocket(url) baharu;

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);

　　　　}

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：Perbincangan ringkas tentang pemformatan kotak tarikh jQuery.easyui time_jqueryArtikel seterusnya：Perbincangan ringkas tentang pemformatan kotak tarikh jQuery.easyui time_jquery

Artikel berkaitan

Lihat lagi