AJAX 跨域請求

標籤：style   blog   http   color   java   使用   os   io   

Asynchronous JavaScript and XML (Ajax) 是驅動新一代 Web 網站（流行術語為 Web 2.0 網站）的關鍵技術。Ajax 允許在不干擾 Web 應用程式的顯示和行為的情況下在後台進行資料檢索。使用 XMLHttpRequest函數擷取資料，它是一種 API，允許用戶端 JavaScript 通過 HTTP 串連到遠程伺服器。Ajax 也是許多 mashup 的驅動力，它可將來自多個地方的內容整合為單一 Web 應用程式。

 

不過，由於受到瀏覽器的限制，該方法不允許跨域通訊。如果嘗試從不同的域請求資料，會出現安全錯誤。如果能控制數 據駐留的遠程伺服器並且每個請求都前往同一域，就可以避免這些安全錯誤。但是，如果僅停留在自己的伺服器上，Web 應用程式還有什麼用處呢？如果需要從多個第三方伺服器收集資料時，又該怎麼辦？

 

理解同源策略限制

同源策略阻止從一個域上載入的指令碼擷取或操作另一個域上的文件屬性。也就是說，受到請求的 URL 的域必須與當前 Web 頁面的域相同。這意味著瀏覽器隔離來自不同源的內容，以防止它們之間的操作。這個瀏覽器策略很舊，從 Netscape  Navigator 2.0 版本開始就存在。 

 

克服該限制的一個相對簡單的方法是讓 Web 頁面向它源自的 Web 服務器請求資料，並且讓 Web 服務器像代理一樣將請求轉寄給真正的第三方伺服器。儘管該技術獲得了普遍使用，但它是不可伸縮的。另一種方式是使用架構要素在當前 Web 頁面中建立新地區，並且使用 GET請求擷取任何第三方資源。不過，擷取資源後，架構中的內容會受到同源策略的限制。

 

克服該限制更理想方法是在 Web 頁面中插入動態指令碼元素，該頁面源指向其他域中的服務 URL 並且在自身指令碼中擷取資料。指令碼載入時它開始執行。該方法是可行的，因為同源策略不阻止動態指令碼插入，並且將指令碼看作是從提供 Web 頁面的域上載入的。但如果該指令碼嘗試從另一個域上載入文檔，就不會成功。幸運的是，通過添加 JavaScript Object Notation  (JSON) 可以改進該技術。

 

1、什麼是JSONP？

 

要瞭解JSONP，不得不提一下JSON，那麼什麼是JSON？

JSON is a subset of the object literal notation of JavaScript. Since  JSON is a subset of JavaScript, it can be used in the language with no  muss or fuss.

JSONP(JSON with Padding)是一個非官方的協議，它允許在伺服器端整合Script tags返回至用戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

 

2、JSONP有什麼用？

由於同源策略的限制，XmlHttpRequest只允許請求當前源（網域名稱、協議、連接埠）的資源，為了實現跨域請求，可以通過script標籤實現跨域請求，然後在服務端輸出JSON資料並執行回呼函數，從而解決了跨域的資料請求。

 

3、如何使用JSONP？

下邊這一DEMO實際上是JSONP的簡單表現形式，在用戶端聲明回呼函數之後，用戶端通過script標籤向伺服器跨域請求資料，然後服務端返回相應的資料並動態執行回呼函數。

 

HTML代碼 （任一）：

 

Html代碼

