Jsonp跨域访问原理和实例
>>什么是跨域
出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略。
而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。
一个网站的网址组成包括协议名,子域名,主域名,端口号。
比如http://www.cnblogs.com/8000/,其中http是协议名,www是子域名,cnblogs是主域名,端口号是8000,
当在页面中从一个url请求数据时,如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同,就会产生跨域问题。
解决跨域问题有以下几种方式:
使用JSONP
服务端代理
服务端设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名
>>JSONP跨域的原理
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。
尽管浏览器不允许页面脚本跨域读取数据,但是允许html引用跨域的资源,比如脚本程序,css,图片等等,因为script,iframe的src是不存在跨域的。
利用script标签的开放策略,加上服务端的配合,我们可以实现跨域请求数据。
当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。
例如,假如需要从服务器(http://www.test.com/user?id=123)获取的数据如下:
{"id": 123, "name" : 张三, "age": 17}
那么使用JSONP方式请求(http://www.test.com/user?id=123?callback=data)的数据可以是这样:
data({"id": 123, "name" : 张三, "age": 17});
当然,如果服务端考虑得更加充分,返回的数据可能如下:
try{data({"id": 123, "name" : 张三, "age": 17});}catch(e){}
这时候我们只要定义一个data()函数,并动态地创建一个script标签,使其的src属性为
http://www.a.com/user?id=123?callback=data
便可以使用data函数来调用返回的数据了。
>>JSONP跨域实例
通常情况下,服务端代码只要判断请求是否带有callback参数,动态的添加callback函数,就可以实现一个支持JSONP的接口。
boolean isJsonp=StringUtils.isEmpty(callback)?false : true; if (StringUtil.isEmpty(channelId)) { if(isJsonp) ResponseUtils.renderJson(response,callback +"("+"{\"channelId\":-1,\"data\":\"查询错误,channelId不能为空\"}"+")"); else ResponseUtils.renderJson(response,"{\"channelId\":-1,\"data\":\"查询错误,channelId不能为空\"}"); return; } Map<Object, Object> params=new HashMap<Object, Object>(); params.put("channelId",channelId); try { List<Content> contentList=frontService.getPageListNews(channelId,pageNo,pageSize,1); JSONObject json=SFJsonUtil.toJSON(contentList,params); if(isJsonp) ResponseUtils.renderJson(response,callback +"("+json.toString()+")"); else ResponseUtils.renderJson(response,json.toString()); } catch (Exception e) { ResponseUtils.renderJson(response,"{\"channelId\":-1,\"data\":\"查询错误\"}"); log.debug(e.toString()); }
Jsonp跨域访问原理和实例的更多相关文章
- 从前端和后端两个角度分析jsonp跨域访问(完整实例)
一.什么是跨域访问 举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请 ...
- Jsonp跨域访问
很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
- 【转】JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- JSONP跨域的原理解析(转)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
- JSONP跨域的原理
一种脚本注入行为 在 2011年10月27日 那天写的 已经有 12671 次阅读了 感谢 参考或原文 服务器君一共花费了23.005 ms进行了2次数据库查询,努力地为您提供了这个页面. ...
- JSONP跨域的原理解析及其实现介绍
JSONP跨域的原理解析及其实现介绍 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-22 JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并 ...
- JSONP跨域的原理解析[转]
转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中, ...
随机推荐
- qmake的使用
[TOC] 本文由乌合之众 lym瞎编,欢迎转载 blog.cnblogs.net/oloroso 本文由乌合之众 lym瞎编,欢迎转载 my.oschina.net/oloroso *** 还是先说 ...
- 2.5---链表来进行加法,链式A+B(CC150)
这里是用了自己的方法,和书本不一样. import java.util.HashSet; import java.util.Set; class ListNode{ int val; ListNode ...
- youtube视频批量下载
youtube 下载视频脚本: 得到下载列表:download_list var links = document.getElementsByTagName('a'); for(var i =0;i& ...
- HTK搭建语音拨号系统实验材料下载
选自:http://maotong.blog.hexun.com/6267266_d.html 压缩包包括全部的配置文件,脚本文件,必备的模型文件和实验手册. 全部实验材料的下载链接: 1 http: ...
- 一步步搭建docker私有仓库并从私有仓库中下载镜像
一步步搭建docker私有仓库 #下载镜像 docker pull registry#查看镜像 docker images #运行私有仓库,指定端口和数据卷 docker run -d -p : -v ...
- MySQL数据故障时备份与恢复
1.ib_logfile0和ib_logfile1是mysql用来存储操作执行的日志文件,用于事务暂存和回滚.当复制ibdata1数据文件到新的mysql中时,如果没有拷贝这两个日志文件,则会出现启动 ...
- DP:教授逻辑学问题
http://www.zhihu.com/question/23999095#answer-12373156问题来自知乎 2015-08-17 问题描述: 一个教授逻辑学的教授,有三个学生,而且三个学 ...
- C Primer Plus_第四章_字符串和格式化输入输出_编程练习
Practice 1.输入名字和姓氏,以"名字,姓氏"的格式输出打印. #include int main(void) { char name[20]; char family[2 ...
- 51 NOD 1384 全排列(STL 搜索)
1384 全排列 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出一个字符串S(可能又重复的字符),按照字典序 ...
- CSS3实现元素旋转
-webkit-transform:rotate(30deg); 参数代表顺时针自旋转角度 这个元素还提供了文本倾斜的方法 - HTML5与CSS3 P299