cari

Rumah >hujung hadapan web >tutorial js >5 penyelesaian kepada kemahiran js requests_javascript merentas domain

5 penyelesaian kepada kemahiran js requests_javascript merentas domain

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

Penyelesaian untuk data permintaan merentas domain terutamanya termasuk penyelesaian berikut: 

JSONP方式
表单POST方式
服务器代理
Html5的XDomainRequest
Flash request

Arahan berasingan:

1. JSONP:

Pemahaman intuitif:

Ia adalah untuk mendaftarkan fungsi secara dinamik pada klien

fungsi a(data), dan kemudian hantar nama fungsi ke pelayan dan pelayan mengembalikan a({/*json*/}) kepada klien untuk dijalankan, sekali gus memanggil

klien

fungsi a(data), sekali gus mencapai domain silang.

Latar belakang kelahiran:

1. Ajax meminta fail biasa secara langsung, yang mempunyai masalah akses merentas domain tanpa kebenaran tidak kira sama ada halaman statik, halaman web dinamik, perkhidmatan web atau wcf, asalkan ia adalah halaman silang. permintaan domain, ia tidak akan berfungsi.

2. Walau bagaimanapun, apabila memanggil fail js pada halaman web, ia tidak terjejas oleh

ini

3. Promosi lanjut, kami mendapati bahawa semua teg dengan atribut Src mempunyai keupayaan merentas domain, seperti: 855348821b2e8f2cc4b633bf98f064dfa1f02c36ba31691bcfe87b2722de723bd5ba1642137c3f32f4f4493ae923989c

4. Oleh itu, jika anda pada masa ini ingin mengakses data merentas domain melalui bahagian web tulen (kawalan ActiveX, proksi sisi pelayan, Websocket milik HTML5 masa hadapan, dll. tidak disertakan), anda hanya boleh menggunakan kaedah berikut: pada pelayan jauh Cuba muatkan data ke dalam teks dalam format js untuk panggilan pelanggan dan pemprosesan selanjutnya.

5. JSON ialah format data aksara tulen dan boleh disokong secara asli oleh js.

6. Berikut ialah penyelesaiannya: klien web memanggil fail format js yang dijana secara dinamik (biasanya dengan json sebagai akhiran) pada pelayan merentas domain dengan cara yang sama seperti memanggil skrip.

7. Selepas pelanggan berjaya memanggil fail json, ia akan mendapat data yang diperlukan, dan selebihnya adalah untuk memprosesnya mengikut keperluannya sendiri.

8 Untuk memudahkan pelanggan menggunakan data, protokol penghantaran tidak formal telah terbentuk secara beransur-ansur, dipanggil jsonp. Perkara utama protokol ini adalah untuk membenarkan pengguna menghantar parameter panggil balik ke pelayan, dan kemudian apabila pelayan mengembalikan data, ia akan menggunakan parameter panggil balik ini sebagai nama fungsi untuk membungkus data json, supaya pelanggan boleh menyesuaikannya. fungsi sendiri untuk memproses data yang dikembalikan.

Pelaksanaan terperinci:

Sama ada jQuery, extjs atau rangka kerja lain yang menyokong jsonp, kerja yang mereka lakukan di belakang tabir adalah sama Biar saya terangkan pelaksanaan jsonp pada klien langkah demi langkah:

1. Kami tahu bahawa walaupun kod dalam fail js silang domain (yang sudah tentu mematuhi dasar keselamatan skrip web), halaman web boleh dilaksanakan tanpa syarat.

Terdapat kod fail remote.js dalam direktori akar pelayan jauh remoteserver.com seperti berikut:

makluman('Saya adalah fail jauh');

Pelayan tempatan localserver.com mempunyai kod halaman jsonp.html seperti berikut: 

<!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" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

Tidak syak lagi bahawa tetingkap gesaan akan muncul pada halaman, menunjukkan bahawa panggilan merentas domain berjaya.

2. Sekarang kita mentakrifkan fungsi pada halaman jsonp.html, dan kemudian memanggilnya dengan menghantar data dalam remote.js.

Kod halaman jsonp.html adalah seperti berikut: 

<!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 localHandler = function(data){
    alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
  };
  </script>
  <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

Kod fail remote.js adalah seperti berikut:

