你的位置:首页 > Java教程

[Java教程]WEX5中ajax跨域访问的几种方式


1、使用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); 

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()进行转换