JavaScript中的 JSON 和 JSONP

時間 2020-01-14

標籤 javascript json jsonp 欄目 JavaScript 简体版

原文原文鏈接

JSON 和 JSONP

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

<script src="demo_jsonp.php">

服務器文件

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

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

結果返回對名爲「myFunc」的函數的調用，並將JSON數據做爲參數。確保客戶端上存在該功能。html

JavaScript函數

名爲「myFunc」的函數位於客戶端，並準備處理JSON數據：java

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

建立動態script標記

根據您放置腳本標記的位置，上面的示例將在頁面加載時執行「myFunc」函數，這不是很使人滿意。只應在須要時建立script標記：
單擊按鈕時建立並插入<script>標記：mysql

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

動態JSONP結果

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

<?php
header("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()」sql

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文件：json

<?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);
}

更多的JSON描述