黑马程序员技术交流社区

标题: 【西安校区】JSONP原理分析 [打印本页]

作者: 西安Java组 时间: 2018-4-18 15:52
标题: 【西安校区】JSONP原理分析
# JSONP原理分析
## 什么是JSONP
###以下是摘自百度百科JSONP的简介<br/>
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
##JSONP能做什么
JSONP就是利用<script> 标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script> 元素，地址指向第三方的API网址,并在该script标签中的src属性内携带一个方法名称，第三方网站获取到传递过来的方法名后，会在后台组装一个带有方法名及返回参数的纯javascript代码片段至调用方，从而使调用方能获取到返回数据。一句话概括即：JSONP能够帮我们完成通过网页的异步请求方式来完成不同系统之间的数据交互。
##JSONP和JSON区别
JSON是一种数据格式。<br />
JSONP是一种数据调用的方式。<br/>
那么JSONP究竟是如何来完成数据交互的，我们一步步来分析
##JSONP原理分析

1. 准备环境<br/>
新建两项目Demo1,Demo2，模拟两个完全不同的项目环境,其中Demo1作为客户端去调用获取Demo2服务端的数据，如下:<br/>

1. 在Demo1和Dem2项目中添加如下内容，执行Demo1中的index.jsp会弹出"Demo1调用成功"

1. 通过上述操作，我们可以得到一个结论<script>标签可以帮助我们发送一个get请求，那么接下来，我们再进行如下修改：

1. 完成第三步后，我们知道在Demo1的queryAll方法中想要获取Demo2项目中返回来的JSON数据，必须要保证在Demo2中需要返回Method({"id":1,"name":"TOM"})格式的数据，分析可知，Method和Demo1的index.jsp中的函数方法名一致，括号里面的即为Demo2想要返回给Demo1的数据，那么我们就可以继续往下操作，将方法名作为参数传递给Demo2，并在Demo2中动态返回一个类似上述格式的数据，如下：<br/>

1. 至此，我们Demo1的index.jsp页面已经可以获取到我们Demo2中返回的数据内容。
##JQUERY封装的JSONP处理
上面简单介绍了下JSONP的执行流程，实际开发中，我们用的比较多的还是JQUERY封装的JSONP处理方式，具体处理流程如下：<br />

其中callback=?，程序会自动随机生成一个方法名，作为服务端的代码，只需要通过callback参数去获取值，并将查询结果转换成JSON格式，然后将方法名和JSON数据封装成指定的数据格式，即可完成JSONP的整体调用过程。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2