小編這次要給大家分享的是淺談JSONP的原理、理解與實(shí)例,文章內(nèi)容豐富,感興趣的小伙伴可以來(lái)了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
1.什么是jsonp
1.1 同源策略
瀏覽器同源策略的限制,XmlHttpRequest只允許請(qǐng)求當(dāng)前源(相同域名、協(xié)議、端口)的資源。
-1)jsonp只支持get請(qǐng)求
-2)不受同源策略限制 ,兼容性好 不需要XMLHttpRequest(ActiveX)支持,通過(guò)js回調(diào)函數(shù)返回結(jié)果
-3)不能解決 不同域的兩個(gè)頁(yè)面之間js調(diào)用的問(wèn)題
2. jsonp 原理
動(dòng)態(tài)添加一個(gè)script標(biāo)簽,get鏈接上發(fā)送回調(diào)函數(shù)名稱(chēng) 傳給服務(wù)器 服務(wù)器獲取回調(diào)函數(shù)名稱(chēng) 返回這個(gè)函數(shù)名稱(chēng)的JS函數(shù)(拼裝函數(shù)) json數(shù)據(jù)作為函數(shù)的實(shí)際參數(shù)傳入 返回的數(shù)據(jù)是js函數(shù) 在前端調(diào)用回調(diào)函數(shù)( json數(shù)據(jù)傳入) 執(zhí)行回調(diào)函數(shù)
3.實(shí)例
先來(lái)說(shuō)說(shuō) 服務(wù)端應(yīng)該返回的數(shù)據(jù)形式 如下所示 用的php thinphp框架編寫(xiě)的 訪(fǎng)問(wèn)URL 是
http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback=jsonpCallback callback后面的名字要傳給服務(wù)器的 后端拼裝成一個(gè)js回調(diào)函數(shù) 這樣前臺(tái)json數(shù)據(jù)就作為回調(diào)函數(shù)的參數(shù)傳入 獲取到數(shù)據(jù)了
public function testJsonP(){ $jsonname =I('get.callback');//獲取URL上的callback名稱(chēng) 也就是獲取jsonpCallback $a = [name=>'張三',sex=>'男',msg=>'返回成功!'];// 一個(gè)數(shù)組數(shù)據(jù) $json = json_encode($a);// 轉(zhuǎn)成json數(shù)據(jù) echo $jsonname.'('.$json.');';//正確的格式應(yīng)該是這樣 jsonpCallback({"name":"\u5f20\u4e09","sex":"\u7537","msg":"\u8fd4\u56de\u6210\u529f\uff01"}); 不要忘記分號(hào); 這樣返回的才是一個(gè)js函數(shù) 前臺(tái)肯定有這個(gè)函數(shù)名字才行 }
分享文章:淺談JSONP的原理、理解與實(shí)例-創(chuàng)新互聯(lián)
文章地址:http://sd-ha.com/article22/dcepjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、做網(wǎng)站、ChatGPT、靜態(tài)網(wǎng)站、軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容