WEX5中ajax跨域访问的几种方式

1、使用jsonp方式

使用jsonp访问的话，前端需要把回调函数名传递给后端，后端执行完后也需要把回调函数传回给前端，默认情况下ajax自动生成一个回调函数名，后端可以通过String callback = request.getParameter("callback");  得到这个回调函数名

前端示范代码：

$.ajax({
    "type" : "post",
    "dataType" : "jsonp",
    "async" : false,
    "url" : "http://192.168.0.24:8080/WaterMIS_App/data",
    "data" : {
        "action" : "checkAddress",
    },
    "success" : function(xhr) {
        alert("成功！")
    }
});

后端示范代码：

public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException {
    //请求
    String action  = request.getParameter("action");
    //回调函数名
    String callback = request.getParameter("callback");  
    //控制器部分
    if("checkAddress".equals(action)){
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write(callback+"({});");    
    }
}

后端响应必须以functionName(JSON字符串);这样的字符串返回给前端。

改进：

jsonp类型的请求是只能异步的，而且请求失败也不会有任何的提示，因此我的解决办法是使用setTimeout推迟成功回调函数的执行，通过设置flag判断是否已经执行了成功回调而判断是否执行失败代码

前端示范代码改进：

var flag = 1; //是否已经执行过回调函数 1为初始值 2为执行过 0为响应失败
var time = 1000;//时间设置 单位.毫秒
$.ajax({
    "timeout" : time,
    "type" : "post",
    "dataType" : "jsonp",
    "async" : false,
    "url" :  "http://192.168.0.24:8080/WaterMIS_App/data",
    "data" : {
        "action" : "checkAddress",
    },
    "success" : function(xhr) {
        flag = 2;
        alert("成功！");
    }
});
    
//请求失败  把方法设置为time毫秒之后执行 假如flag不为2 则在时间范围内成功回调没有执行，则认为请求失败
setTimeout(function() { 
    if (flag!=2) {
        flag = 0;
        alert("失败！");
    }
}, time+1); 
    
//请求超时 当时间为time+2 flag还为初始时候的值1 则认为成功回调跟请求失败都没执行，则认为请求超时
setTimeout(function(xhr) { 
    if (flag==1) {
        alert("超时");
    }
}, time+2); 

2、设置响应头的方式进行跨域请求

通过设置响应头，达到跟普通ajax请求一样的效果

前端示范代码：

$.ajax({
    "type" : "post",
    "async" : false,
    "dataType" : "json",
    "url" : "http://192.168.0.24:8080/WaterMIS_App/data",
    "data" : {
        "action" : "checkAddress",
    },
    "complete" : function(xhr) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert("成功！");
        } else {
            alert("失败！")；
        }
    }
});

后端代码示范：

public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException {
    //请求
    String action  = request.getParameter("action");

    //控制器部分
    if("checkAddress".equals(action)){
        response.setContentType("text/html;charset=utf-8");
        ((HttpServletResponse)response).addHeader("Access-Control-Allow-Origin", "*");
        response.getWriter().write("{}");    
    }
}

备注：

第一种方法得到的json数据是自动解析成json对象的，能直接对json对象的操作

第二种方法得到的仅仅只是一个字符串，假如是一个json格式的字符串，可以通过eval（）或者JSON.parse（）进行转换，另外需要注意响应头再一次请求中只能被设置一次，多次设置会导致出错。最好是在过滤器中进行设置。