前两天跟一个朋友谈到跨域的问题，对于跨域，搞清原理，其实感觉应该是一个很简单的东西，理理思路，往下阅读这篇文章吧....
js跨域之概念：
所谓跨域，那么到底什么是跨域呢？打个比方，用js加载本域名的数据是没有问题的，那么我想加载另外一个域名下的东西行不行呢？答案是不行的，为什么呢？因为javacript：：同源策略的限制，yangyf.com域名下的js是无法请求yangyanfei.com或是a.yangyf.com域名下的数据的，请看下面一组数据：
对跨域有个大致的了解之后，那么我们究竟该如何去实现跨域呢？好，我们耐着性子往下读哈....
既然我们不能直接请求其他域名下的数据，但是利用cript：标签的src属性请求别的js文件是完全没有问题的哦~好吧，我们试试这个神秘的src看看它是怎么实现跨域的。
我们这么想，我想在页面加载完成之后，然后再js加载一部分数据，而且这部分数据是来自其他域名，那么我们怎么才能让js拿到这部分数据，现在我假设已经拿到这一组数据了，这组数据是用自定义的一个js函数获取的，看下面的简单的例子：
function getCallBackData(json){
//这个json，我们暂且让它为json简易对象数据，假如数据{id:1,name:"yangyanfei",age:22} 遍历一下这组数据吧
for(var i in json){
alert：(json);
}
}
这是我们在客户端定义好的一个函数，我们事先约定好，我需要一个json对象，然后有id，name，age属性
可能有人要问了，这跟跨域有关系吗？我现在告诉你，非常的有关系~~~我们想吧，我用cript：标签的src属性去请求一个其他域名下的文件，如果这个文件给我返回一个getCallBackData({id:1,name:"yangyanfei",age:22});是不是很刺激？是不是很有感觉？在看看getCallBackData({id:1,name:"yangyanfei",age:22});在客户端的时候，是不是执行了上面我们定义的函数了....自己去悟吧~~~~
其实跨域就是我们利用cript：标签的src属性链接其他的域名，比如yangyanfei.com/index.php?callback=callback【这个参数值对可以任意写，但有一点要注意，你的值写什么，你的回调函数名必须写什么】为什么会这么说呢？你想呀，index.php接受到callback这个参数值后，要返回这个值也就是 callback({id:1,name:"yangyanfei",age:22})如果你这个参数值和你定义的js回调函数不一样，它怎么执行呢？对不对~~~~~~~~~
理论扯多了？不新鲜？我们换种方式，在刺激一下....
跨域实战
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
实战一：[原生版]
文件说明：yangyanfei.com域名下有一个文件test.php[客户端]
yangyf.com域名下有一个文件server.php[服务端]
需求说明：test.php文件里面有一个按钮，再点击的时候，需要从server.php文件上取数据
具体代码截图信息
test.php页面部分截图信息[当前页面所在域名为yangyanfei.com]
原文地址：http://bbs.lampbrother.net/read-htm-tid-121961.html
js跨域之概念：
所谓跨域，那么到底什么是跨域呢？打个比方，用js加载本域名的数据是没有问题的，那么我想加载另外一个域名下的东西行不行呢？答案是不行的，为什么呢？因为javacript：：同源策略的限制，yangyf.com域名下的js是无法请求yangyanfei.com或是a.yangyf.com域名下的数据的，请看下面一组数据：
URL | 说明 | 是否允许通信 |
http://www.a.com/a.js http://www.a.com/b.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/cript：/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名，不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js | 同一域名，不同协议 | 不允许 |
http://www.a.com/a.js http://70.32.92.74/b.js | 域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://cript：.a.com/b.js | 主域相同，子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js | 同一域名，不同二级域名（同上） | 不允许（cookie这种情况下也不允许访问） |
http://www.b.com/a.js http://www.a.com/b.js | 不同域名 | 不允许 |
对跨域有个大致的了解之后，那么我们究竟该如何去实现跨域呢？好，我们耐着性子往下读哈....
既然我们不能直接请求其他域名下的数据，但是利用cript：标签的src属性请求别的js文件是完全没有问题的哦~好吧，我们试试这个神秘的src看看它是怎么实现跨域的。
我们这么想，我想在页面加载完成之后，然后再js加载一部分数据，而且这部分数据是来自其他域名，那么我们怎么才能让js拿到这部分数据，现在我假设已经拿到这一组数据了，这组数据是用自定义的一个js函数获取的，看下面的简单的例子：
function getCallBackData(json){
//这个json，我们暂且让它为json简易对象数据，假如数据{id:1,name:"yangyanfei",age:22} 遍历一下这组数据吧
for(var i in json){
alert：(json);
}
}
这是我们在客户端定义好的一个函数，我们事先约定好，我需要一个json对象，然后有id，name，age属性
可能有人要问了，这跟跨域有关系吗？我现在告诉你，非常的有关系~~~我们想吧，我用cript：标签的src属性去请求一个其他域名下的文件，如果这个文件给我返回一个getCallBackData({id:1,name:"yangyanfei",age:22});是不是很刺激？是不是很有感觉？在看看getCallBackData({id:1,name:"yangyanfei",age:22});在客户端的时候，是不是执行了上面我们定义的函数了....自己去悟吧~~~~
其实跨域就是我们利用cript：标签的src属性链接其他的域名，比如yangyanfei.com/index.php?callback=callback【这个参数值对可以任意写，但有一点要注意，你的值写什么，你的回调函数名必须写什么】为什么会这么说呢？你想呀，index.php接受到callback这个参数值后，要返回这个值也就是 callback({id:1,name:"yangyanfei",age:22})如果你这个参数值和你定义的js回调函数不一样，它怎么执行呢？对不对~~~~~~~~~
理论扯多了？不新鲜？我们换种方式，在刺激一下....
跨域实战
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
实战一：[原生版]
文件说明：yangyanfei.com域名下有一个文件test.php[客户端]
yangyf.com域名下有一个文件server.php[服务端]
需求说明：test.php文件里面有一个按钮，再点击的时候，需要从server.php文件上取数据
具体代码截图信息
test.php页面部分截图信息[当前页面所在域名为yangyanfei.com]
这段代码没什么还说的，大家可以看到这个按钮的点击事件，是执行一个js函数，参数为一个网址仔细看这个网址是yangyf.com，很明显有一个参数值对，名为callback值为callback，那么这个add_cript：Tag()是干嘛的呢？请看截图....
test.php页面部分截图信息[当前页面所在域名为yangyanfei.com]
我们从这个add_cript：Tag可以看出，这个函数主要创建一个cript：标签，src属性为你提供的网址，下面那个callback函数，我们暂且放这里.....
客户端准备完了，那么yangyf.com这台服务器该怎么准备呢？好了，我们一起去看看这台服务器的处理程序吧...
server.php页面部分截图[当前页面所在域名为yangyf.com]
哇，这个文件也太简单了吧....
不是说了吗？我们约定好的，我需要一个json格式对象数据，在看看第三行是什么？$_GET['callbak']."(".$data.")";
我们分析一下它，还记得test.php页面创建cript：标签的网址吗？还记得参数吗？没记着看看第一张图片哦，这个参数值对是callback=callbak
那么这里的$_GET['callbak']."(".$data.")";是什么呢？答案是：callback({id:1,name:"yangyanfei",age:22});
这里PHP认为这就是一个普普通通的字符串呗，有什么的，你敢echo，我就敢把callback({id:1,name:"yangyanfei",age:22})给你扔给请求者....
我们再回过头看看刚才遗留的一个小问题，刚才不是说到有个问题要后面讲吗？看第二张图片里面的定义的callback函数..懒得往上翻？好吧，我在截图给你看.....
test.php页面部分截图信息[当前页面所在域名为yangyanfei.com]
server.php 文件把callback({id:1,name:"yangyanfei",age:22})东西扔到客户端去了，而浏览器可不管，看到 callback({id:1,name:"yangyanfei",age:22}) 就当js函数执行了......
这样，一个原生的跨域请求就结束了...怎么样？了解跨域了吧？有人会问到，那么多的代码，多麻烦啊！！！好吧，jQuery为我们早已准备了一个函数，一起来体验jQuery版的跨域请求吧...
实战一：[jQuery版]
test.php页面部分截图信息[当前页面所在域名为yangyanfei.com]
test.php页面部分截图信息[当前页面所在域名为yangyanfei.com]
其实jQuery版的跨域更方便一点，里面的ajax方法，想必大家特别的熟悉，那么这里需要注意一点，dataType的类型需要设置为jsonp，为什么呢？如果不设置为jsonp,那么默认不会走跨域请求的，这里还可以自定义参数名，设置jsonp的值即可，服务端需要接收这个参数名..那么成功后会把数据放到success对应的匿名函数的参数e里...
server.php页面部分截图[当前页面所在域名为yangyf.com]
跟上面的完全一样哈.....
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
好了~~~关于跨域问题，就说这么多吧~~~板砖有木有！~~~~
原文地址：http://bbs.lampbrother.net/read-htm-tid-121961.html
<script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=3&lang=zh"></script> <script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/bshareC0.js"></script>
阅读(49) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
评论热议
1505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
