JSONP原理

JSONP原理：

1. 首先在客户端注册一个callback,然后把callback的名字传给服务器。
2. 此时，服务器先生成 json 数据。
3. 然后以 javascript 语法的方式，生成一个function,function 名字就是传递上来的callback参数值 .
4. 最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
5. 客户端浏览器，解析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...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!