JSONP 的原理、理解與實例分析

更新時間：2020年05月16日 10:06:05 作者：星耀學(xué)園

這篇文章主要介紹了JSONP 的原理、理解與實例,結(jié)合實例形式分析了JSONP 的基本概念、原理、理解與使用技巧,需要的朋友可以參考下

本文實例講述了JSONP 的原理、理解與實例。分享給大家供大家參考，具體如下：

1.什么是jsonp

1.1 同源策略

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

-1）jsonp只支持get請求

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

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

2. jsonp 原理

動態(tài)添加一個script標簽，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標簽 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?callback=jsonpCallback';
  document.body.insertBefore(script,document.body.firstChild);


</script>

</body>
</html>

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