跨域之见解

  1. 1、协议、域名、端口分别指的是什么？

  http://mail.163.com/index.html

(1)http://  :这个是协议，也就是HTTP超文本传输协议，也就是网页在网上传输的协议。

(2)mail ：这个是服务器名，代表着是一个邮箱服务器，所以是mail.

(3)163.com  :这个是域名，是用来定位网站的独一无二的名字。

(4)mail.163.com  ：这个是网站名，由服务器名+域名组成。

2、什么是跨域？

概念：同源策略： 只要协议、域名、端口有一个不同，都被当做不同的跨域。 

例子：例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了。

3、解决跨域的几种方法

  • document.domain+iframe（子域名代理）；
  • jsonp实现跨越；
  • postMessage实现跨越；
  • CORS服务端解决跨域。

jsonp:

jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

jsonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="./js/jquery.js"></script>
 7 <script type="text/javascript">
 8 $(document).ready(function(){
 9     var name = 'xiawenke';
10     var sex = 'man';
11     var address = 'beijing';
12     var looks = 'handsome ';
13      $.ajax({
14          type : 'get',
15          url:'http://192.168.31.137/train/test/testjsonp',
16          data : {
17             name : name,
18             sex : sex,
19             address : address,
20             looks : looks,
21         },
22         cache :false,
23         jsonp: "callback",
24         jsonpCallback:"success",
25         dataType : 'jsonp',
26         success:function(data){
27             alert(data);
28         },
29         error:function(data){
30             alert('error');
31         }        
32     });
33 });
34 </script>
35 </head>
36 <body>
37 <input id='inputtest' value='546' name='inputtest'>
38 <div id='testdiv'></div>
39 </body>
40 </html>
jsonp 传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)

jsonpCallback 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

H5中的postMessage 方法：

  1. 源 = 协议(http/https)+主机(localhost/其他域名)+端口号，只要有一个不一样，那么两个网页就是不同的源，在浏览器会实现JavaScript的同源策略，对于不同的源是不能通信的，但是Html5实现了postMessage标准。

  2. 理解postMessage实现跨文档消息通信其实不是很难，就是发送方用postMessage给接受方一个消息，然后接收方监听message事件（事件的驱动），通过messageEvent中的data来获取发送方发送的消息，origin来获取发送方所在的源。

 

  1. 1 <iframe src="http://localhost:8080/boring.html" ></iframe> 

    1 window.addEventListener( "message",  
2         function(e){  
3             alert(e.data);  
4         },false);

    发送方：

    <button id="btn">  
            press  
</button>
    document.getElementById("btn").onclick = function() {  
         //localhost:8020就是发送的url的源  
         //记住要写top.postMessage或者是parent.message，对于top和parent区别，google一大堆  
         //千万不要写window.postMessage  
      top.postMessage("hello", "http://localhost:8020");  
  }

     



posted @ 2017-05-07 15:44  前路坎坷不言弃つ  阅读(121)  评论(0)    收藏  举报