关于ajax跨域:json解决跨域的实现方法及原理

先理解一下同源策略
同源策略 （英文全称 Same origin policy）是 浏览器 提供的一个 平安性能
MDN 官网给定的概念：同源策略限度了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互这是一个用于隔离潜在歹意文件的重要平安机制
艰深的了解：浏览器规定，A 网站的 JavaScript，不容许和非同源的网站 C 之间，进行资源的交互
例如：

     ① 无奈读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
     ② 无奈接触非同源网页的 DOM
     ③ 无奈向非同源地址发送 Ajax 申请

再理解一下跨域
同源 指的是两个 URL 的协定、域名、端口统一，反之，则是 跨域

 呈现跨域的根本原因：** 浏览器的同源策略 ** 不容许非同源的 URL 之间进行资源的交互
 ** 留神 ** 浏览器容许发动跨域申请，然而，跨域申请回来的数据，会被浏览器拦挡，无奈被页面获取到！

现如今，实现跨域数据申请，最次要的两种解决方案，别离是 JSONP 和 CORS。
JSONP呈现的早，兼容性好（兼容低版本 IE）。是前端程序员为了解决跨域问题，被迫想进去的一种长期解决方案。毛病 是只反对 GET 申请，不反对 POST 申请。
CORS：呈现的较晚，它是 W3C 规范，属于跨域 Ajax 申请的基本解决方案。反对 GET 和 POST` 申请。毛病 是不兼容某些低版本的浏览器
其中：CORS 次要是后盾工作人在做 个别就是应用一个两头键先截取所有的申请而后再放行

// 跨域拜访
app.use((req, res, next) => {
    // 1. 容许那些客户端拜访
    // * 代表容许所有的客户拜访我
    res.header('Access-Control-Allow-Origin', '*')
    // 2. 容许客户端应用那些申请形式拜访我
    res.header('Access-Control-Allow-Methods', 'get post,put,delete')
    next();})

理解 jsonp
JSONP (JSON with Padding) 是 JSON 的一种“应用模式”，可用于解决支流浏览器的跨域数据拜访的问题。
JSONP的实现原理
因为浏览器同源策略的限度，网页中无奈通过 Ajax 申请非同源的接口数据。然而 <script> 标签不受浏览器同源策略的影响能够通过 src 属性，申请非同源的 js 脚本。
因而，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，申请跨域的数据接口，而近程服务端通过调用指定的函数并传入参数来实现传递参数

// 定义一个 success 回调函数
<script>
     function success(data) {console.log('获取到了 data 数据：')
     console.log(data)
     }
 </script>
 // 通过 <script> 标签，申请接口数据：<script src="http://ajax:3006/api/jsonp?callback=success&name=zs&a
ge=20"></script>

JSONP的毛病
因为 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只反对 GET 数据申请，不反对 POST 申请。
留神： JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 申请数据的形式叫做 Ajax，因为 JSONP 没有用到XMLHttpRequest 这个对象

jQuery中的JSONP
jQuery 提供的 $.ajax() 函数，除了能够发动真正的 Ajax 数据申请之外，还可能发动 JSONP 数据申请，例如：

$.ajax({
     url: 'http://ajax/api/jsonp?name=zs&age=20',
     // 如果要应用 $.ajax() 发动 JSONP 申请，必须指定 datatype 为 jsonp
     dataType: 'jsonp',
     success: function(res) {console.log(res)
     }
})

默认状况下，应用 jQuery 发动 JSONP 申请，会主动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称

自定义参数及回调函数名称
在应用 jQuery 发动 JSONP 申请时，如果想要自定义 JSONP 的 参数 以及 回调函数名称，能够通过如下两个参数来指定：

$.ajax({
     url: 'http://ajax/api/jsonp?name=zs&age=20',
     dataType: 'jsonp',
     // 发送到服务端的参数名称，默认值为 callback
     jsonp: 'callback',
     // 自定义的回调函数名称，默认值为 jQueryxxx 格局
     jsonpCallback: 'abc',
     success: function(res) {console.log(res)
     }
})

jQuery 中 JSONP 的实现过程
jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据拜访的，只不过，jQuery 采纳的是 动态创建和移除标签 的形式，来发动 JSONP 数据申请。

• 在发动 JSONP 申请的时候，动静向 页面 中 append 一个 <script> 标签；
• 在 JSONP 申请胜利当前动静从页面中移除方才 append 进去的 <script> 标签；

    function jsonp(obj) {
            // 1. 动静的创立一个 script 标签，增加到页面中
            var script = document.createElement('script');
            document.body.appendChild(script);
            // 2. 设置 src 属性，发送 script 标签的跨域申请
            // 你要执行执行哪个函数, 通过 callback 这个属性发过来
            script.src = obj.url + "?callback=fn&name=zs&age=23";
            // 3. 这个是承受申请后(接管的数据是一个执行函数)，页面中要提前有这个函数
            window.fn = obj.success;
            // 4. 应用结束之后删除 script 标签
            script.onload = function () {this.remove();
            }
        }
        // 具体利用
        jsonp({
            url: 'http://www.ajax.fronted.gywalker:1209/api/jsonp',
            success: function (res) {console.log(res);
            }
        })