分别使用FlyJSONP和JQuery实现跨域的异步请求

分别使用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. --%>