JSONP

 2.1、什么是JSONP

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

2.2、JSONP的实现原理

由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响，可以通过 src 属性请求非同源的 js 脚本

因此，JSONP 的实现原理，就是通过<script>标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式, 接收跨域接口响应回来的数据

2.3、自己实现一个简单的JSONP请求

<script>
    function succes(data) {
      console.log('JSON响应回来的是:');
      console.log(data);
    }
</script>

<script src="http://liulongbin.top:3006/api/jsonp?callback=succes&name=1s$age=30"></script>

2.4、JSONP的缺点

由于JSONP是通过<script>标签的src属性，来实现跨域数据获取的，所以，JSONP只支持GET数据请求，不支持POST请求

注意: JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象

2.5、jQuery 中的 JSONP

jQuery提供的$.ajax()函数，除了可以发起真正的Ajax数据请求之外，还能够发起JSONP数据请求，例如:

$(function () {
    $.ajax({
      url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
      // 表示要发起 jsonp 请求
      dataType: 'jsonp',
      success: function (data) {
        console.log(data);
      }
   })
})

 默认情况下，使用jQuery 发起 JSONP 请求，会自动携带一个callback=jQueryxxx的参数，jQueryxxx 是随机生成的一个回调函数名称

2.6、自定义参数及回调函数名称

在使用jQuery发起JSONP请求时，如果想要自定义JSONP的参数以及回调函数名称，可以通过如下两个参数来指定:

//发送到服务端的参数名称，默认值为callback
jsonp:'callback',
//自定义的回调函数名称，默认值为jQueryxxx 格式
sonpcallback:'abc',

2.7、jQuery中JSONP的实现过程

jQuery 中的JSONP，也是通过<script>标签的src属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建 和 移除<script>标签的方式，来发起JSONP数据请求

1、在发起JSONP请求的时候，动态向<header> 中append一个<script>标签

2、在JSONP请求成功以后，动态从<header>中移除刚才append进去的<script>标签