借助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 表单的友好用户体现
Jan 07 Javascript
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
javascript 解析url的search方法
Feb 09 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
JavaScript常见继承模式实例小结
Jan 11 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
解决vuex刷新数据消失问题
Nov 12 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
基于element-ui封装表单金额输入框的方法示例
Jan 06 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
Zend引擎的发展 [15]
2006/10/09 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
浅析php单例模式
2014/11/25 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python3 replace()函数使用方法
2018/03/19 Python
对python中的argv和argc使用详解
2018/12/15 Python
python常量折叠基础知识点讲解
2021/02/28 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
中学生家长评语大全
2014/04/16 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
个人委托书如何写
2014/09/25 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
详解Django的MVT设计模式
2021/04/29 Python
Python利用FlashText算法实现替换字符串
2022/03/31 Python