localHandler({"result":"Saya adalah data yang dibawa oleh remote js"});
Semak keputusan selepas dijalankan Halaman berjaya memunculkan tetingkap segera, menunjukkan bahawa fungsi setempat telah berjaya dipanggil oleh js jauh merentas domain, dan data yang dibawa oleh js jauh juga diterima. Saya sangat gembira kerana tujuan pemerolehan data jauh merentas domain pada asasnya telah dicapai, tetapi persoalan lain timbul. Bagaimanakah caranya untuk saya membiarkan js jauh mengetahui nama fungsi tempatan yang sepatutnya dipanggil? Lagipun, pelayan jsonp perlu menghadapi banyak objek perkhidmatan, dan fungsi tempatan objek perkhidmatan ini berbeza? Jom tengok bawah.

3. Pembangun pintar boleh dengan mudah berfikir bahawa selagi skrip js yang disediakan oleh pelayan dijana secara dinamik, pemanggil boleh lulus parameter untuk memberitahu pelayan "Saya mahu kod js yang memanggil fungsi XXX, sila kembalikannya kepada saya", jadi pelayan boleh menjana skrip js dan bertindak balas mengikut keperluan pelanggan.

Lihat kod halaman jsonp.html: 

<!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 flightHandler = function(data){
    alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
  };
  // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
  var url = "http://flightQuery.com/jsonp/flightResult.aspx&#63;code=CA1998&callback=flightHandler";
  // 创建script标签，设置其属性
  var script = document.createElement('script');
  script.setAttribute('src', url);
  // 把script标签加入head，此时调用开始
  document.getElementsByTagName('head')[0].appendChild(script); 
  </script>
</head>
<body>

</body>
</html>

Kali ini kod telah banyak berubah. Ia tidak lagi menulis fail js jauh, tetapi kod untuk melaksanakan pertanyaan dinamik Ini juga merupakan bahagian teras pelaksanaan klien jsonp ini keseluruhan proses panggilan jsonp.

Kami melihat bahawa parameter kod dihantar dalam URL panggilan, memberitahu pelayan bahawa apa yang saya ingin semak ialah maklumat penerbangan CA1998, dan parameter panggil balik memberitahu pelayan bahawa fungsi panggil balik tempatan saya dipanggil flightHandler, jadi sila lulus keputusan pertanyaan Panggil fungsi ini. 

flightHandler({
  "code": "CA1998",
  "price": 1780,
  "tickets": 5
});

我们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！

4、到这里为止的话，相信你已经能够理解jsonp的客户端实现原理了吧？剩下的就是如何把代码封装一下，以便于与用户界面交互，从而实现多次和重复调用。

什么？你用的是jQuery，想知道jQuery如何实现jsonp调用？好吧，那我就好人做到底，再给你一段jQuery使用jsonp的代码（我们依然沿用上面那个航班信息查询的例子，假定返回jsonp结果不变）：

OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）：

<!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>Untitled Page</title>
   <script type="text/javascript" src=jquery.min.js"></script>
   <script type="text/javascript">
   jQuery(document).ready(function(){ 
    $.ajax({
       type: "get",
       async: false,
       url: "http://flightQuery.com/jsonp/flightResult.aspx&#63;code=CA1998",
       dataType: "jsonp",
       jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
       jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"&#63;"，jQuery会自动为你处理数据
       success: function(json){
         alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
       },
       error: function(){
         alert('fail');
       }
     });
   });
   </script>
   </head>
 <body>
 </body>
 </html>

是不是有点奇怪？为什么我这次没有写flightHandler这个函数呢？而且竟然也运行成功了！哈哈，这就是jQuery的功劳了，jquery在处理jsonp类型的ajax时（还是忍不住吐槽，虽然jquery也把jsonp归入了ajax，但其实它们真的不是一回事儿），自动帮你生成回调函数并把数据取出来供success属性方法来调用，是不是很爽呀？

以上所述就是本文的全部内容了，希望大家能够喜欢。

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：JavaScript melaksanakan kaedah untuk paparan lalai imej latar belakang dalam kotak teks hilang selepas mendapat fokusArtikel seterusnya：JavaScript melaksanakan kaedah untuk paparan lalai imej latar belakang dalam kotak teks hilang selepas mendapat fokus

Artikel berkaitan

Lihat lagi