JSONP跨域獲取JSON資料（含jQuery方法）——李帥醒部落格

Aurora Polaris發表於2016-12-01
JSON跨域jQuery

JSONP跨域獲取JSON資料（含jQuery方法）——李帥醒部落格


首先我要強調JSONP和AJAX沒有半毛錢關係，別把他們混淆！！！只不過他們都是從後臺獲取資料的方法！

前言：

說到AJAX就會不可避免的面臨兩個問題，第一個是AJAX以何種格式來交換資料？第二個是跨域的需求如何解決？這兩個問題目前都有不同的解決方案，比如資料可以用自定義字串或者用XML來描述，跨域可以通過伺服器端代理來解決。

但到目前為止最被推崇或者說首選的方案還是用JSON來傳資料，靠JSONP來跨域。

JSON和JSONP雖然只有一個字母的差別，但其實他們根本不是一回事兒：JSON是一種資料交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域資料互動協議。我們拿最近比較火的諜戰片來打個比方，JSON是地下黨們用來書寫和交換情報的“暗號”，而JSONP則是把用暗號書寫的情報傳遞給自己同志時使用的接頭方式。看到沒？一個是描述資訊的格式，一個是資訊傳遞雙方約定的方法。（這段話來自網路）;

下面來個小案例，通過JSONP跨域從後臺獲取資料。

案例一：

如下，這是後臺給你的一個註冊流程說明，你需要按照他提供的介面，和需要的資料，不過這些都是你們事先協商好的。

[html] view plain copy
  1. 登入註冊流程說明：  
  2.   
  3. 服務地址：  http://10.0.164.251/courseB/jQuery/Day6/user.php  
  4.   
  5. 請求方式為 POST 請求  
  6. 登入註冊使用jsonp  
  7. jsonp的引數名稱為：userCallback  
  8. 登入或註冊  不管 成功與失敗 均以彈框方式告知使用者  
  9.   
  10. 登入介面----  
  11.   
  12. 引數名稱/值：  
  13. type : login  
  14. username : 輸入框的使用者名稱  
  15. password : 輸入框的密碼  
  16.   
  17. 返回資料格式：  
  18. 成功：{  
  19.     status:0,  
  20.     msg : "login success"  
  21. }  
  22.   
  23. 失敗：{  
  24.     status : 1,  
  25.     msg : "username or password is error"  
  26. }  
  27.   
  28. 註冊介面----  
  29.   
  30. 引數名稱/值：  
  31. type : reg  
  32. username : 輸入框的使用者名稱  
  33. password : 輸入框的密碼  
  34.   
  35. 返回資料格式：  
  36. 成功：{  
  37.     status:0,  
  38.     msg : "register success"  
  39. }  
  40.   
  41. 失敗：{  
  42.     status : 2,  
  43.     msg : "register error"  
  44. }  
我們已登入為例（用的jQuery）：
[html] view plain copy
  1.     $(".Login").on("click",function(ev){  
  2.         ev.preventDefault();  
  3.         var use=$('.user').val();//這些是我HTML頁面上表單資料  
  4.         var pwd=$(".pass").val();         
  5.             $.ajax({    
  6.         url: "http://10.0.164.251/courseB/jQuery/Day6/user.php",   //後臺給的介面  
  7.         type:"post",<span style="white-space:pre">                      </span>//請求方式  
  8.         dataType: "jsonp",<span style="white-space:pre">                    </span>//<span style="font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;">jsonp的引數名稱為：userCallback（和後臺商量好的）</span>  
  9.         jsonp: "userCallback",<span style="white-space:pre">                    </span>  
  10.         jsonpCallback: "data",      <span style="white-space:pre">              </span>  
  11.         data: {<span style="white-space:pre">                           </span>//後臺需要的資料  
  12.         <span style="white-space:pre">  </span>type:"login",  
  13.             username:use,  
  14.             password:pwd  
  15.         },  
  16.         success: test  
  17.     })  
  18. })  
  19.   
  20. function test(res) {  
  21.     console.log("jsonpCallback輸出："+ res)<span style="white-space:pre">          </span>後臺返回的資料  
  22. }  

案例二：

下面用原生JS來JSON獲取資料：

前端頁面：

[html] view plain copy
  1. <script type="text/javascript">  
  2.     document.querySelector("button").onclick=function(){  
  3.         alert();  
  4.         document.forms["myForm"].submit;  
  5.     }  
  6. var btn = document.querySelector("button");  
  7. //Ajax與JSONP沒有任何關係  
  8. //但不成文的說法都叫做原生Ajax使用JSONP  
  9. //JSONP 一種被創造出來的資料交換方法  
  10. //利用script標籤的src屬性沒有跨域限制的特點  
  11. //在使用JSONP時，要求前端與後臺必須統一回撥函式名稱  
  12. //例如在前端傳送到後臺 引數為：?a=b&c=d&callback=fun  後臺必須解析引數名為callback的值  
[html] view plain copy
  1. //並且輸出fun(...)  
  2. //前端也必須構建一個函式名為 function fun(...){...}的函式 用於響應後臺的輸出  
  3. btn.onclick = function() {  
  4.     var url = "http://10.0.164.235/domain/ajax/jsonp_myCallback.php?user=admin&pass=123&myCallback=myFun";  
[html] view plain copy
  1. //特別注意，地址後面接的是一個函式，和後臺商量好的函式  
  2.     var script = document.createElement("script");  
  3.     script.setAttribute("src", url);  
  4.     document.getElementsByTagName("head")[0].appendChild(script);  
  5.     //新增後就可以移除,  
  6.     document.getElementsByTagName("head")[0].removeChild(script);  
  7. }  
  8.   
  9. function myFun(res) {  
  10.     console.log("回撥函式被呼叫了");  
  11.     console.log(res);<span style="white-space:pre"> </span>//這個函式裡的引數是從後臺傳入過來的資料。  
  12. }  
  13. </script>  
看看後臺的操作，PHP寫的，雖然和js語法不同，但基本也能看懂。
[php] view plain copy
  1. <?php  
  2. //獲取回撥函式的名稱  
  3. $cbName = $_GET["callback"]; //callback必須與前端名字一樣  
  4. $user = $_GET["user"];  
  5. $pass = $_GET["pass"];  
  6.   
  7. $arr = array("user" => "我的使用者名稱是{$user}", "pass" => "我的密碼是：{$pass}");  
  8.   
  9. echo $cbName . "(" . json_encode($arr) . ")";<span style="white-space:pre">     </span>//這裡就類似於呼叫之前商量好的函式，而傳遞的引數則是後臺給你的資料。  
  10. ?> 

相關文章