WEX5中ajax跨域訪問的幾種方式

一、使用jsonp方式

使用jsonp訪問的話，前端須要把回調函數名傳遞給後端，後端執行完後也須要把回調函數傳回給前端，默認狀況下ajax自動生成一個回調函數名，後端能夠經過String callback = request.getParameter("callback");  獲得這個回調函數名

前端示範代碼：

 1 $.ajax({
 2     "type" : "post",
 3     "dataType" : "jsonp",
 4     "async" : false,
 5     "url" : "http://192.168.0.24:8080/WaterMIS_App/data",
 6     "data" : {
 7         "action" : "checkAddress",
 8     },
 9     "success" : function(xhr) {
10         alert("成功！")
11     }
12 });

後端示範代碼：

 1 public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException {
 2     //請求
 3     String action  = request.getParameter("action");
 4     //回調函數名
 5     String callback = request.getParameter("callback");  
 6     //控制器部分
 7     if("checkAddress".equals(action)){
 8         response.setContentType("text/html;charset=utf-8");
 9         response.getWriter().write(callback+"({});");    
10     }
11 }

後端響應必須以functionName(JSON字符串);這樣的字符串返回給前端。

改進：

jsonp類型的請求是隻能異步的，並且請求失敗也不會有任何的提示，所以個人解決辦法是使用setTimeout推遲成功回調函數的執行，經過設置flag判斷是否已經執行了成功回調而判斷是否執行失敗代碼

前端示範代碼改進：

 1 var flag = 1; //是否已經執行過回調函數 1爲初始值 2爲執行過 0爲響應失敗
 2 var time = 1000;//時間設置 單位.毫秒
 3 $.ajax({
 4     "timeout" : time,
 5     "type" : "post",
 6     "dataType" : "jsonp",
 7     "async" : false,
 8     "url" :  "http://192.168.0.24:8080/WaterMIS_App/data",
 9     "data" : {
10         "action" : "checkAddress",
11     },
12     "success" : function(xhr) {
13         flag = 2;
14         alert("成功！");
15     }
16 });
17     
18 //請求失敗  把方法設置爲time毫秒以後執行 假如flag不爲2 則在時間範圍內成功回調沒有執行，則認爲請求失敗
19 setTimeout(function() { 
20     if (flag!=2) {
21         flag = 0;
22         alert("失敗！");
23     }
24 }, time+1); 
25     
26 //請求超時 當時間爲time+2 flag還爲初始時候的值1 則認爲成功回調跟請求失敗都沒執行，則認爲請求超時
27 setTimeout(function(xhr) { 
28     if (flag==1) {
29         alert("超時");
30     }
31 }, time+2); 

二、設置響應頭的方式進行跨域請求

經過設置響應頭，達到跟普通ajax請求同樣的效果

前端示範代碼：

 1 $.ajax({
 2     "type" : "post",
 3     "async" : false,
 4     "dataType" : "json",
 5     "url" : "http://192.168.0.24:8080/WaterMIS_App/data",
 6     "data" : {
 7         "action" : "checkAddress",
 8     },
 9     "complete" : function(xhr) {
10         if (xhr.readyState == 4 && xhr.status == 200) {
11             alert("成功！");
12         } else {
13             alert("失敗！")；
14         }
15     }
16 });

後端代碼示範：

 1 public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException {
 2     //請求
 3     String action  = request.getParameter("action");
 4 
 5     //控制器部分
 6     if("checkAddress".equals(action)){
 7         response.setContentType("text/html;charset=utf-8");
 8         ((HttpServletResponse)response).addHeader("Access-Control-Allow-Origin", "*");
 9         response.getWriter().write("{}");    
10     }
11 }

備註：

第一種方法獲得的json數據是自動解析成json對象的，能直接對json對象的操做

第二種方法獲得的僅僅只是一個字符串，假如是一個json格式的字符串，能夠經過eval（）或者JSON.parse（）進行轉換，另外須要注意響應頭再一次請求中只能被設置一次，屢次設置會致使出錯。最好是在過濾器中進行設置。