首頁 >web前端 >js教程 >詳解JS中的JSON和JSONP

詳解JS中的JSON和JSONP

青灯夜游
青灯夜游轉載
2020-10-23 17:52:413094瀏覽

詳解JS中的JSON和JSONP

簡單地使用json並不能支援跨域資源請求,為了解決這個問題,需要採用jsonp資料交互協定。眾所周知,js檔案的呼叫不受跨域與否的限制,因此如果想透過純web端跨域存取數據,只能在遠端伺服器上設法將json資料封裝進js格式的檔案中,供客戶端呼叫和進一步處理,這就是jsonp協議的原理。

JSON 和 JSONP

JSONP是一種發送JSON資料的方法,無需擔心跨域問題。 JSONP不使用該XMLHttpRequest物件。 JSONP使用3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤代替。
由於跨域策略,從另一個網域請求檔案可能會導致問題。從另一個網域請求外部腳本沒有此問題。 JSONP使用此優勢,並使用腳本標記而不是XMLHttpRequest物件請求檔案。

<script src="demo_jsonp.php">

伺服器檔案

伺服器上的檔案將結果包裝在函數呼叫中:

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

結果傳回對名為“myFunc”的函數的調用,並將JSON資料作為參數。確保客戶端上存在該功能。

JavaScript函數

名為「myFunc」的函數位於客戶端,並準備處理JSON資料:

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

建立動態script標記

根據您放置腳本標記的位置,上面的範例將在頁面載入時執行「myFunc」函數,這不是很令人滿意。只應在需要時建立script標記:
點擊按鈕時建立並插入3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤:

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(&#39;callback&#39;));
$myJSON = &#39;{ "name":"John", "age":30, "city":"New York" }&#39;;
echo $callback."(".$myJSON.");";
?>

javascript :

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

更多程式設計相關知識,請訪問:程式設計入門! !

以上是詳解JS中的JSON和JSONP的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:51cto.com。如有侵權,請聯絡admin@php.cn刪除