分別使用FlyJSONP和JQuery實現跨域的異步請求

直接上代碼吧，介紹方面的東西都在代碼注釋裡

首先是使用FlyJSONP實現跨域的異步請求

1. <%@ page language="java" pageEncoding="UTF-8"%>  
2. <script type="text/javascript" src="js/flyjsonp.min.js"></script>  
3. <script type="text/javascript">  
4.     function getJFBCustomState(){  
5.         FlyJSONP.init({debug: true}); //初始化FlyJSONP的實例，參數debug可設置為true或false   
6.         FlyJSONP.post({  
7.             url: 'http://123.125.**.***:8088/ecpaycus/web/getCustomizeByPhoneNo',  
8.             parameters: {phoneNo:'18601148104'},  
9.             success: function(data){  
10.                 var customState = data.customState;  
11.                 alert('服務器返回結果為：' + customState);  
12.             }  
13.             /* 
14.             success: function(data){ 
15.                 var customState = data.customState; 
16.                 alert('服務器返回結果為：' + customState); 
17.             }, 
18.             error: function(errorMsg){ 
19.                 alert('22'); 
20.                 console.log(errorMsg); 
21.             } 
22.             */  
23.         });  
24.     }  
25. </script>  
26. <span style="color:blue; text-decoration:underline; cursor:pointer;" onclick="getJFBCustomState();">點此完成定制</span>  
27.   
28. <%--  
29. ==========================================================================================  
30. FlyJSONP  
31. 主頁：http://alotaiba.github.com/FlyJSONP/   
32. 概述：FlyJSONP是一個應用JSONP實現跨域請求的相當輕量級的JavaScript類庫  
33.      FlyJSONP不依賴於任何JavaScript框架，只需設置一些參數便能夠用它實現跨域的POST和GET請求  
34. 補充：本示例在IE9.0.8112.16421和FireFox9.0.1上測試，均通過  
35.       另外，我是在這個網站發現它的-->http://site518.net/javascript-cross-domain-request/   
36. 用法：上面是客戶端代碼，下面是服務端代碼  
37.      String phoneNo = request.getParameter("phoneNo"));  
38.      //TODO ...   
39.      response.setContentType("application/json; charset=UTF-8");  
40.      response.getWriter().print("{customState: 'hasCustomized'}");  
41. 注意：服務端輸出給客戶端時，輸出的必須是json字符串，否則客戶端無法接收  
42. ==========================================================================================  
43. --%>  

1. <%@ page language="java" pageEncoding="UTF-8"%>  
2. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>  
3. <script type="text/javascript">  
4.     $(function(){  
5.         $('#validateCustom').click(function(){  
6.             $.getJSON('http://123.125.**.***:8088/ecpaycus/web/getCustomizeByPhoneNo?jsoncallback=?&phoneNo=18601148104',  
7.                 function(json){  
8.                     var customState = json.customState;  
9.                     alert('服務端返回結果為：' + customState);  
10.                 }  
11.             );  
12.         });  
13.     });  
14. </script>  
15. <span style="color:blue; text-decoration:underline; cursor:pointer;" id="validateCustom">點此完成定制</span>  
16.   
17. <%--  
18. ==========================================================================================  
19. 說明：本示例在IE9.0.8112.16421和FireFox9.0.1上測試，均通過  
20. 用法：上面是客戶端代碼，下面是服務端代碼  
21.      String phoneNo = request.getParameter("phoneNo"));  
22.      //TODO ...   
23.      String jsoncallback = request.getParameter("jsoncallback");  
24.      String jsonReturn = "{customState: 'hasCustomized'}";  
25.      response.setContentType("application/json; charset=UTF-8");  
26.      response.getWriter().print(jsoncallback + "(" + jsonReturn + ")");  
27. 注意：服務端輸出給客戶端時，輸出的必須是json字符串，否則客戶端無法接收  
28.       且，客戶端請求時，必須提供回調函數名，並以參數形式放到請求的URL後面  
29.       服務端輸出給客戶端時，必須將接收到的回調函數名字放到json字符串的前面  
30. ==========================================================================================  
31. --%>