跨域问题

来源:互联网 发布:校园网络直播系统 编辑:程序博客网 时间:2024/06/16 04:27

首先先解释名词: 

同源策略,浏览器的一种安全策略,只有域名协议端口完全一直才能访问。

http://www.liuyixiang.cn:80/a.html

协议         域名         端口

为什么会有这种策略呢?

大家看下下面的代码:

<iframe src="http:jd.com" frameborder="0"></iframe><script> // 接下来,我们在本地添加一些操作,是不是就能获取相关私密信息了?</script>

所以,处于安全的考虑,浏览器是不支持我们跨域访问其它页面的对象的。

也就是说:

1. 不允许跨域操作不同域的dom,(包括cookie)

2. 不允许跨域Ajax

可是在很多情况下,我们是需要跨域访问相关数据的,比如一个网站很大,比如说qq:

v.qq.com / email.qq.com ,不同域之间也要访问数据,该怎么办呢?


目前给大家解释三种解决办法:

1.代理服务器(后台技术,这里不作解释)

2.JSONP 

3.document.domain 和 iframe 


接下来就给大家介绍下document.domain 和iframe 是如何实现跨域的

//此方法解决跨域问题要求一级域名一致//步骤://1. 首先要在不同域的两个文档里都设置:document.domain = 'liuyixiang.cn'//2. 在父窗口中创建iframe,并将它隐藏//假设路径是: http://blog.liuyixiang.cn/son.html<!DOCTYPE html><html><head><title></title></head><body><p id="p1">需要被跨域访问的数据</p><script type="text/javascript">document.domain = 'liuyixiang.cn';</script></body></html>//假设路径是: http://liuyixiang.cn/father.html<!DOCTYPE html><html><head><title></title></head><body><script type="text/javascript">document.domain = 'liuyixiang.cn';var iframe = document.createElement('iframe');ifram.src = 'http://blog.liuyixiang.cn/son.html';ifram.style.display = 'none';document.body.appendChild(iframe);iframe.onload = function(){var doc = iframe.contentWindow.document || iframe.contentDocument;// 这里就可以操作son.html了// 比如说我们改变下字体颜色doc.getElementById("p1").style.color = 'red';// 当然,如果我们想操作father.html 就直接documentiframe.onload = null;}</script></body></html>

接下来在给大家介绍下jsonp是如何实现跨域的:(会有点难哦,需要懂一点点后台语言)

先来讲下jsonp的跨域原理:

实际上是利用JavaScript标签具有可跨域性的特点,由服务端返回一个预先定义好的JavaScript函数的调用,并将服务端数据以该函数参数的形式传递过来,此方法需要前后端配合来实现完成。

先来解释下JavaScript标签具有可跨域性的原因,我们写一个html文档需要jQuery框架时,引用别人写好的JQuery的CND,有没有想过跨域问题,哈哈,因为浏览器没有管,所以,JavaScript标签是具有可跨域性的,但我们导入JavaScript 时,src的后缀名并不能代表什么,关键是看服务器返回的文本内容,比如一个js文件也可以用.php结尾,只要我们指定了它的Content-type:text/javascrip,告诉浏览器返回的是JavaScript。如果返回的是一个事先声明好的函数调用,那么在这个函数调用过程中,将跨域请求的数据以实参传递过来,一般是json格式。

所以结合src的可跨域性和Content-type指定文档类型两个方面,就可以实现跨域了。

JSONP的本质就是服务端返回一个JavaScript函数调用,而这个函数事先已经本声明了。 有没有晕啊?2333把基本语法写出来大家瞧下

<!DOCTYPE html><html><head><title></title></head><body><script type="text/javascript">function jsonp(data){//此处的data为跨域获得的数据,拿来就可以直接用了}</script><!--接下来是一个跨域请求,并传递参数--><!--此处简单给大家介绍下后台代码:伪码说明下首先后台先获取callback参数,然后执行执行的时候,会把后台跨域需要访问的数据当作实际参数传入--><script type="text/javascript" src="http://liuyixiang.cn/service.php?callback=jsonp"></script><!--这样呢,用JavaScript实现就完成了--></body></html>
注意:通过jsonp跨域请求只能用get方法,因为我们可以看到请求参数就在url中

接下来,介绍下在JQuery中如何Ajax实现跨域访问:

先介绍下Ajax请求的两种用法:

1.发起XMLHttpRequest

2.跨域访问

之前,我们已经介绍了在Jquey中如何运用Ajax,也就是第一种,现在我们来介绍下第二种

<!DOCTYPE html><html><head><title></title></head><body><!--首先肯定是要导入jQuery了233--><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$.ajax({type:'post',url:'htttp://liuyixiang.cn/service.php',dataType:'jsonp', // 注意此属性为跨域访问的关键属性// 解释:// 当我们设置dataType:'jsonp'后,Ajax内部就不会再创建 XMLHttpRequest对象// 而是在head中创建script元素,并自动设置属性src = url?callback=jsonp(随机生成)// 来模拟之前js的写法jsonp:'callback',//指定服务器端接受参数key的名称,默认为callback,此处要是更改,后台也要变化jsonpCallback:'test',// 指定回调函数,默认会自动生成,test是预先定义好的函数,需要我们自己写。// 一般情况下,最后这两种属性都不需要设置success:function(data){// data即为服务端传来的数据了}});</script></body></html>

上面就是用Ajax 来实现跨域,接下来我们写一个小例子来看下:

ak是错的,大家不用试了,我们来调用下百度天气服务的PAI,只是一个用Ajax实现跨域的例子

<script type="text/javascript">$.ajax({type:"get",url:'http://api.map.baidu.com/telematics/v3/weather',dataType:'jsonp',data:{ak:'3L8K8EZ4NxUQ4QzxpI74cL3VCZzIX3ur',location:'北京',output:'json',},success:function(info){// ..操作就行}});</script>


请求参数:

data{

ak:'..',

location:'北京',

}

会自动处理的,


当我们把返回结果设置为json时,通过success:function(data){},data 即为我们要处理的json对象了。


原创粉丝点击