AJAX和SpringMVC双向异步完成信息实时更新
文章目录
前言
前后端双向异步的作用于实时更新数据,比如打车,外卖这种小程序,时刻提示订单
本章就介绍了前后端双向异步的写法
提示:以下是本篇文章正文内容,下面案例可供参考
一、前后端双向异步是什么?
其实就是AJAX和SpringMVC的异步操作,AJAX定时器去后端取Redis里的值,SpringMVC定时器去数据库查询数据并存Redis里
二、使用步骤
1.AJAX异步定时器操作
- 在主页面中写一个iframe标签,此标签指向另一个页面
代码如下(示例):
<iframe id="iframe1" src="async.html" width="0rem" height="0rem"></iframe>
- 此页面只做一件事:ajax访问后端,并弹出提示
页面只做了一个异步AJAX,访问后台并接收返回值,并用self.async();自己调自己的方法继续执行,setTimeOut() 定时器5秒执行
代码如下(示例):
<body></body>
<script type="text/javascript">
function async(){
$.ajax({
async:true,
url:"../async/myorder",
type : 'get',
dataType:'text',
success : function(data) {
if(data=='unfinished'){
layui.layer.confirm('你有未完成订单!');
setTimeout(function(){self.async();},5000);//等待5S继续执行
}else if(data=='newOrder'){
layui.layer.confirm('有新的可以接取订单!');
setTimeout(function(){self.async();},5000);//等待5S继续执行
}else{
self.async();//没有 订单 刷新 然后等待
}
}
});
}
async();
</script>
对应的Controller层内的操作:
@RestController()
@RequestMapping("async")
public class AsyncController {
@Autowired
JedisUtil jedisUtil;
/**
* @auth: fei
* @return:Callable<String>
* @description:查看一下有没有自己的订单
* 没有订单的情况下,查看是否有订单;
* 有订单的情况下,是否订单被中途取消。
*/
@RequestMapping(value = "myorder")
@ResponseBody
public Callable<String> callable(HttpSession session) {
return new Callable<String>() {
/*
* 获取登录后的个人信息
*/
Map<String,Object> eng= (Map<String, Object>) session.getAttribute("user");
String unfinished = "";//有未完成订单
String newOrder = "";//有新订单
/*
*从个人信息的map里取出状态信息,判断是否为繁忙
*/
Integer estate=Integer.valueOf(eng.get("estate").toString());
@Override
public String call() throws Exception {
for(int i=0;i<30;i++) {
unfinished =estate!=0? null : "true" ;
newOrder =jedisUtil.get("orders")==null?"":jedisUtil.get("orders").toString();
if(unfinished==null) {//有未完成订单
return "unfinished";
}else if((!newOrder.equals(""))&&newOrder!=null) {//有新订单
return "newOrder";
}
Thread.sleep(1000);
}
return "";
}
};
}
}
解释:
一次AJAX访问过来,内部循环30次获取订单信息,如果30次都没获取到新订单的信息,那就返回一个" ";
2.配置SpringMVC的定时器
- 配置web.xml里对异步的支持
代码如下(示例):
<servlet>
<servlet-name>mvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
<!--开启异步的支持-->
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>mvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
该处使用的<async-supported>true</async-supported>标签开启异步支持
注:如果web.xml配置了Filter过滤器,那么<async-supported>true</async-supported>就要写在Filter标签内
- 配置SpringMVC.xml配置文件里面的内容
代码如下(示例):
<!-- 开启这个配置,spring才能识别@Scheduled注解 -->
<task:annotation-driven scheduler="task" mode="proxy"/>
<!-- 配置任务队列 -->
<task:scheduler id="task" pool-size="10"/>
写一个类用来执行SpringMVC定时器的任务
/**
* @author fei
* 定期把订单同步至Redis数据库。
*
*/
@Component
public class OrderTask {
@Autowired
Dao dao;
@Autowired
JedisUtil jedisUtil;
/**
* @throws Exception
* @auth: fei
* @return:void
* @description:同步订单 1 秒一次 (定时器)
* 业务只提示 是否有新订单,不用记录订单具体详情
* //@Scheduled(cron = "*/1 * * * * ?") 设置一秒执行一次
*/
@Async
@Scheduled(cron = "*/1 * * * * ?")
public void asyncOrder() throws Exception{
try {
/**
* 读取 数据库中的 status 为 0的订单
*/
List<Map> list = (List<Map>) dao.queryForList("EngineerMapper.getOrders",null);
jedisUtil.put("getOrders", list.size()==0?"":JSON.toJSONString(list));//有订单就存入进去 ,
jedisUtil.put("orders", list.size()==0?"":list.size()+"");//没有订单就是“”,有订单就不是0
}catch (Exception e) {
System.out.println(e.toString());
}
}
}
顺便展示一下案例中的JedisUtil类的代码,这里只是简单的用Jedis操作了Redis
@Component
public class JedisUtil {
private static Jedis jedis;
public JedisUtil(){
JedisPoolConfig poolConfig = new JedisPoolConfig(); //连接池配置
poolConfig.setMaxTotal(10); //连接池总数量
poolConfig.setMaxIdle(10); //连接池空闲数量
poolConfig.setMinIdle(1); //无连接时,最小的链接的数
// 创建Jedis连接池
JedisPool jedisPool = new JedisPool(poolConfig, "127.0.0.1", 6379);
// 从连接池中获取jedis对象
jedis = jedisPool.getResource();
}
public static void put(String phone,String code){
long time=60*5l;
jedis.set(phone,code,"nx","ex",time);
}
public static void putJSON(String key,String value){
jedis.set(key,value);
}
public static Object get(String phone){
return jedis.get(phone);
}
public static void remove(String phone){
jedis.del(phone);
}
}
到这里前后端的双向异步完成信息实时更新就做完了
看效果展示图:
总结
以上就是AJAX和SpringMVC双向异步的所有操作,说白了也就是前后端两个定时器,后端定时查数据库存Redis,前台定时来从Redis里取数据,这样有效减轻了数据库的压力。对于数据库的访问只存在一个,所有客户端访问Redis就可以了~