jsonp实现跨域问题
2015-06-18 17:18
621 查看
以前对于跨域问题,仅仅是知道通过创建script解决,根本没有深入的了解。经过几次的面试,个人觉得有必要去弄清楚jsonp跨域的原理和使用。下面与大家分析我的学习所得。(参考http://www.nowamagic.net/librarys/veda/detail/224)
javascript作为web开发中的前端动态脚本语言,其存在着一个很重要的安全限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在abc.example.com下的页面,不能向def.example.com提交Ajax请求,等等。
jsonp跨域原理:大家都知道javascript存在同源限制,script的src属性不受同源限制的影响,所以通过创建script节点可以实现跨域。然而这比不是核心所在,其核心是在于callback回调函数。其主要原理是在客户端先注册一个callback的回调函数,然后通过get方式传给服务器端;然后在服务器端获取callback的值,然后以javascript方式生成一个function,函数名称为callback的值;在将要输出的json数据以参数的方式放置到function中,生成一段javascript语法文档,再返回到客户端;最后客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里。
实例代码:
javascript代码
<script type="text/javascript">
function callbackJson(jsonData){
//对json数据的操作
alert("name"+jsonData.name+"age"+jsonData.age);
}
var url="http://localhost/jsonpTest/JsonpServlet?callback=callbackJson";
var script=document.creatElement('script');
script.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
服务器代码:
javascript作为web开发中的前端动态脚本语言,其存在着一个很重要的安全限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在abc.example.com下的页面,不能向def.example.com提交Ajax请求,等等。
jsonp跨域原理:大家都知道javascript存在同源限制,script的src属性不受同源限制的影响,所以通过创建script节点可以实现跨域。然而这比不是核心所在,其核心是在于callback回调函数。其主要原理是在客户端先注册一个callback的回调函数,然后通过get方式传给服务器端;然后在服务器端获取callback的值,然后以javascript方式生成一个function,函数名称为callback的值;在将要输出的json数据以参数的方式放置到function中,生成一段javascript语法文档,再返回到客户端;最后客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里。
实例代码:
javascript代码
<script type="text/javascript">
function callbackJson(jsonData){
//对json数据的操作
alert("name"+jsonData.name+"age"+jsonData.age);
}
var url="http://localhost/jsonpTest/JsonpServlet?callback=callbackJson";
var script=document.creatElement('script');
script.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
服务器代码:
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); String callback=request.getParameter("callback"); //测试用的json数据 Map<String,String> map=new HashMap<String, String>(); map.put("id", "id1"); map.put("name", "name1"); map.put("age", "18"); JSONObject jsonObject = JSONObject.fromObject(map); String returnstr=callback+"("+jsonObject.toString()+")"; PrintWriter out = response.getWriter(); out.println(returnstr); }
相关文章推荐
- IDF-CTF-不难不易的js加密 writeup
- 理解Javascript_15_作用域分配与变量访问规则,再送个闭包
- js this对象研究
- Web性能优化系列:10个JavaScript性能提升的技巧
- Windows下JavaScript环境搭建
- javascript中的继承特性
- Javascript之自定义事件
- ServiceStack.Text 的JSON序列号和反序列化
- js判断正整数
- 理解Javascript_14_函数形式参数与arguments
- JS高级编程5-作用域安全的构造函数
- 理解Javascript_12_执行模型浅析
- JavaScript Number 对象 Javascript Array对象 Location 对象方法 String对象方法
- JS高级编程4-函数节流
- js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
- 理解Javascript_10_对象模型
- JS高级编程3-函数柯里化
- JavaScript深究系列 [一]
- JS高级编程2-使用高阶函数
- js中两个对象的比较