想知道jsonp到底是怎麼實現的？看我，包教會！

weixin_34393428發表於2019-03-11

JSON

不管你好不好，反正我是番茄醬。為啥要寫這篇文章呢，因為我想寫。

看這個文章的你肯定是想學會jsonp吧（廢話），那遇到這個文章是你的福氣。我敢保證這是全網最容易看懂的文章。當然，你如果不會寫js，不懂什麼叫跨域，那就算了。別勉強了，勉強是沒有幸福的（而且你也沒有學習jsonp實現方法的必要）。

首先宣告，這篇文章不涉及後臺程式碼的具體實現，關於後臺的部分只說思路。

好啦，那我們開課啦！

總的實現思路

我這篇教程的結構是總-分-總（瞎扯的，實際上是總-隨意-隨意-...-隨意）。我們先來說說總的實現思路。

我們都知道由於“同源策略”（不懂啥是同源策略沒關係，反正你知道有跨域現象就行了），而導致我們跨域的ajax請求傳送失敗，瀏覽器報錯。

但是呢script標籤的src是沒有跨域一說的，也就是說你可以隨便引用別的網站的js。這就是總的實現思路。如果不理解這一點，也不用往下看了，因為你以你的知識儲備和理解能力不合適看這文章。

說完總的實現思路，我們來看具體怎麼做吧。

1：先忘記我們要實現jsonp

先忘了我們的目標，看一下我們需要完成jsonp而需要掌握的知識。先理解了這些，才能理解jsonp的實現。

1.1：基礎的js程式碼

我們在頁面寫個這樣的程式碼：

<script>
    function a() {
        console.log('hello cat!');
    }
</script>
<script>
    a();
</script>

執行結果：

對於程式碼和結果沒有異議吧。為啥我要寫這樣的函式。我要說明的是這樣一點：後一個script標籤裡的程式碼可以引用前一個script程式碼裡的函式(全域性)。老規矩，理解了這點就繼續往下看。

1.2：script標籤引用文字

我們在html裡寫這樣的程式碼:

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>

然後我們在同路徑下新建一個a.txt。並且a.txt裡的文字如下：

a();

然後我們在html裡引用a.txt。完整的程式碼如下：

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>
<script src="a.txt"></script>

重新整理頁面，控制檯如下：

也就是說txt裡的程式碼被執行了。所以a函式才會被執行。我要說明的是：scritpt標籤引用的外部檔案中的文字內容會被當成js來解析。

也就是說相當於是這樣的程式碼：

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>
<script>
    a();
</script>

1.3：後臺返回文字

如果我們的後臺給我們返回的不是資料，而是跟a.txt一樣的文字如下文字：

a();

如我們請求地址為：https://www.a.com/a。則我們此時的完整程式碼為：

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>
<script src="https://www.a.com/a"></script>

那可以預見，最終的結果會與1.2一致。因為也等於是如下的程式碼：

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>
<script>
    a();
</script>

小結

以上的東西只是需要完成jsonp要懂的知識。你理解了可以繼續往下看。先不要深究“這樣怎麼能實現”的問題。不要急，我後面會說的。如果不理解上面的知識可以多看幾遍。能夠自己動手實驗最好。

2：再看看一般的ajax請求

我們一般的ajax請求，是後臺給我們一個請求地址，我們傳送請求，然後後臺返回給我們json格式的資訊。例如我們要請求的地址是：

https://www.a.com/userInfo (獲取使用者資訊)

後臺應該返回給我們的資料是:

{
  "name": "番茄醬",
  "wechat": "fan_qie_jiang666",
  "qq": "1164431166",
  "email": "1164431166@qq.com"
}

也就是說我們最終需要的是伺服器把json格式的資料給我們。但是我們用1裡說的方法，雖然伺服器能呼叫我們本地的函式，但是我們怎麼能獲取到資料呢？

那這樣，我們把1.3的html程式碼改成這樣：

<script>
    function a(res) {
        console.log(res);
    }
</script>
<script src="https://www.a.com/userInfo"></script>

伺服器返回的文字改成這樣：

a({
    "name": "番茄醬",
    "wechat": "fan_qie_jiang666",
    "qq": "1164431166",
    "email": "1164431166@qq.com"
});

也就是相當於這樣的程式碼：

<script>
    function a(res) {
        console.log(res);
    }
</script>
<script>
    a({
        "name": "番茄醬",
        "wechat": "fan_qie_jiang666",
        "qq": "1164431166",
        "email": "1164431166@qq.com"
    });
</script>

最終結果：

也就是說我們獲取到了我們需要的資料。但是萬一我們的function不叫a，或者原本叫a，但是因為種種原因需要改名，這樣後臺也要跟著改程式碼。這增加了溝通成本，也增加了後臺的工作量。並且可能每個介面你們都需要去溝通這個函式的名字。這是問題呀！

3.解決函式名的問題

用script標籤裡的src相當於向伺服器傳送了get請求。

不管你理不理解上面這點，記住就行了。既然是相當於get請求，那就可以帶參。並且後臺也能獲得這個引數的值。

既然這樣那我們是不是跟後臺溝通好我們給所有用jsonp的請求弄個引數，這個引數的值是我們本地的函式名。後臺直接給我們返回函式名然後引數為資料值就ok辣？不理解的話看下面的過程。

比如我們和後臺溝通好引數名叫balabala，那程式碼就像下面這樣：

<script>
    function xiaoMoXian(res) {
        console.log(res);
    }
</script>
<script src="https://www.a.com/userInfo?balabala=xiaoMoXian"></script>

後臺收到了這個請求，不再像之前那樣直接返回給我們a(...)。

因為我們已經說好了，函式名不再是固定的a，而是balabala這個引數的值才是我們的函式名。

於是後臺去獲取balabala這個引數的值，獲取到的是xiaoMoXian。於是後臺返回給我們：

xiaoMoXian({
    "name": "番茄醬",
    "wechat": "fan_qie_jiang666",
    "qq": "1164431166",
    "email": "1164431166@qq.com"
});

於是程式碼就相當於是：

<script>
    function xiaoMoXian(res) {
        console.log(res);
    }
</script>
<script>
    xiaoMoXian({
        "name": "番茄醬",
        "wechat": "fan_qie_jiang666",
        "qq": "1164431166",
        "email": "1164431166@qq.com"
    });
</script>

最終結果與2相同。