淺談JSONP的原理、理解與實例

發(fā)布時間：2020-07-27 09:51:44 來源：億速云閱讀：112 作者：小豬欄目：web開發(fā)

小編這次要給大家分享的是淺談JSONP的原理、理解與實例，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

1.什么是jsonp

1.1 同源策略

瀏覽器同源策略的限制，XmlHttpRequest只允許請求當(dāng)前源（相同域名、協(xié)議、端口）的資源。

-1）jsonp只支持get請求

-2）不受同源策略限制，兼容性好不需要XMLHttpRequest（ActiveX）支持,通過js回調(diào)函數(shù)返回結(jié)果

-3）不能解決不同域的兩個頁面之間js調(diào)用的問題

2. jsonp 原理

動態(tài)添加一個script標(biāo)簽，get鏈接上發(fā)送回調(diào)函數(shù)名稱傳給服務(wù)器服務(wù)器獲取回調(diào)函數(shù)名稱返回這個函數(shù)名稱的JS函數(shù)（拼裝函數(shù)） json數(shù)據(jù)作為函數(shù)的實際參數(shù)傳入返回的數(shù)據(jù)是js函數(shù) 在前端調(diào)用回調(diào)函數(shù)（ json數(shù)據(jù)傳入）執(zhí)行回調(diào)函數(shù)

3.實例

先來說說服務(wù)端應(yīng)該返回的數(shù)據(jù)形式如下所示用的php thinphp框架編寫的訪問URL 是

http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback=jsonpCallback callback后面的名字要傳給服務(wù)器的后端拼裝成一個js回調(diào)函數(shù) 這樣前臺json數(shù)據(jù)就作為回調(diào)函數(shù)的參數(shù)傳入獲取到數(shù)據(jù)了

 public function testJsonP(){
    $jsonname =I('get.callback');//獲取URL上的callback名稱 也就是獲取jsonpCallback

    $a = [name=>'張三',sex=>'男',msg=>'返回成功！'];// 一個數(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"}); 不要忘記分號; 這樣返回的才是一個js函數(shù) 前臺肯定有這個函數(shù)名字才行

}

tip:關(guān)聯(lián)數(shù)組　上面例子 $a = array( "msg" => "返回成功！")

前臺訪問URL http://localhost:63343/H5/jsonP.html　動態(tài)添加一個script標(biāo)簽 src里調(diào)用回調(diào)函數(shù) jsonpCallback() . ?callback=jsonpCallback名字隨便起后端獲取的就是jsonpCallback這個名字而已

<!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&#63;callback=jsonpCallback';
  document.body.insertBefore(script,document.body.firstChild);


</script>

</body>
</html>

　我們可以在瀏覽器里這里我用的谷歌直接查看數(shù)據(jù)是否訪問正確切換到Network標(biāo)簽下可以看到生成的訪問地址點擊然后

淺談JSONP的原理、理解與實例　

這下面的圖點擊一下左側(cè)鏈接切換到Response就可以看到響應(yīng)的數(shù)據(jù)了跟前端寫的函數(shù)名要一致里面的json數(shù)據(jù)就是那個函數(shù)的參數(shù) 傳入別忘記有分號;

淺談JSONP的原理、理解與實例

前端我們已經(jīng)console.log 數(shù)據(jù)了也可以查看切換到Console標(biāo)簽下

淺談JSONP的原理、理解與實例

看完這篇關(guān)于淺談JSONP的原理、理解與實例的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

淺談JSONP的原理、理解與實例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