分析PHP下ajax跨域的解法之jsonp實例

coldplay.xixi
發布: 2023-04-09 12:56:01
轉載
2697 人瀏覽過

分析PHP下ajax跨域的解法之jsonp實例

本文實例講述了PHP下ajax跨域的解法之jsonp。分享給大家供大家參考,具體如下:

#首先要說明json和jsonp的差別?

json是一種基於文字的資料交換方式,或稱為描述資料的一種格式。

相關學習推薦:php程式設計(視訊)

var person = {
  "name": "test",
  "age": "25",
  "sex": "男"
};

var data = [1, 2, 3, 4, 5];
登入後複製

而jsonp是一種非官方跨域資料互動協議,該協議允許使用者傳遞一個callback參數給服務端,然後服務端回傳資料時會將這個callback參數當作函數名來包裹住json數據,這樣客戶端就可以隨意自訂自己的函數來自動處理回傳資料了。

例如我在a.com的網站上引用了b.com的一個b.js,但這樣跨域的引用並不會產生錯誤,說明呼叫js檔案時不受跨域的影響。

<script type="text/javascript" src="http://www.b.com/b.js"></script>
登入後複製

那麼我們在b.js裡加入以下程式碼,看看是否能夠執行

alert("I from b");
登入後複製

確定是可以執行。

那麼如果我們在a.com上自已創建一個js函數,而在b.com下的b.js中調用,那是否可行呢?

a.com下的index.html如下:




  
  


  
  <script type="text/javascript" src="http://www.b.com/b.js"></script>

登入後複製

b.com下的b.js如下:

a("from b");
登入後複製

上面也是可以執行的,我們可以看到在b.js中的資料確實正確的傳到了函數a。

問題又來了,a.com中創建的函數名與b.js中調用的函數名必須一致,那麼如何才能讓b.com服務端知道這個函數名,只有透過地址列來傳遞了,加上一個callback=函數名來傳遞。當然callback這個命名可以改,但大家都這麼命名,也就約定俗成了。

a.com下的index.html如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="text/javascript">
    function a(data) {
      alert("uid :" + data.uid + "name :" + data.name);
    }
  </script>

  <!-- 注意这里把b.js改成b.php了 -->
  <script type="text/javascript" src="http://www.b.com/b.php?callback=a"></script>
</body>
</html>
登入後複製

b.com下的b.php如下:

<?php
$callback = !empty($_GET[&#39;callback&#39;]) ? trim($_GET[&#39;callback&#39;]) : &#39;&#39;;

if(!empty($callback)) {
  $data = json_encode(array(
    &#39;uid&#39; => 1,
    &#39;name&#39; => &#39;测试&#39;,
  ));

  echo "{$callback}({$data});";
}
登入後複製

上面也是可以執行的,知道了回呼函數名,b.com服務端處理數據,然後透過字串拼接輸出。

jquery中就已經提供了jsonp的支持,a.com下的index.html如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p class="info"></p>
  <script type="text/javascript" src="http://www.b.com/jquery.js"></script>
  <script type="text/javascript">
  $.ajax({
    dataType: "jsonp",
    url: "http://www.b.com/b.php",
    jsonp: "callback",
    success: function(data) {
      $(".info").text("uid:" + data.uid + " name:" + data.name);
    }
  });
  </script>
</body>
</html>
登入後複製

跨域策略限制情況表如下:

##http:// www.a.com:8000/a.js##http://www.a. com/a.js主域相同,子網域不同不允許##http:// www.a.com/a.js http://a.com/b.js##http:/ /www.a.com/a.js      http://www.b.com/b.js#不允許
URL 說明 允許通訊
http:// www.a.com/a.js
http://www.a.com/b.js
在同一網域下 允許
http://www.a.com /lab/a.js
http://www.a.com/script/b.js
同一網域下不同資料夾 #允許

## http://www.a.com/b.js
相同域名,不同埠 不允許
#http://www. a.com/a.js
https://www.a.com/b.js
同一域名,不同協定 不允許
#http://www. a.com/a.js
http://127.0.0.100/b.js
網域與網域對應ip #不允許
http://script.a.com/b.js

同一域名,不同二級域名(同上)
不允許
不同網域
##

以上是分析PHP下ajax跨域的解法之jsonp實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:jb51.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板