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()进行转换
相关推荐
怎样实现Ajax 跨域访问的五种方法, 怎样实现Ajax 跨域访问的五种方法
Ajax跨域访问的示例(ASP.NET Web)
本资源主要介绍了AJAX跨域的解决办法,以及解决方案间的比较
Ajax跨域访问解决方案,访问第三方网站的资源
ajax跨域访问
解决了在JSP中的AJAX不能跨域访问的问题
可以将book.aa.com用iframe添加到 www.aa.com的某个页面下,在www.aa.com和iframe里面都加上document.domain = "aa.com",这样就可以统一域了,可以实现跨域访问。就和平时同一个域中镶嵌iframe一样,直接调用里面的...
个人学习时编写的代码,该案例用于演示Ajax的跨域访问问题。!!!补充说明:导入工程时需要选择导入maven工程!上传仅为学习交流,也为自己下载方便!水平有限不喜勿喷。在README.txt中有对项目的详细说明!
一个c# ajax跨域的demo,解决c# ajax 跨域的问题
ajax 跨域 jsonp等方式
ajax跨域调用wcf实例
ajax跨域
NULL 博文链接:https://exceptioneye.iteye.com/blog/1405495
最近做项目,需要跨域请求访问数据问题。下面通过本文给大家分享C#中ajax跨域访问代码详解,需要的朋友可以参考下
Ajax通过代理来解决跨域访问获取数据,里面描述了两种跨域访问的解决方法
主要从三方面来通过jsonp来实现ajax跨域问题: 1.javascript方法 2.jquery $.ajax方法 3.jquery $.getJSON方法 不看会后悔的!
Spring Boot 使用 Redis 进行配置 Session 共享(Ajax 跨域) 源码下载。
NULL 博文链接:https://jacky68147527.iteye.com/blog/261877
基于ajax方式的跨域请求jsonp的前后台代码