JSONP原理:
- 首先在客户端注册一个callback,然后把callback的名字传给服务器。
- 此时,服务器先生成 json 数据。
- 然后以 javascript 语法的方式,生成一个function,function 名字就是传递上来的callback参数值 .
- 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
- 客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.
jsonp 原理,代码示意:
本地定义的函数===
<script> function local_func(data) { // 函数内容 } </script>
返回的数据放在srcipt标签里===
<script src="http://api.douban.com/v2/movie/in_theaters?callback=local_func"></script> 等价于: <script> ;local_func([返回的数据]) </script>
jsonp的2种实现方式:
1.jsonp 在原生js中的实现:
通过src="http://api.douban.com/v2/movie/in_theaters?callback=local_func"。
直接输入访问:http://api.douban.com/v2/movi... ,返回的数据是一个对象:{xxx}。
直接输入访问:http://api.douban.com/v2/movi... ,返回的数据是一个对象:{xxx}。
直接输入访问:http://api.douban.com/v2/movi... ,返回的数据是:;local_func({xxx})。
注意点:
callback指定的回调函数,是客户端注册的,必须是定义在window下的全局函数。
例子网址:https://github.com/cag2050/js...
2.jsonp 在jquery ajax中的实现:
例子网址:https://github.com/cag2050/js...
- 代码所在github仓库:https://github.com/cag2050/js...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。