借助script进行Http跨域请求:JSONP实现原理及代码


Posted in Javascript onMarch 19, 2013

<script>元素的src属性能设置URL并发起HTTP GET请求, 使用<script>元素实现脚本操作HTTP可以跨域通信而不受限与同源策略. 通常, 使用基于<script>的Ajax传输协议时, 服务器响应采用JSON编码的数据格式, 当执行脚本时候, JavaScript解析器能够自动将其解码. 由于它使用JSON数据格式, 因此这种Ajax传输协议也叫做"JSONP". 所以使用jsonp技术, 只需要设置<script>的src属性, 并且插入到document中, 然后浏览器就会发送一个http请求以下载src属性所执行的url.

当使用<script>元素调用数据时, 响应内容必须用JavaScript函数名和圆括号包裹起来(也就是只能作为函数的参数), 而不是直接的一段json数据:

response( 
[1, 2, {"hello", "world"}] 
)

为了可行期间, 我们必须通过某种方式告诉服务, 它正在从一个<script>元素调用, 必须返回一个jsonp响应, 而不是普通的json, 这个可以通过在url中添加一个查询参数来实现: 例如, 追加"?json"(或者&json)

在实践中, 支持jsonp的服务不会强制指定客户端必须实现的回调函数名称, 比如response. 相反它们使用查询参数的值, 允许客户端指定一个函数名,然后使用函数名去填充响应.

//根据指定的url发送一个json请求 
//然后把解析得到的响应数据传递给回调函数 
//在url中添加一个名为jsonp的查询参数, 用于指定该请求的回调函数的名称 
function getJSONP(url, callback){ 
//为本次请求创建一个唯一的回调函数名称 
var cbnum = "cb"+getJSONP.counter++; 
var cbname = "getJSONP."+cbnum; //作为jsonp函数的属性 
//将回调函数名称以表单编码的形式添加到url查询部分中 
if(url.indexOf("?") === -1){ 
url += "?jsonp="+cbname; 
}else{ 
url += "&jsonp="+cbname; 
} 
//创建<script>用于发送请求 
var script = document.createElement("script"); 
//定义被脚本执行的回调函数 
getJSONP[cbnum] = function(response){ 
try{ 
callback(response); //处理响应 
} 
finally{ 
//删除该函数, 并移除相应script元素 
delete getJSONP[cbnum]; 
script.parentNode.removeChild(script); 
} 
} 
//立即触发http请求 
script.src = url; 
document.body.appendChild(script); 
} 
getJSONP.counter = 0;
Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
js实现图片实时时钟
Jan 15 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 #Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 #Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 #Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 #Javascript
Javascript中valueOf与toString区别浅析
Mar 19 #Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 #Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 #Javascript
You might like
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
JS实现小星星特效
2019/12/24 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
兼职学生的自我评价
2013/11/24 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
后备干部培训方案
2014/05/22 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
工商局调档介绍信
2015/10/22 职场文书
golang import自定义包方式
2021/04/29 Golang
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android