WEX5中ajax跨域访问的几种方式
2024-10-19 01:22:17
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()进行转换,另外需要注意响应头再一次请求中只能被设置一次,多次设置会导致出错。最好是在过滤器中进行设置。
最新文章
- css3-无缝滚动
- Atitit.在线充值功能的设计
- Delphi的DateToStr StrToDate格式灵活用法
- THE SENSE OF BEAUTY
- BZOJ 3129 SDOI2013 方程
- IOS打包脚本
- xcode 开发ios兼容性问题的上下黑边 和 coco2d-x 游戏分辨率适配 ResolutionPolicy::FIXED_WIDTH 都会引起上下黑边问题!!!
- Lua开发环境配置
- C语言的本质(22)——C标准库之字符串操作
- 最大值减去最小值小于或等于num的子数组数量
- 关于spring的注解方式注入默认值(转) -- 首字母小写
- elasticsearch5.3安装插件head
- 十、Hadoop学习笔记————Hive与Hbase以及RDBMS(关系型数据库)的关系
- sublime text的Ctrl+alt+up快捷键失效问题解决
- TCP/IP入门(4) --应用层
- 单元测试junit框架详解
- 第一个Polymer应用 - (0)准备工作
- 面试之路(4)-TCP/IP/HTTP概述
- numpy中函数shape的用法
- CMake for MFC example
热门文章
- [HEOI2016/TJOI2016]求和
- 100Mbps和100Mb/s有什么不同
- 0、原生jdbc工厂类
- 强大的原生DOM选择器querySelector和querySelectorAll
- Libinput 1.13 RC2发布
- Linux常用命令全称
- 在其他Activity中展示自定义相机拍的照片
- Attribute ";resultType"; must be declared for element type ";insert";或";update";
- Objective-C Programming The Big Nerd Ranch Guide 笔记 19-37
- EntityFramework Core并发深挖详解,一纸长文,你准备好看完了吗?