jsonP使用及注意事项小结

什么是JSONP

三句话总结:

概念:JSONP(JSON with Padding)是JSON的一种“使用模式”。
目的:用于解决主流浏览器的跨域数据访问的问题。
原理:利用 <script> 元素的开放策略,网页可以得到从其他来源动态获取的 JSON 数据,数据被包裹在一个JavaScript 函数中。
使用方法

第一步:在window下添加一个名为myFunction的函数

window.myFunction = function(res){
console.log(res);
}
第二步:在html中插入script标签

<script type="text/javascript" id="jsonp" src="http://www.xxxx.com/getJsonp?callback=myFunction"></script&gt;
注意事项

必须要先在window下添加处理函数myFunction才能插入script标签,否则会提示Uncaught ReferenceError: myFunction is not defined。

前后端必须约定好函数名。目前w3c对于JSONP并未标准化,大多数情况大家是如此约定的:在获取数据的接口url中添加查询字符串,例如http://www.xxxx.com/getJsonp?callback=myFunction,服务端根据这个查询字符串返回一个一段用myFunction包裹的JSON,myFunction({"data":…})。

挂在window下的函数名应尽量特别一些。由于window下经常会添加各种属性,如果某个重要属性和JSONP返回的函数名相同,则原有的函数会被JSONP的函数覆盖,目前很多库都对这个函数名做了特殊处理,例如vue-resource会把JSONP返回函数命名为一个随机串。

» 本文来自:前端开发者 » 《jsonP使用及注意事项小结》
» 本文链接地址:https://www.rokub.com/8832.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!