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/movie/in_theaters ,返回的数据是一个对象:{xxx}。
    直接输入访问:http://api.douban.com/v2/movie/in_theaters?callback=? ,返回的数据是一个对象:{xxx}。
    直接输入访问:http://api.douban.com/v2/movie/in_theaters?callback=local_func ,返回的数据是:;local_func({xxx})。
    注意点:
    callback指定的回调函数,是客户端注册的,必须是定义在window下的全局函数。
    例子网址:https://github.com/cag2050/jsonp_principle/blob/master/src/jsonp_js.html
  2. jsonp 在jquery ajax中的实现:
    例子网址:https://github.com/cag2050/jsonp_principle/blob/master/src/jsonp_jquery.html
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 原文地址 仓库地址 jsonp(JSON with padding)你一定不会陌生,前端向后端拿数据的方式之...
    谦龙阅读 634评论 0 4
  • 写在前面 一说到javascript的跨域,很多人第一时间想到的就是jsonp(JSON with Padding...
    小枫学幽默阅读 738评论 0 6
  • JSONP的诞生 1.首先,因为ajax无法跨域,然后开发者就有所思考 2.其次,开发者发现,script标签的s...
    heachou阅读 509评论 0 0
  • 在上一篇文章中介绍了CORS跨源资源共享,在本节中介绍JSONP跨源技术。 JSONP也可以用来实现跨域资源请求,...
    滚石_c2a6阅读 294评论 0 0
  • “你害怕死亡吗。她看着我。小时候,家里死人,我站在棺材旁边看,不明白一切为什么可以这样完美地停顿。”(安妮宝贝) ...
    三木科阅读 375评论 2 0