1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
2. <script type="text/javascript"> 
3.     function jsonpCallback(result) { 
4.         //alert(result); 
5.         for(var i in result) { 
6.             alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc. 
7.         } 
8.     } 
9.     var JSONP=document.createElement("script"); 
10.     JSONP.type="text/javascript"; 
11.     JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback"; 
12.     document.getElementsByTagName("head")[0].appendChild(JSONP); 
13. </script> 

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><script type="text/javascript">function jsonpCallback(result) {//alert(result);for(var i in result) {alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc.}}var JSONP=document.createElement("script");JSONP.type="text/javascript";JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";document.getElementsByTagName("head")[0].appendChild(JSONP);</script>

或者

 

Html代碼

1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
2. <script type="text/javascript"> 
3.     function jsonpCallback(result) { 
4.         alert(result.a); 
5.         alert(result.b); 
6.         alert(result.c); 
7.         for(var i in result) { 
8.             alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc. 
9.         } 
10.     } 
11. </script> 
12. <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script> 

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><script type="text/javascript">function jsonpCallback(result) {alert(result.a);alert(result.b);alert(result.c);for(var i in result) {alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc.}}</script><script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

 

JavaScript的連結，必須在function的下面。

 

服務端PHP代碼 （services.php）：

 

Php代碼

1. <?php 
2.  
3. //服務端返回JSON資料 
4. $arr=array(‘a‘=>1,‘b‘=>2,‘c‘=>3,‘d‘=>4,‘e‘=>5); 
5. $result=json_encode($arr); 
6. //echo $_GET[‘callback‘].‘("Hello,World!")‘; 
7. //echo $_GET[‘callback‘]."($result)"; 
8. //動態執行回呼函數 
9. $callback=$_GET[‘callback‘]; 
10. echo $callback."($result)"; 

<?php//服務端返回JSON資料$arr=array(‘a‘=>1,‘b‘=>2,‘c‘=>3,‘d‘=>4,‘e‘=>5);$result=json_encode($arr);//echo $_GET[‘callback‘].‘("Hello,World!")‘;//echo $_GET[‘callback‘]."($result)";//動態執行回呼函數$callback=$_GET[‘callback‘];echo $callback."($result)";

如果將上述JS用戶端代碼用jQuery的方法來實現，也非常簡單。

 

$.getJSON $.ajax $.get

 

用戶端JS代碼在jQuery中的實現方式1：

 

Js代碼

1. <script type="text/javascript" src="jquery.js"></script> 
2. <script type="text/javascript"> 
3.     $.getJSON("http://crossdomain.com/services.php?callback=?", 
4.     function(result) { 
5.         for(var i in result) { 
6.             alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc. 
7.         } 
8.     }); 
9. </script> 

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$.getJSON("http://crossdomain.com/services.php?callback=?",function(result) {for(var i in result) {alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc.}});</script>

用戶端JS代碼在jQuery中的實現方式2：

 

Js代碼

1. <script type="text/javascript" src="jquery.js"></script> 
2. <script type="text/javascript"> 
3.     $.ajax({ 
4.         url:"http://crossdomain.com/services.php", 
5.         dataType:‘jsonp‘, 
6.         data:‘‘, 
7.         jsonp:‘callback‘, 
8.         success:function(result) { 
9.             for(var i in result) { 
10.                 alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc. 
11.             } 
12.         }, 
13.         timeout:3000 
14.     }); 
15. </script> 

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$.ajax({url:"http://crossdomain.com/services.php",dataType:‘jsonp‘,data:‘‘,jsonp:‘callback‘,success:function(result) {for(var i in result) {alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc.}},timeout:3000});</script>

用戶端JS代碼在jQuery中的實現方式3：

 

Js代碼

1. <script type="text/javascript" src="jquery.js"></script> 
2. <script type="text/javascript"> 
3.     $.get(‘http://crossdomain.com/services.php?callback=?‘, {name: encodeURIComponent(‘tester‘)}, function (json) { for(var i in json) alert(i+":"+json[i]); }, ‘jsonp‘); 
4. </script> 

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$.get(‘http://crossdomain.com/services.php?callback=?‘, {name: encodeURIComponent(‘tester‘)}, function (json) { for(var i in json) alert(i+":"+json[i]); }, ‘jsonp‘);</script>

其中 jsonCallback 是用戶端註冊的，擷取跨網域服務器上的json資料後，回調的函數。 http://crossdomain.com/services.php?callback=jsonpCallback 這個 url 是跨網域服務器取 json 資料的介面，參數為回呼函數的名字，返回的格式為

 

Js代碼

1. jsonpCallback({msg:‘this is json data‘}) 

jsonpCallback({msg:‘this is json data‘})

Jsonp原理： 首先在用戶端註冊一個callback, 然後把callback的名字傳給伺服器。
此時，伺服器先產生 json 資料。 然後以 javascript 文法的方式，產生一個function , function 名字就是傳遞上來的參數 jsonp.
最後將 json 資料直接以入參的方式，放置到 function 中，這樣就產生了一段 js 文法的文檔，返回給用戶端。
用戶端瀏覽器，解析script標籤，並執行返回的 javascript 文檔，此時資料作為參數，傳入到了用戶端預先定義好的 callback 函數裡.（動態執行回呼函數）

使用JSON的優點在於：

• 比XML輕了很多，沒有那麼多冗餘的東西。
• JSON也是具有很好的可讀性的，但是通常返回的都是壓縮過後的。不像XML這樣的瀏覽器可以直接顯示，瀏覽器對於JSON的格式化的顯示就需要藉助一些外掛程式了。
• 在JavaScript中處理JSON很簡單。
• 其他語言例如PHP對於JSON的支援也不錯。

JSON也有一些劣勢：

• JSON在服務端語言的支援不像XML那麼廣泛，不過JSON.org上提供很多語言的庫。
• 如果你使用eval()來解析的話，會容易出現安全問題。

儘管如此，JSON的優點還是很明顯的。他是Ajax資料互動的很理想的資料格式。

 

主要提示：

JSONP 是構建 mashup 的強大技術，但不幸的是，它並不是所有跨域通訊需求的萬靈藥。它有一些缺陷，在提交開發資源之前必須認真考慮它們。

 

第一，也是最重要的一點，沒有關於 JSONP 調用的錯誤處理。如果動態指令碼插入有效，就執行調用；如果無效，就靜默失敗。失敗是沒有任何提示的。例如，不能從伺服器捕捉到 404 錯誤，也不能取消或重新開始請求。不過，等待一段時間還沒有響應的話，就不用理它了。（未來的 jQuery 版本可能有終止 JSONP 請求的特性）。

 

JSONP 的另一個主要缺陷是被不信任的服務使用時會很危險。因為 JSONP 服務返回打包在函數調用中的 JSON 響應，而函數調用是由瀏覽器執行的，這使宿主 Web 應用程式更容易受到各類攻擊。如果打算使用 JSONP 服務，瞭解它能造成的威脅非常重要。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　摘自：http://justcoding.iteye.com/blog/1366102天梯夢