借助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 相关文章推荐
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 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
php实现将数组转换为XML的方法
2015/03/09 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
django框架创建应用操作示例
2019/09/26 Python
python创建n行m列数组示例
2019/12/02 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
感恩教师节主题班会
2015/08/12 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS