Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang prinsip silang domain js dan dua kemahiran solutions_javascript

Penjelasan terperinci tentang prinsip silang domain js dan dua kemahiran solutions_javascript

WBOYasal: 2016-05-16 15:26:521607semak imbas

1. Apakah itu silang domain

Kami sering menggunakan ajax untuk meminta data daripada pelayan lain pada halaman Pada masa ini, masalah merentas domain akan berlaku pada klien.

Masalah merentas domain disebabkan oleh dasar asal yang sama dalam sekatan keselamatan bahasa JavaScript.

Ringkasnya, dasar asal yang sama bermakna skrip hanya boleh membaca sifat tetingkap dan dokumen daripada sumber yang sama Sumber yang sama di sini merujuk kepada gabungan nama hos, protokol dan nombor port.

Contohnya:

2. Prinsip pelaksanaan

Dalam HTML DOM, teg Skrip boleh mengakses data pada pelayan merentas domain Oleh itu, atribut src skrip boleh ditentukan sebagai URL merentas domain untuk mencapai akses merentas domain

Contohnya:

Kaedah akses ini tidak boleh dilakukan. Tetapi kaedah berikut boleh dilakukan.

Terdapat keperluan untuk data yang dikembalikan, iaitu: data yang dikembalikan oleh pelayan tidak boleh hanya {"Nama":"zhangsan"}

Jika rentetan json ini dikembalikan, kami tidak mempunyai cara untuk merujuk rentetan ini, oleh itu, nilai yang dikembalikan mestilah

var json={"Name":"zhangsan"}, atau json({" Nama":"zhangsan"})

Untuk mengelakkan program daripada melaporkan ralat, kita juga mesti mencipta

fungsi json.

3. Penyelesaian

Pilihan 1
Sisi pelayan:

protected void Page_Load(object sender, EventArgs e)
  {
    string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

    Response.Clear();
    Response.Write(result);
    Response.End();
  }

Pelanggan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">

    var result = null;
    window.onload = function () {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx";

      var head = document.getElementsByTagName("head")[0];
      head.insertBefore(script, head.firstChild);

    };

    function callback(data) {
      result = data;
    }

    function b_click() {
      alert(result.name);
    }
  </script>
</head>
<body>
  <input type="button" value="click me!" onclick="b_click();" />
</body>
</html>

Pilihan 2: Lengkapkan melalui jquery

Melalui kaedah jsonp jquery menggunakan kaedah ini mempunyai keperluan untuk bahagian pelayan.

Sisi pelayan adalah seperti berikut:

  protected void Page_Load(object sender, EventArgs e)
  {
    string callback = Request.QueryString["jsoncallback"];

    string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

    Response.Clear();
    Response.Write(result);
    Response.End();
  }

Pelanggan:

$.ajax({ 
        async: false, 
        url: "http://192.168.0.5/Web/web1.aspx", 
        type: "GET", 
        dataType: 'jsonp', 
        //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象. 
        jsonp: 'jsoncallback', 
        //要传递的参数,没有传参时，也一定要写上 
         data: null, 
        timeout: 5000, 
        //返回Json类型 
         contentType: "application/json;utf-8", 
        //服务器段返回的对象包含name,data属性. 
        success: function (result) { 
          alert(result.date); 
        }, 
        error: function (jqXHR, textStatus, errorThrown) { 
          alert(textStatus); 
        } 
      });

Sebenarnya, apabila kami melaksanakan js ini, js menghantar permintaan sedemikian kepada pelayan:

http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742

Pelayan juga mengembalikan objek berikut dengan sewajarnya:

jsonp1354506338864({"name":"zhangsan","tarikh":"2012-12-03"})

Pada ketika ini, keperluan untuk data sampel merentas domain direalisasikan.

Di atas adalah pengenalan kepada prinsip merentas domain js dan dua penyelesaian saya harap ia akan membantu semua orang dalam mempelajari mata pengetahuan merentas domain Anda juga boleh menggabungkannya dengan artikel lain yang berkaitan untuk kajian dan penyelidikan.

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：Bagaimana untuk menulis peta haba dalam kemahiran javascript_javascriptArtikel seterusnya：Bagaimana untuk menulis peta haba dalam kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi