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