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

直接上代码吧，介绍方面的东西都在代码注释里

首先是使用FlyJSONP实现跨域的异步请求

1. <%@pagelanguage="java"pageEncoding="UTF-8"%>
2. <scripttype="text/javascript"src=../../"js/flyjsonp.min.js"></script>
3. <scripttype="text/javascript">
4. functiongetJFBCustomState(){
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. varcustomState=data.customState;
11. alert('服务器返回结果为：'+customState);
12. }
13. /*
14. success:function(data){
15. varcustomState=data.customState;
16. alert('服务器返回结果为：'+customState);
17. },
18. error:function(errorMsg){
19. alert('22');
20. console.log(errorMsg);
21. }
22. */
23. });
24. }
25. </script>
26. <spanstyle="color:blue;text-decoration:underline;cursor:pointer;"οnclick="getJFBCustomState();">点此完成定制</span>
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. StringphoneNo=request.getParameter("phoneNo"));
38. //TODO...
39. response.setContentType("application/json;charset=UTF-8");
40. response.getWriter().print("{customState:'hasCustomized'}");
41. 注意：服务端输出给客户端时，输出的必须是json字符串，否则客户端无法接收
42. ==========================================================================================
43. --%>

接下来就是使用JQuery实现跨域的异步请求

1. <%@pagelanguage="java"pageEncoding="UTF-8"%>
2. <scripttype="text/javascript"src=../../"js/jquery-1.7.1.min.js"></script>
3. <scripttype="text/javascript">
4. $(function(){
5. $('#validateCustom').click(function(){
6. $.getJSON('http://123.125.**.***:8088/ecpaycus/web/getCustomizeByPhoneNo?jsoncallback=?&phoneNo=18601148104',
7. function(json){
8. varcustomState=json.customState;
9. alert('服务端返回结果为：'+customState);
10. }
11. );
12. });
13. });
14. </script>
15. <spanstyle="color:blue;text-decoration:underline;cursor:pointer;"id="validateCustom">点此完成定制</span>
17. <%--
18. ==========================================================================================
19. 说明：本示例在IE9.0.8112.16421和FireFox9.0.1上测试，均通过
20. 用法：上面是客户端代码，下面是服务端代码
21. StringphoneNo=request.getParameter("phoneNo"));
22. //TODO...
23. Stringjsoncallback=request.getParameter("jsoncallback");
24. StringjsonReturn="{customState:'hasCustomized'}";
25. response.setContentType("application/json;charset=UTF-8");
26. response.getWriter().print(jsoncallback+"("+jsonReturn+")");
27. 注意：服务端输出给客户端时，输出的必须是json字符串，否则客户端无法接收
28. 且，客户端请求时，必须提供回调函数名，并以参数形式放到请求的URL后面
29. 服务端输出给客户端时，必须将接收到的回调函数名字放到json字符串的前面
30. ==========================================================================================
31. --%>