有人可以解釋我如何做一個像我五歲的JSONP電話？

Question

我已經在服務器中有一個.json對象。這是正確的，沒有語法錯誤（有效的JSON）。我想通過JSONP調用這個對象，因爲它駐留在與我的應用程序不同的服務器中。

我想我明白如何實現它的客戶端，但我不知道該怎麼做關於服務器部分。我一直在跟蹤網絡上已有的信息，所以一直有錯誤。任何幫助？

Answer 1

JSONP基本上是一個「黑客」，允許網站加載數據並忽略same-origin policy。它通過將<script>標籤附加到頁面上來工作。

事實上的方式是在您的請求中發送回調。然後服務器將採用該名稱並生成一個JS文件，用該數據調用該函數。

使用jQuery時，只需在做$.getJSON時將?callback=?添加到您的URL，即可創建JSONP調用。

例子：

$.getJSON('http://YourSite.com/path/to/json.php?callback=?', function(data){ 
    console.log(data); // this will be parsed for you 
}); 

或者，您可以使用完整的$.ajax方法：

$.ajax({ 
    url: 'http://YourSite.com/path/to/json.php', 
    dataType: 'jsonp', // this tells jQuery to add "callback=?" for you 
    success: function(data){ 
     console.log(data); // this will be parsed for you 
    } 
}); 

相反makning AJAX調用的，jQuery將真正追加：

<script src="http://YourSite.com/path/to/json.php?callback=jQuery12345"></script> 

到你的頁面（注意：jQuery12345將隨機生成）。

然後在您的服務器上，您需要使用有效的JavaScript文件進行響應。它應該包含對在查詢字符串中傳遞的callback函數的調用。事情是這樣的：

jQuery12345({your: ['json', 'data']}); 

PHP中的例子（適應你使用任何服務器端語言）可能是：

$array = ['a' => 1, 'b' => 2,'c' => 3]; 
$callback = $_GET['callback']; 

header('Content-type: text/javascript'); 
echo "{$callback}(".json_encode($array).");"; 

這一切就是這麼簡單。有關更多信息，請參閱JSONP上的Wikipedia頁面：http://en.wikipedia.org/wiki/JSONP

Answer 2

JSONP與JSON無關。這裏有一個簡單（但沒用）例如：

• 客戶使腳本元素：<script src="http://example.com/foo.js>。這會導致瀏覽器從example.com獲取foo.js。

• 服務器聽到foo.js的請求。服務器向客戶端提供foo.js的內容（假設它只是alert(1)）。

• 客戶端獲取foo.js的內容並將這些內容作爲腳本運行。 （所以，客戶端alert(1)。）

這是如何有用？好了，你可以通過參數您的要求foo.js：

• 客戶確實<script src="http://example.com/foo.js?arg=123>

• 服務器會聽到foo.js?arg=123的請求。服務器做了一些與arg值有關的事情 - 讓我們假設它將它乘以2（但它可以做一些有用的事情，例如查找用戶名爲uid 123）。服務器然後發回腳本內容alert(246)。

• **客戶端從服務器運行腳本併發出警告246。

好吧，這是偉大的，如果我想在客戶端alert的東西，但我該怎麼做一些有用的東西？這裏只有一個最後的飛躍，我們必須做出：提供客戶端功能的名作爲參數：

• 客戶定義一個函數myFunc爲：function myFunc(a) { alert(a) }

• 客戶端確實<script src="http://example.com/foo.js?callback=myFunc&arg=123>

• 服務器聽到foo.js?callback=myFunc&arg=123的請求，並且其服務器端腳本知道它應該使用callback參數作爲在foo.js中調用的函數的名稱。服務器發回腳本內容myFunc(246)。

• 客戶端運行myFunc(246)。在這裏，我們已經指定myFunc只是提醒它的論點，但你可以讓它做任何你喜歡的事情。

這就是JSONP的工作原理。客戶端向腳本URL中的服務器提供參數，包括客戶端功能的名稱，並且服務器將腳本（而不是 JSON！）發回給客戶端運行。當然，最終的腳本可以包含JSON，比如myFunc({ 'foo' : 5 })，但最終JSON只是腳本內容的一部分。