Jsonp跨域原理及簡單應用-有解無憂

瀏覽器的同源策略：

同源策略(Same Origin Policy)是一種約定，它是由Netscape提出的一個著名的安全策略，它限制了從同一個源加載的檔案或腳本如何與來自另一個源的資源進行互動，這是一個用于隔離潛在惡意檔案的重要安全機制，

同源的定義：如果兩個頁面的協議，埠（如果有指定）和主機都相同，則兩個頁面具有相同的源，我們也可以把它稱為“協議/主機/埠 tuple”，或簡單地叫做“tuple". ("tuple" ，“元”，是指一些事物組合在一起形成一個整體，比如（1，2）叫二元，（1，2，3）叫三元)

如果協議、埠、主機（域名或IP地址，如果是IP地址則看做一個根域名）、子域名，當其中一個不同，則我們的請求即會發生跨域問題，

下表給出了相對http://store.company.com/dir/page.html同源檢測的示例:

URL	結果	原因
http://store.company.com/dir2/other.html	同源
http://store.company.com/dir/inner/another.html	同源
https://store.company.com/secure.html	不同源	協議不同
http://store.company.com:81/dir/etc.html	不同源	埠不同
http://news.company.com/dir/other.html	不同源	主機域名不同

突破同源策略限制：
1、script標簽的src/img標簽的src，或者說link標簽的href他們沒有被通源策略所限制
2、src或href鏈接的靜態資源，本質上來說也是一個get請求

JSONP是什么？和json有關系嗎?

Json(JavaScript Object Notation) 是一種輕量級的資料交換格式，

JSONP是JSON with Padding的略稱，它是一個非官方非正式的傳輸的協議，它允許在服務器端集成Script tags回傳至客戶端，通過javascript callback的形式實作跨域訪問，

JSONP的簡單實作：

html代碼：（運行在本地http://zrcloud.com/test.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jsonp簡單實體</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h3>JSONP簡單實體</h3>
<script type="text/javascript">
  $(function() {
    $.ajax({
      type:'get',
      async:false,//同步請求
      url:'http://mqcms.com/test.php',
      dataType:'jsonp',
      jsonp:'callback',//傳遞給請求處理程式或頁面的，用以獲得jsonp回呼函式名的引數名(一般默認為:callback)
      jsonpCallback:'test',//自定義的jsonp回呼函式名稱，默認為jQuery自動生成的隨機函式名，也可以寫"?"，jQuery會自動為你處理資料
      success:function(data){
          console.log(data);
      }
    })
  })
</script>
</body>
</html>

PHP服務器端代碼：

<?php
header('Content-Type:application/json; charset=utf-8');

$callback =isset($_GET['callback']) ? trim($_GET['callback']) : '';
$arr=['name'=>'test','age'=>18,'sex'=>1];
echo $callback.'('.json_encode($arr).')';

?>

運行結果：

注：為什么我這次沒有寫test這個函式呢？而且竟然也運行成功了！

這就是jQuery的功勞了，jquery在處理jsonp型別的ajax時（，雖然jquery也把jsonp歸入了ajax，但其實它們真的不是一回事兒），自動幫你生成回呼函式并把資料取出來供success屬性方法來呼叫，

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/105941.html

標籤：PHP

上一篇：Redis常見七種使用場景(PHP實戰)

下一篇：php laravel請求處理管道（裝飾者模式）