瀏覽器與服務器通訊技術——jsonp

除了使用cros實現跨域資源訪問以外，另外一種實現跨域資源訪問的技術是藉助DOM中可以執行跨域請求的功能，在不依賴XHR對象的狀況下發送某種請求。好比藉助<img>，<script>標籤的src屬性。其中最流行的是JSONP技術。

1、跨域加載腳本

先看下面一段代碼:

1 function handleResponse(response){
2     alert("name:"+response.name+","+"age:"+response.age);
3 }
4 
5 jsonData={
6     name:"xiaoming",
7     age:20
8 }
9 handleResponse(jsonData);

上例中，handleResponse方法顯然是能夠訪問jsonData中的數據的。若是咱們把上例中5-9行的腳本放在另外一臺服務器上，命名爲json.js，經過script的src屬性加載這段腳本。最終的效果和上例是等效的，以下例：

1 function handleResponse(response){
2     alert("name:"+response.name+","+"age:"+response.age);
3 }
4 //跨域加載json.js腳本    
5 var script=document.createElement("script");
6 script.src="http://www.somewhere.com/json.js";
7 document.body.insertBefore(script,document.body.firstChild);

放在其餘服務器上的json.js腳本

1 jsonData={
2     name:"xiaoming",
3     age:20
4 }
5 handleResponse(jsonData);

這樣就實現了跨域資源的訪問；

2、什麼是JSONP

經過script的src屬性加載的腳本數據稱爲JSONP。經過分析上例中的json.js腳本，咱們能夠發現JSONP有兩部分組成：1.json數據，好比上例的jsonData，2.回調函數，好比上例的handleResponse。也能夠把JSONP理解爲包含在回調函數中的json,好比：

handleResponse({
    name:"xiaoming",
    age:20
});

3、發送回調函數名

經過上例可知客戶端定義的回調函數名稱和服務器端jsonp中的回調函數名稱必須保持一致。爲了增長靈活性，即客戶端能夠任意定義回調函數名，咱們須要請求服務時把回調函數名做爲url上的查詢字符串發送給服務器，服務器拿到函數名後，再生成jsonp發送回客戶端。客戶端代碼和服務端代碼以下：

客戶端

1 function handleResponse(response){
2     alert("name:"+response.name+","+"age:"+response.age);
3 }
4 
5 var script=document.createElement("script");
6 script.src="http://www.test.com/test/test.php?jsoncallback=handleResponse";//函數名做爲查詢字符串發給服務器
7 document.body.insertBefore(script,document.body.firstChild);    

服務器端php代碼

 1 <?php
 2 
 3 header('Content-type: application/json');
 4 //獲取回調函數名
 5 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
 6 //json數據
 7 $json_data = '{
 8     "name":"xiaoming",
 9     "age":29
10 }';
11 //輸出jsonp格式的數據
12 echo $jsoncallback . "(" . $json_data . ")";
13 
14 ?>

4、jsonp的優缺點

經過jsonp能夠直接跨域訪問響應文本，支持瀏覽器和服務器之間雙向通訊，而且不須要定義服務器上的響應頭文件。使用jsonp的主要缺點是安全問題，因爲jsonp是從其餘域加載代碼並執行，若是其它域不安全，極可能會在響應中夾帶一些惡意代碼。所以在使用不是本身維護的服務時，必定要保證它安全可靠。