[Java面试十]浏览器跨域问题
来源:互联网 发布:不用端口号访问服务器 编辑:程序博客网 时间:2024/06/16 16:46
3.文档对象模型DOM
4.常见事件
5.Ajax编程(web交互2种方式的对比)
6.传统Ajax编程的步骤以及从服务器端返回的数据格式 7.JSON数据格式的转换操作 8.jQuery选择器 9.jQuery的Ajax编程(常见方法) 浏览器跨域问题:
json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。
同源策略
首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思,实践一下就知道了。
1.随便建两个网页
一个端口是2698,一个2701,按照定义它们是不同源的。
2.用jQuery发起不同源的请求
在2698端口的网页上添加一个按钮,Click事件随便发起两个向端口为2701域的请求。
$("#getOtherDomainThings").click(function(){
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js",function(data){
console.log(data)
})
$.get("http://localhost:2701/home/index",function(data){
console.log(data)
})
})
OK,原来jsonp是要解决这个问题的。
script标签的跨域能力
不知道大家知不知道CDN这个东西,例如微软的CDN,使用它,我们的网页可以不提供jQuery,由微软的网站帮我们提供:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>
同样是端口2698的网页发起对2701域的请求,放在script里设置scr属性的OK了,另一个方式就悲剧。利用script的跨域能力,这就是jsonp的基础。
利用script获取不同源的json
既然它叫jsonp,很明显目的还是json,而且是跨域获取。根据上面的分析,很容易想到:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。实践:
functionCreateScript(src){
$("<script><//script>").attr("src", src).appendTo("body")
}
$("#getOtherDomainJson").click(function(){
$.get('http://localhost:2701/home/somejson',function(data){
console.log(data)
})
})
![45c81bcb-b048-4fd0-9e49-7b8feaf5a402 45c81bcb-b048-4fd0-9e49-7b8feaf5a402](http://images2015.cnblogs.com/blog/799093/201607/799093-20160724234051326-1623495128.jpg)
首先,第一个浏览器,http://localhost:2701/home/somejson这个Url的确是存在一个json的,而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的,但是最下面报js语法错误了。原来用script标签加载完后,会立即 把响应当js去执行,很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。
利用script获取异域的jsonp
显然,把上面的json放到一个回调方法里是最简单的方法。例如,变成这样:
如果存在jsonpcallback这个方法,那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。
由于服务器不知道客户端的回调是什么,不可能hard code成jsonpcallback,所以就带一个QueryString让客户端告诉服务端,回调方法是什么,当然,QueryString的key要遵从服务端的约定,上面的是”callback“。
添加回调函数:
function jsonpcallback(json){
console.log(json)
}
$("#getJsonpByHand").click(function(){
CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})
![3ff1c756-d8a0-4de1-ac86-9f323026b439 3ff1c756-d8a0-4de1-ac86-9f323026b439](http://images2015.cnblogs.com/blog/799093/201607/799093-20160724234054216-576481851.jpg)
200OK,服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的 东方"}),我们也写了jsonpcallback方法,当然会执行。OK顺利获得了json。没错,到这里就是jsonp的全部。
利用jQuery获取jsonp
上面的方式中,又要插入script标签,又要定义一个回调,略显麻烦,利用jQuery可以直接得到想要的json数据,同样是上面的jsonp:
$("#getJsonpByJquery").click(function(){
$.ajax({
url:'http://localhost:2701/home/somejsonp',
dataType:"jsonp",
jsonp:"callback",
success:function(data){
console.log(data)
}
})
})
总结
一句话就是利用script标签绕过同源策略,获得一个类似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想得到的json。
jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})
- [Java面试十]浏览器跨域问题.
- [Java面试十]浏览器跨域问题.
- [Java面试十]浏览器跨域问题.
- [Java面试十]浏览器跨域问题
- 面试十大常见Java String问题
- 面试十大常见Java String问题
- Java面试十
- java系统学习(二十)---问题汇总(面试常见)
- 面试十大经典问题
- 面试十大经典问题
- java selenium (十) 操作浏览器
- 浏览器跨域问题
- 浏览器跨域问题
- 浏览器跨域问题
- 浏览器跨域问题
- Java面试准备十:Java内部类
- js跨域访问问题【常见问题、java面试中也常问】
- Java面试 排名前十的算法
- js编码规范
- linux——高级网络控制
- Oracle Spacial(空间数据库)sdo_lrs包函数
- db2 export与 import乱码解决以及其中的 codepage 转换
- java获取本地ip
- [Java面试十]浏览器跨域问题
- 3.4 Periodic Strings UVA455
- $_SERVER参数详解
- 算法爱好者——螺旋矩阵 ? 待解决
- Centos6下编译安装gcc6.4.0
- 说反话 (20)
- JVM性能监控工具
- Oracle Spacial(空间数据库)SDO_MIGRATE包函数
- java如何将取出的字符串+1