js跨域问题_跨域请求数据_jQuery跨域
来源:互联网 发布:mysql双主从配置 编辑:程序博客网 时间:2024/06/09 13:19
前两天跟一个朋友谈到跨域的问题,对于跨域,搞清原理,其实感觉应该是一个很简单的东西,理理思路,往下阅读这篇文章吧....
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]
原文地址: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
0
上一篇:样儿的项目感受
下一篇:5个月,给自己一个未来
相关热门文章
- 《数字技术与应用》征稿**投稿...
- 寻求靓机Agilent E4402b高价回...
- 美国RT服务器租用仿牌网站不二...
- 8500WN智能网卡曝光 强悍配置...
- text段,data段,bss段,堆和栈 ...
- 毕业五年(续)
- 毕业五年
- 职业生涯规划
- 中国软件开发工程师之痛...
- 闲置书处理!
- 大家都是用什么来管理hadoop集...
- 网站被人挂了吗,添加了些程序...
- Nginx如何保证不走宕机的那个...
- 大家谈谈MYSQL客户端和服务器...
- 以下代码运行后为何会输出5?...
给主人留下些什么吧!~~
评论热议
- js跨域问题_跨域请求数据_jQuery跨域
- js跨域请求数据
- js跨域请求数据
- js跨域请求问题
- js跨域请求数据实现
- js跨域请求jsonp数据
- js跨域数据请求解决办法
- js跨域请求json数据
- js跨域请求服务器数据
- cocos2d-js跨域访问问题,cocos2d-js请求网络数据
- 关于js跨域请求的问题
- js跨域请求的问题
- 解决ajax、js无法跨域向服务器请求数据的问题
- PHP解决跨域数据请求问题
- 解决ionic请求数据跨域问题
- 请求聚合股票数据跨域问题
- JS跨域请求
- JS跨域请求
- 你们最喜欢的智力题:用PHP打印九宫格 - 三阶幻方
- 哇哇哇 50期
- 来到兄弟连,使我找到了方向
- 小高读书第四季:如何勾搭到好喷油
- 样儿的项目感受
- js跨域问题_跨域请求数据_jQuery跨域
- WM_USER
- 5个月,给自己一个未来
- 那些年我们一起错过的成功<虎狼之师>
- 读《总要先人一步》有感
- 人生的第一份检讨书
- 不解释,直接上代码 MiniSmarty
- 倾情巨献呕血力作:通过smarty谈学习方法,附送江湖绝学smarty3速成秘籍
- curl的一个采集某小说站的实例
原创粉丝点击
热门IT博客
热门问题
老师的惩罚
人脸识别
我在镇武司摸鱼那些年
重生之率土为王
我在大康的咸鱼生活
盘龙之生命进化
天生仙种
凡人之先天五行
春回大明朝
姑娘不必设防,我是瞎子
中国平安港股
港股交易时间
港股通开通条件
港股的开户条件
瑞声科技港股
丰盛控股港股
易方达港股通红利005583
易方达港股通红利
金蝶国际港股
紫金矿业港股
今天港股行情
东方电气港股
鲁大师港股上市
老恒和酿造港股
中国铁建港股
中信证券港股
玖龙纸业港股
港股通交易时间
港股开户条件一定要50万吗
康哲药业港股
怎么买港股股票
开通港股通条件
如何开通港股通
港股买卖规则
港股通交易规则
碧桂园股票
联想股票行情
股旁网
香港股市行情
新城发展控股港股
阿斯达克财经网港股即时报价
重庆农村商业银行港股
阿斯达克财经网港股
港航纵横
港航纵横网
港航局
港航
舟山港航气象服务
天津港航工程有限公司
江西省港航管理局
港航纵横手机版