AJAX 跨域請求 - JSONP擷取JSON資料

標籤：utf-8   允許   elements   pad   技術   strong   ssd   stc   document   

1、什麼是JSONP？

　　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>  

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>   

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)";   

如果將上述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>  

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

AJAX 跨域請求 - JSONP擷取JSON資料