借助script进行Http跨域请求:JSONP实现原理及代码
2013-03-19 00:00
726 查看
<script>元素的src属性能设置URL并发起HTTP GET请求, 使用<script>元素实现脚本操作HTTP可以跨域通信而不受限与同源策略. 通常, 使用基于<script>的Ajax传输协议时, 服务器响应采用JSON编码的数据格式, 当执行脚本时候, JavaScript解析器能够自动将其解码. 由于它使用JSON数据格式, 因此这种Ajax传输协议也叫做"JSONP". 所以使用jsonp技术, 只需要设置<script>的src属性, 并且插入到document中, 然后浏览器就会发送一个http请求以下载src属性所执行的url.
当使用<script>元素调用数据时, 响应内容必须用JavaScript函数名和圆括号包裹起来(也就是只能作为函数的参数), 而不是直接的一段json数据:
为了可行期间, 我们必须通过某种方式告诉服务, 它正在从一个<script>元素调用, 必须返回一个jsonp响应, 而不是普通的json, 这个可以通过在url中添加一个查询参数来实现: 例如, 追加"?json"(或者&json)
在实践中, 支持jsonp的服务不会强制指定客户端必须实现的回调函数名称, 比如response. 相反它们使用查询参数的值, 允许客户端指定一个函数名,然后使用函数名去填充响应.
当使用<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;
相关文章推荐
- 关于jsonp跨域请求的实现原理
- jsonp实现应用的跨域请求进行数据交互
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器
- jsonp的底层实现原理 跨域请求
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- AJAX(XMLHttpRequest)进行跨域请求方法详解(一)
- Ajax中JSON实现异步请求,JSONP实现跨域异步请求的访问.........
- playframework运用Extjs中jsonp请求实现跨域
- 循序渐进Python3(十一) --6-- Ajax 实现跨域请求 jsonp 和 cors
- jsonp实现原理及核心代码例子
- httpPost请求用java代码实现的方法
- PHP AJAX JSONP实现跨域请求使用实例
- AJAX(XMLHttpRequest)进行跨域请求方法详解(三)
- java发送http的get、post请求实现代码
- 10、JSONP实现Ajax的跨域请求
- [跨域] -- JSONP实现跨域请求使用实例
- AJAX(XMLHttpRequest)进行跨域请求方法详解(二)
- 跨域请求方式三:window.name 跨域实现原理
- jsonp突破同源策略,实现跨域访问请求