jsonp的原理和實現

標籤：第三方庫   create   部分   get   註冊   tee   伺服器   end   res   

什麼是JSONP？

javascript進階程式設計中是這樣介紹jsonp的:

jsonp是JSON with padding(填充式JSON或參數式JSON )的簡寫，是應用JSON的一種新方法，在後來的Web服務中非常流。jsonp看起來與json差不多，只不過是被包含在函數調用中的json。jsonp由回呼函數和資料兩部分組成。

簡單點說，jsonp是一種跨域通訊的手段，它的原理其實很簡單：

1. 首先是利用script標籤的src屬性來實現跨域。
2. 通過將前端方法作為參數傳遞到服務端，然後由服務的注入參數之後再返回，實現伺服器向用戶端通訊。
3. 由於使用script標籤的src屬性，因此只支援get方法。

下面詳細講解如何?jsonp。

一.實現流程

1.設定一個script標籤

 <script src="http://jsonp.js?callback=xxx"></script>

2.callback定義了一個函數名，而遠程服務端通過調用指定的函數並參數參數來實現傳遞參數，將fn(response)傳遞迴用戶端。

$callback = !empty($_GET[‘callback‘]) ? $_GET[‘callback‘] : ‘callback‘;echo $callback.‘(.json_encode($data).)‘;

 3.用戶端接收到返回的js指令碼，開始解析和執行fn(response)  二.jsonp簡單實現 1.在瀏覽器端:首先全域註冊一個callback回呼函數，記住這個函數名字(比如:result)，這個函數接收一個參數，參數是服務端返回的資料，函數的具體內容時處理這個資料。然後動態產生一個script標籤，src為：請求資源的地址 + 擷取函數的欄位名 + 回呼函數名，這裡 擷取函數欄位名是要和服務端約定好的，是為了讓服務端拿到回呼函數名稱。（比如：www.example.com?callbackName = result） 

function result (data) {
  console.log(data.name)
}
var jsonp = document.createElement(‘script‘)
jsonp.src = ‘www.example.com?callbackName=result‘
document.getElementsByTagName(‘head‘)[0].appendChild(jsonp)

 2.服務端在接收到瀏覽器端script的請求之後，從url的query的callbackName擷取到回呼函數的名字，例子中是 result。然後動態產生一段js片段去給這個函數傳入參數執行這個函數。比如： 

result({name:‘Joy‘})

 

3.執行 服務端返回這個script之後，瀏覽器端擷取到script資源，然後會立即執行這個js，也就是上面那個片段，這樣就能根據之前寫好的回呼函數處理這些資料了。 在一些第三方庫往往都會封裝jsonp的操作，比如jquery的$.getJSON

jsonp的原理和實現