Jsonp及其實現原理

參考資料

1、先說說JSON

首先JSON是一種基於文本的數據交換方式，或者叫作數據描述格式。

JSON的優勢：

1. 基於純文本，跨平臺傳遞極其簡單；

2. Javascript原生支持，後臺語言幾乎所有支持；

3. 輕量級數據格式，佔用字符數量極少，特別適合互聯網傳遞；

4. 可讀性較強，雖然比不上XML那麼一目瞭然，但在合理的依次縮進以後仍是很容易識別的；

5. 容易編寫和解析，固然前提是你要知道數據結構；

2、同源策略

一個衆所周知的問題，因爲同源策略，Ajax直接請求普通文件存在跨域無權限訪問的問題。

同源策略，它是由Netscape提出的一個著名的安全策略，如今全部支持JavaScript的瀏覽器都會使用這個策略。

可是，Web頁面上調用js文件時則不受是否跨域的影響，不只如此，凡是擁有」src」屬性的標籤都擁有跨域的能力，好比<script>、<img>、<iframe>。

所以，若是想經過純web端跨域訪問數據就只有一種方案，那就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶端調用和進一步處理。

3、JSONP

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可讓網頁從別的域名（網站）那獲取數據，即跨域讀取數據。

客戶端經過與調用腳本如出一轍的方式，來調用跨域服務器上動態生成的js格式文件（通常以JSON爲後綴），顯而易見，服務器之因此要動態生成JSON文件，目的就在於把客戶端須要的數據裝入進去。

客戶端在對JSON文件調用成功以後，也就得到了本身所需的數據，剩下的就是按照本身需求進行處理和展示了，這種獲取遠程數據的方式看起來很是像AJAX，但其實並不同。

爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，也就是JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

ajax和jsonp本質上是徹底不一樣的東西。ajax的核心是經過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。

4、代碼

以兩段簡單的代碼來講明jsonp的運行方式：

• 原生JS

<button onclick="jsonpServer('jsonp.php')">JSONP</button>

function jsonpServer(url) {
    var script = document.createElement("script");
    script.setAttribute("src", url);
    document.body.appendChild(script);
}   
function JSON_CALLBACK(data) {
    console.log(data);
}

<?php
header('Content-Type: application/javascript; charset=UTF-8');
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>

• jQuery

  • type：請求方式 GET/POST

  • url:請求地址

  • async:布爾類型，默認爲true 表示請求是否爲異步，若是爲false表示爲同步。

  • dataType：返回的數據類型

  • jsonp：傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(通常默認爲callback)

  • jsonpCallback：自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據

  • success：調用成功執行的函數

  • error：調用異常處理函數

$.ajax({
    url:'index.php',
    type:'get',
    dataType:'jsonp',
    // jsonp:'JSON_CALLBACK',
    jsonpCallback:'JSON_CALLBACK',
    success:function(data){
        console.log(data)
    }
})

<?php
header('Content-Type: application/javascript; charset=UTF-8');
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>