欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

淺談JSONP的原理、理解與實(shí)例

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

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、彰武網(wǎng)絡(luò)推廣、小程序開發(fā)、彰武網(wǎng)絡(luò)營銷、彰武企業(yè)策劃、彰武品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供彰武建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：chinadenli.net

1.什么是jsonp

1.1 同源策略 

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

-1）jsonp只支持get請求

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

-3）不能解決 不同域的兩個(gè)頁面之間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í)例

先來說說 服務(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ù) 這樣前臺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"}); 不要忘記分號; 這樣返回的才是一個(gè)js函數(shù) 前臺肯定有這個(gè)函數(shù)名字才行

}

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

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


</script>

</body>
</html>

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

淺談JSONP的原理、理解與實(shí)例　

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

淺談JSONP的原理、理解與實(shí)例

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

淺談JSONP的原理、理解與實(shí)例

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

網(wǎng)站欄目：淺談JSONP的原理、理解與實(shí)例
網(wǎng)站鏈接：http://chinadenli.net/article28/jpcjjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、外貿(mào)建站、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)、企業(yè)建站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)