Jsonp跨域原理及簡單應用

時間 2019-11-26

標籤 jsonp 原理簡單應用欄目 JSON 简体版

原文原文鏈接

瀏覽器的同源策略：javascript

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

同源的定義：若是兩個頁面的協議，端口（若是有指定）和主機都相同，則兩個頁面具備相同的源。咱們也能夠把它稱爲「協議/主機/端口 tuple」，或簡單地叫作「tuple". ("tuple" ，「元」，是指一些事物組合在一塊兒造成一個總體，好比（1，2）叫二元，（1，2，3）叫三元)html

若是協議、端口、主機（域名或IP地址，若是是IP地址則看作一個根域名）、子域名，當其中一個不一樣，則咱們的請求即會發生跨域問題。java

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

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	不一樣源	主機域名不一樣

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

JSONP是什麼？和json有關係嗎?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).')';

?>