借助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 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
javascript中clone对象详解
Dec 03 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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
php 无限极分类
2008/03/27 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PDO::commit讲解
2019/01/27 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
js中生成map对象的方法
2014/01/09 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
JavaScript实现答题评分功能页面
2020/06/24 Javascript
python进行TCP端口扫描的实现
2018/12/21 Python
python global和nonlocal用法解析
2020/02/03 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
产品售后服务承诺书
2014/05/21 职场文书
幼儿园运动会口号
2014/06/07 职场文书
施工安全责任书范本
2014/07/24 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang