了解JSONP的概念以及原理

一、什么是JSONP？

概念: JSONP (JSON with Padding) 是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

二、JSONP实现原理是怎样的？

1.由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是script标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。
2.JSONP 的实现原理，就是通过script标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

三、跨域Ajax数据请求存在的问题？

问题: 如果出现跨域请求，浏览器会报什么错误？

四、剖析JSONP实现原理-1

问题: 函数定义和调用分别在两个 script 标签中能否正常运行？
回答: 可以正常运行的，虽然在不同的 script 标签中，但是JS引擎解析完之后同属于一个作用域。

五、剖析JSONP实现原理-2

问题: 如果把函数定义抽取到一个js文件中，还能正常调用吗？
回答: 可以正常调用，虽然单独定义在一个js文件中，只要我们在页面引入了，浏览器在解析的时候，会把这个js文件里面的内容放在当前作用域中。

六、剖析JSONP实现原理-3

问题: 为什么通过 callback 指定回调函数名称就能调用函数？

回答:
1.发送请求的时候，通过 callback 请求参数，把我们定义的函数名称传递给了后台服务器：例如http://xxx.xxx.xxx/api?callback=success
2.后台接收到这个参数之后，会返回函数调用的语法给浏览器：例如 success()
3.最终返回的结果会被浏览器解析执行，从而调用了我们定义的函数

七、自己实现一个简单的JSONP

1. 第一步。定义一个回调函数

<script>
  function success (data) {
    console.log('获取到了data数据')
    console.log(data)
  }
</script>

2. 第二步。通过script标签，请求接口数据

<script src="http://www.zhangxiaoyu.head:3008/api/jsonp?callback=success&name=kiko&age=26"></script>

八、JSONP的缺点

问题: JSONP 有什么缺点？
回答: 由于SONP是通过script标签的src属性，来实现跨域数据获取的，所以，JSONP只支持GET数据请求，不支持POST请求。

问题: JSONP 跟 ajax 有什么关系吗？为什么？
回答: JSONP和Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest 这个对象。