為什么這個跨域請求解決方法有效？

Question

在這篇John Resig的文章中 ，他正在使用javascript處理字典大小的單詞列表，並且他正在通過來自CDN的ajax加載內容。

這些單詞加載了分隔單詞的換行符。 然后他說跨域失敗：

但是有一個問題：我們無法從CDN加載我們的字典！ 由於CDN位於另一個服務器上（或者在另一個子域上，就像這里的情況一樣），我們受瀏覽器的跨源策略的限制，禁止這些類型的請求。 所有這些都不會丟失 - 通過對字典文件的簡單調整，我們可以跨域加載它。

首先，我們用空格替換字典文件中的所有結束行。 其次，我們用JSONP語句包裝整行。 因此最終結果看起來像這樣：

dictLoaded（'aah aahed aahing aas aals ay ... zyzzyvas zzz'）;

這允許我們對文件執行Ajax請求並使其按預期工作 - 同時仍然受益於瀏覽器提供的所有緩存和壓縮。

所以，如果我正確地閱讀這個，只需在原始內容周圍添加他的方法dictLoaded('original content')就會導致ajax請求不會失敗。

那是（把它變成一個函數+參數）真的需要它嗎？ 為什么JSONP解決了跨域訪問限制的問題？

Answer 1

<script>標簽可以從任何地方（甚至跨域）加載任何JS文件。 隨之而來的好處是該腳本中的代碼也被執行，因此，這是一種繞過跨域限制的方法。

問題是，當代碼執行時，它在全局范圍內執行。 所以有這個代碼：

var test = 'foo'

將在全局范圍內創建一個test變量。

要緩解這種情況，請使用函數中的回復。 這是“JSONP”中的“P”，意思是“填充”。 這將在函數調用中包含您的回復。

所以如果你的外國腳本有：

myFunction({
    test : 'foo'
});

它調用myFunction並傳遞一個帶有值為foo test鍵的對象。 接收功能如下：

function myFunction(data){
    //"data.test" is "foo"
}

現在我們已成功繞過跨域限制。 所需的基本部分是：

• 接收功能（可以在使用后動態創建和丟棄）
• “填充”JSON回復

Answer 2

這是因為他補充說JSONP聲明。

“帶填充的JSON”是對基本JSON數據格式的補充。 它提供了一種從不同域中的服務器請求數據的方法，這是典型Web瀏覽器因同源策略而禁止的。

這通過腳本元素注入工作。

只有與腳本元素一起使用時，JSONP才有意義。 對於每個新的JSONP請求，瀏覽器必須添加新元素，或重用現有元素。 前一個選項 - 添加一個新的腳本元素 - 是通過動態DOM操作完成的，稱為腳本元素注入。 該元素被注入到HTML DOM中，並將所需JSONP端點的URL設置為“src”屬性。 這個動態腳本元素注入通常由javascript助手庫完成。 jQuery和其他框架都有jsonp輔助函數; 還有獨立選項。

資料來源： http ： //en.wikipedia.org/wiki/JSONP

Answer 3

那是（把它變成一個函數+參數）真的需要它嗎？

是。

為什么這會解決跨域訪問限制的問題？

你應該閱讀有關JSONP的內容 。 我們的想法是，您現在可以包含一個動態指向資源的<script>標記，而不是發送一個AJAX請求（這是禁止的）。 由於您已使用函數名稱包裝內容，因此將執行此函數並將其作為JSON對象的參數傳遞。 所以剩下的就是定義這個功能。