一文講清，非同源網(wǎng)頁如何實(shí)現(xiàn)跨域請求？

實(shí)現(xiàn)跨域數(shù)據(jù)請求，最主要的兩種解決方案，分別是 JSONP 和 CORS。

JSONP出現(xiàn)的早，兼容性好(兼容低版本IE)。是前端程序員為了解決跨域問題，被迫想出來的一種臨時(shí)解決方案。缺點(diǎn)是只支持 GET 請求，不支持 POST 請求。

CORS出現(xiàn)的較晚，它是 W3C 標(biāo)準(zhǔn)，屬于跨域 Ajax 請求的根本解決方案。支持 GET 和 POST 請求。缺點(diǎn)是不兼容某些低版本的瀏覽器。

本節(jié)先來看JSONP解決跨域問題的原理和方法。

JSONP的實(shí)現(xiàn)原理

由于瀏覽器同源策略的限制，網(wǎng)頁中無法通過 Ajax 請求非同源的接口數(shù)據(jù)。但是<script> 標(biāo)簽不受瀏覽器同源策略的影響，可以通過 src 屬性，請求非同源的 js 腳本。

因此，JSONP 的實(shí)現(xiàn)原理，就是通過<script> 標(biāo)簽的 src 屬性，請求跨域的數(shù)據(jù)接口，并通過函數(shù)調(diào)用的形式，接收跨域接口響應(yīng)回來的數(shù)據(jù)。

JSONP的實(shí)現(xiàn)演示

定義一個(gè) success 回調(diào)函數(shù)：

<script>
   function success(data) {
     console.log('獲取到了data數(shù)據(jù)：')
     console.log(data)
   }
 </script>

通過 <script>標(biāo)簽，請求接口數(shù)據(jù)：

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs
&age=20"></script>

注意：JSONP 和 Ajax 之間沒有任何關(guān)系，不能把 JSONP 請求數(shù)據(jù)的方式叫做 Ajax，因?yàn)?JSONP 沒有用到 XMLHttpRequest 這個(gè)對象。

jQuery中的JSONP

jQuery 提供的 $.ajax() 函數(shù)，除了可以發(fā)起真正的 Ajax 數(shù)據(jù)請求之外，還能夠發(fā)起 JSONP 數(shù)據(jù)請求，例如：

 $.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 發(fā)起 JSONP 請求，必須指定 datatype 為 jsonp
    dataType: 'jsonp',
    success: function(res) {
       console.log(res)
    }
 })

默認(rèn)情況下，使用 jQuery 發(fā)起 JSONP 請求，會(huì)自動(dòng)攜帶一個(gè) callback=jQueryxxx 的參數(shù)，jQueryxxx 是隨機(jī)生成的一個(gè)回調(diào)函數(shù)名稱。

自定義參數(shù)及回調(diào)函數(shù)名稱

在使用 jQuery 發(fā)起 JSONP 請求時(shí)，如果想要自定義 JSONP 的參數(shù)以及回調(diào)函數(shù)名稱，可以通過如下兩個(gè)參數(shù)來指定：

 $.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    // 發(fā)送到服務(wù)端的參數(shù)名稱，默認(rèn)值為 callback
    jsonp: 'callback',
    // 自定義的回調(diào)函數(shù)名稱，默認(rèn)值為 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })

jQuery中JSONP的實(shí)現(xiàn)過程

jQuery 中的 JSONP，也是通過<script> 標(biāo)簽的 src 屬性實(shí)現(xiàn)跨域數(shù)據(jù)訪問的，只不過，jQuery 采用的是動(dòng)態(tài)創(chuàng)建和移除<script>標(biāo)簽的方式，來發(fā)起 JSONP 數(shù)據(jù)請求。

在發(fā)起 JSONP 請求的時(shí)候，動(dòng)態(tài)向<script> 中 append 一個(gè)<script> 標(biāo)簽;

在 JSONP 請求成功以后，動(dòng)態(tài)從<script> 中移除剛才 append 進(jìn)去的<script> 標(biāo)簽;