詳解JS中的JSON和JSONP

簡單地使用json并不能支持跨域資源請求，為了解決這個問題，需要采用jsonp數據交互協議。眾所周知，js文件的調用不受跨域與否的限制，因此如果想通過純web端跨域訪問數據，只能在遠程服務器上設法將json數據封裝進js格式的文件中，供客戶端調用和進一步處理，這就是jsonp協議的原理。

JSON 和 JSONP

JSONP是一種發送JSON數據的方法，無需擔心跨域問題。JSONP不使用該XMLHttpRequest對象。JSONP使用<script>標簽代替。
由于跨域策略，從另一個域請求文件可能會導致問題。從另一個域請求外部腳本沒有此問題。JSONP使用此優勢，并使用腳本標記而不是XMLHttpRequest對象請求文件。

<script src="demo_jsonp.php">

服務器文件

服務器上的文件將結果包裝在函數調用中：

<?php $myJSON = '{"name":"John", "age":30, "city":"New York"}'; echo "myFunc(".$myJSON.");"; ?>

結果返回對名為“myFunc”的函數的調用，并將JSON數據作為參數。確保客戶端上存在該功能。

JavaScript函數

名為“myFunc”的函數位于客戶端，并準備處理JSON數據：

function myFunc(myObj) {   document.getElementById("demo").innerHTML = myObj.name; } xmlhttp.send("x=" + dbParam);

創建動態script標記

根據您放置腳本標記的位置，上面的示例將在頁面加載時執行“myFunc”函數，這不是很令人滿意。只應在需要時創建script標記：
單擊按鈕時創建并插入<script>標記：

function clickButton() {   var s = document.createElement("script");   s.src = "demo_jsonp.php";     document.body.appendChild(s); }

動態JSONP結果

上面的例子仍然是非常靜態的。通過將JSON發送到php文件使示例動態化，并讓php文件根據獲取的信息返回JSON對象。
PHP文件

<?phpheader("Content-Type: application/json; charset=UTF-8"); $obj = json_decode($_GET["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit); $outp = array(); $outp = $result->fetch_all(MYSQLI_ASSOC);echo "myFunc(".json_encode($outp).")"; ?>

PHP文件解釋：
使用PHP函數json_decode()將請求轉換為對象 。
訪問數據庫，并使用請求的數據填充數組。
將數組添加到對象。
使用json_encode()函數將數組轉換為JSON 。
在返回對象周圍包裹“myFunc()”

JavaScript示例:

function clickButton() {   var obj, s   obj = { table: "products", limit: 10 };   s = document.createElement("script");   s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);   document.body.appendChild(s); } function myFunc(myObj) {  var x, txt = "";  for (x in myObj) {     txt += myObj[x].name + " ";   }   document.getElementById("demo").innerHTML = txt; }

回調函數

當您無法控制服務器文件時，如何讓服務器文件調用正確的函數？有時服務器文件提供回調函數作為參數：
php文件將調用您傳遞的函數作為回調參數：
PHP文件：

<?php $callback = trim($_GET('callback')); $myJSON = '{ "name":"John", "age":30, "city":"New York" }'; echo $callback."(".$myJSON.");"; ?>

javascript :

function clickButton() {   var s = document.createElement("script");   s.src = "jsonp_demo_db.php?callback=myDisplayFunction";     document.body.appendChild(s); }