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

JSON 和 JSONP

JSONP是一種發(fā)送JSON數(shù)據(jù)的方法，無需擔(dān)心跨域問題。JSONP不使用該XMLHttpRequest對象。JSONP使用

由于跨域策略，從另一個域請求文件可能會導(dǎo)致問題。從另一個域請求外部腳本沒有此問題。JSONP使用此優(yōu)勢，并使用腳本標記而不是XMLHttpRequest對象請求文件。

服務(wù)器文件

服務(wù)器上的文件將結(jié)果包裝在函數(shù)調(diào)用中：<?php

$myJSON = '{"name":"John", "age":30, "city":"New York"}';

echo "myFunc(".$myJSON.");";

?>

結(jié)果返回對名為“myFunc”的函數(shù)的調(diào)用，并將JSON數(shù)據(jù)作為參數(shù)。確?？蛻舳松洗嬖谠摴δ?。

JavaScript函數(shù)

名為“myFunc”的函數(shù)位于客戶端，并準備處理JSON數(shù)據(jù)：function myFunc(myObj) {

document.getElementById("demo").innerHTML = myObj.name;

}

xmlhttp.send("x=" + dbParam);

創(chuàng)建動態(tài)script標記

根據(jù)您放置腳本標記的位置，上面的示例將在頁面加載時執(zhí)行“myFunc”函數(shù)，這不是很令人滿意。只應(yīng)在需要時創(chuàng)建script標記：

單擊按鈕時創(chuàng)建并插入

var s = document.createElement("script");

s.src = "demo_jsonp.php";

document.body.appendChild(s);

}

動態(tài)JSONP結(jié)果

上面的例子仍然是非常靜態(tài)的。通過將JSON發(fā)送到php文件使示例動態(tài)化，并讓php文件根據(jù)獲取的信息返回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函數(shù)json_decode()將請求轉(zhuǎn)換為對象 。

訪問數(shù)據(jù)庫，并使用請求的數(shù)據(jù)填充數(shù)組。

將數(shù)組添加到對象。

使用json_encode()函數(shù)將數(shù)組轉(zhuǎn)換為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;

}

回調(diào)函數(shù)

當(dāng)您無法控制服務(wù)器文件時，如何讓服務(wù)器文件調(diào)用正確的函數(shù)？有時服務(wù)器文件提供回調(diào)函數(shù)作為參數(shù)：

php文件將調(diào)用您傳遞的函數(shù)作為回調(diào)參數(shù)：

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

}

以上就是JavaScript中的JSON和JSONP的詳細內(nèi)容，更多請關(guān)注html中文網(wǎng)其它相關(guān)文章！

總結(jié)

以上是生活随笔為你收集整理的jsonp请求html页面,JavaScript中的JSON和JSONP的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。