首页 > 代码库 > JSONP原理小记
JSONP原理小记
大家都知道JSONP(JSON with padding参数式JSON)是跨域传输数据的方法，jq等很多类库都封装了JSONP的方法，但是他的原理是怎样的呢？下面举个我认为最浅显的栗子，大家看过了都会明白原理！
JSONP的原理，概括点说，就是动态插入<script>元素，当然<script>元素引用的js文件是服务器传过来的，他与<img>元素一样可以不受限制地从其他域加载资源。
栗子：
<!DOCTYPE html>
<html><head> <title></title> <script type="text/javascript"> // 定义回调函数 var alertMessage = function(data){ alert(‘ 姓名: ‘ + data.name + ‘，性别: ‘ + data.sex + ‘，职位：‘+ data.position); }; // 提供jsonp服务的url地址（即动态<script>元素的src值） var url = "http://test.com/jsonp?number=9527&callback=alertMessage"; // 创建script标签，设置其属性 var script = document.createElement(‘script‘); script.src = http://www.mamicode.com/url; // 把script标签加入head，此时调用开始 document.getElementsByTagName(‘head‘)[0].appendChild(script); </script></head><body> </body></html>
服务器传过来的js文件栗子：
alertMessage({ ‘name‘:‘James‘, ‘sex‘:‘male‘, ‘position‘:‘manager‘ })加载到服务器传过来的js文件后，解析，执行函数alertMessage！
弹出提示框：姓名：James，性别：male，职位：manager
看到这里，大家应该清楚了，JSONP的使用流程：
1、定义一个调用跨域数据的函数 function fn(date){...}；
2、在需要执行fn时，插入<script>标签，其src属性为请求地址；
3、服务器返回js文件，其代码执行函数fn，并提供参数,即fn(response),此处，response就是跨域调用的数据！
JSONP原理小记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。