您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)JS中的JSON和JSONP是什么,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
簡(jiǎn)單地使用json并不能支持跨域資源請(qǐng)求,為了解決這個(gè)問(wèn)題,需要采用jsonp數(shù)據(jù)交互協(xié)議。眾所周知,js文件的調(diào)用不受跨域與否的限制,因此如果想通過(guò)純web端跨域訪問(wèn)數(shù)據(jù),只能在遠(yuǎn)程服務(wù)器上設(shè)法將json數(shù)據(jù)封裝進(jìn)js格式的文件中,供客戶端調(diào)用和進(jìn)一步處理,這就是jsonp協(xié)議的原理。
JSON 和 JSONP
JSONP是一種發(fā)送JSON數(shù)據(jù)的方法,無(wú)需擔(dān)心跨域問(wèn)題。JSONP不使用該XMLHttpRequest對(duì)象。JSONP使用<script>標(biāo)簽代替。
由于跨域策略,從另一個(gè)域請(qǐng)求文件可能會(huì)導(dǎo)致問(wèn)題。從另一個(gè)域請(qǐng)求外部腳本沒(méi)有此問(wèn)題。JSONP使用此優(yōu)勢(shì),并使用腳本標(biāo)記而不是XMLHttpRequest對(duì)象請(qǐng)求文件。
<script src="demo_jsonp.php">
服務(wù)器文件
服務(wù)器上的文件將結(jié)果包裝在函數(shù)調(diào)用中:
<?php $myJSON = '{"name":"John", "age":30, "city":"New York"}'; echo "myFunc(".$myJSON.");"; ?>
結(jié)果返回對(duì)名為“myFunc”的函數(shù)的調(diào)用,并將JSON數(shù)據(jù)作為參數(shù)。確??蛻舳松洗嬖谠摴δ?。
JavaScript函數(shù)
名為“myFunc”的函數(shù)位于客戶端,并準(zhǔn)備處理JSON數(shù)據(jù):
function myFunc(myObj) { document.getElementById("demo").innerHTML = myObj.name; } xmlhttp.send("x=" + dbParam);
創(chuàng)建動(dòng)態(tài)script標(biāo)記
根據(jù)您放置腳本標(biāo)記的位置,上面的示例將在頁(yè)面加載時(shí)執(zhí)行“myFunc”函數(shù),這不是很令人滿意。只應(yīng)在需要時(shí)創(chuàng)建script標(biāo)記:
單擊按鈕時(shí)創(chuàng)建并插入<script>標(biāo)記:
function clickButton() { var s = document.createElement("script"); s.src = "demo_jsonp.php"; document.body.appendChild(s); }
動(dòng)態(tài)JSONP結(jié)果
上面的例子仍然是非常靜態(tài)的。通過(guò)將JSON發(fā)送到php文件使示例動(dòng)態(tài)化,并讓php文件根據(jù)獲取的信息返回JSON對(duì)象。
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()將請(qǐng)求轉(zhuǎn)換為對(duì)象 。
訪問(wèn)數(shù)據(jù)庫(kù),并使用請(qǐng)求的數(shù)據(jù)填充數(shù)組。
將數(shù)組添加到對(duì)象。
使用json_encode()函數(shù)將數(shù)組轉(zhuǎn)換為JSON 。
在返回對(duì)象周圍包裹“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ù)器文件時(shí),如何讓服務(wù)器文件調(diào)用正確的函數(shù)?有時(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); }
關(guān)于JS中的JSON和JSONP是什么就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。