JSONP 的原理、理解 與 實(shí)例分析
本文實(shí)例講述了JSONP 的原理、理解 與 實(shí)例。分享給大家供大家參考,具體如下:
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)用的問題
2. jsonp 原理
動(dòng)態(tài)添加一個(gè)script標(biāo)簽,get鏈接上發(fā)送回調(diào)函數(shù)名稱 傳給服務(wù)器 服務(wù)器獲取回調(diào)函數(shù)名稱 返回這個(gè)函數(shù)名稱的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框架編寫的 訪問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名稱 也就是獲取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ù)名字才行 }
tip:關(guān)聯(lián)數(shù)組 上面例子 $a = array( "msg" => "返回成功!")
前臺(tái) 訪問URL http://localhost:63343/H5/jsonP.html 動(dòng)態(tài)添加一個(gè)script標(biāo)簽 src里 調(diào)用回調(diào)函數(shù) jsonpCallback() . ?callback=jsonpCallback名字隨便起 后端獲取的就是jsonpCallback這個(gè)名字而已
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function jsonpCallback(date){ console.log(date); alert(date); alert(date.msg); } var script =document.createElement('script'); script.src='http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback=jsonpCallback'; document.body.insertBefore(script,document.body.firstChild); </script> </body> </html>
我們可以在瀏覽器里 這里我用的谷歌直接查看 數(shù)據(jù)是否訪問正確 切換到Network標(biāo)簽下 可以看到生成的訪問地址 點(diǎn)擊然后
這下面的圖 點(diǎn)擊一下左側(cè)鏈接 切換到Response就可以看到響應(yīng)的數(shù)據(jù)了 跟前端寫的函數(shù)名要一致 里面的json數(shù)據(jù)就是 那個(gè)函數(shù)的參數(shù) 傳入 別忘記有分號(hào);
前端我們已經(jīng)console.log
數(shù)據(jù)了 也可以查看 切換到Console標(biāo)簽下
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中ajax操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Bootstrap 模態(tài)框(Modal)帶參數(shù)傳值實(shí)例
模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。下面通過(guò)本文給大家介紹Bootstrap 模態(tài)框(Modal)帶參數(shù)傳值實(shí)例代碼,需要的朋友參考下吧2017-08-08javascript從右邊截取指定字符串的三種實(shí)現(xiàn)方法
這篇文章主要介紹了javascript從右邊截取指定字符串的三種實(shí)現(xiàn)方法。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11JS+php后臺(tái)實(shí)現(xiàn)文件上傳功能詳解
這篇文章主要介紹了JS+php后臺(tái)實(shí)現(xiàn)文件上傳功能,結(jié)合實(shí)例形式分析了javascript前臺(tái)表單數(shù)據(jù)提交與后臺(tái)php文件傳輸處理相關(guān)操作技巧,需要的朋友可以參考下2019-03-03javascript讓setInteval里的函數(shù)參數(shù)中的this指向特定的對(duì)象
話說(shuō)阿里巴巴今年的校園招聘有一道題目考了一個(gè)知識(shí)點(diǎn),那就是setInterval的參數(shù)函數(shù)里的this指向.2010-01-01原生JavaScript實(shí)現(xiàn)Ajax異步請(qǐng)求
ajax現(xiàn)在是一種非常流行的技術(shù),現(xiàn)在雖然可以利用JQuery或者一些第三方插件甚至微軟提供的一些控件可以方面的實(shí)現(xiàn)ajax功能,但是明白其原理也是非常重要的,下面是來(lái)使用純javascript實(shí)現(xiàn)獲取服務(wù)器端的功能來(lái)展示如何使用純javascript實(shí)現(xiàn)ajax功能,以弄清其原理.2017-11-11