关于跨域
2017-03-22 21:08 晓九已存在 阅读(121) 评论(0) 编辑 收藏 举报简单的理解就是javascript的同源策略的限制,一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源是指主机名,协议,端口号的组合。
a.com域名下个js无法操作b.com或是c.a.com域名下的对象。
跨域的解决方法:
1.document.domain +iframe
2.动态创建script,因为script标签不受同源策略的限制
3.location.hash + iframe
4.window.name + iframe
5.HTML5的window.postMessage方法
6.JSONP包含两部分:回调函数和数据
7.web sockets
其中关于jsonp的基本原理
其本质是利用了标签具有可跨域的特性,由服务端返回预先定义好的javascript函数的调用,并且将服务端数据以该函数参数的形式传递过来。
<script type="text/javascript">
function jsonpCallback(result) {
alert(result);
}
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>
服务端PHP代码 (services.php):
- <?php
- //服务端返回JSON数据
- $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
- $result=json_encode($arr);
- //echo $_GET['callback'].'("Hello,World!")';
- //echo $_GET['callback']."($result)";
- //动态执行回调函数
- $callback=$_GET['callback'];
- echo $callback."($result)";
首先在客户端注册一个callback,然后把callback的名字传给服务器,此时,服务器先生称json数据,然后以js语法的方式,生成一个function,function的名字就是传递上来的参数jsonp,最后将json数据直接以入参的方式,放置到function中,这样就生成了一段js语法的文档,返回给客户端。客户端浏览器解析script标签,并执行返回的js文档,此时数据作为参数,传入到了客户端预先定义好的callback函数里。