redis + ajax实现异步下拉列表加载

本文涉及的产品
云数据库 Redis 版,社区版 2GB
推荐场景:
搭建游戏排行榜
简介: redis作为一种高性能的NoSQL(Not Only SQL)系列的数据库,可以更好的解决大规模数据集合多重数据种类带来的挑战,尤其是大数据应用难题。其基本原理是将数据存储在缓存之中,所以查询速度要远高于关系型数据库。

redis作为一种高性能的NoSQL(Not Only SQL)系列的数据库,可以更好的解决大规模数据集合多重数据种类带来的挑战,尤其是大数据应用难题。其基本原理是将数据存储在缓存之中,所以查询速度要远高于关系型数据库。


对于网页中一些基本不会发生变化的数据,使用redis存储将会极大地提高这些数据的获取速度,进而加快网页的加载,带来更好的用户体验。这里以一个下拉列表的demo做一个展示,代码附在文末:



1 分析


该案例的基本设计框架如下图所示:

网络异常,图片无法展示
|

其中主页面发送ajax请求服务器下拉列表的省份数据,调用服务器servlet实现以下三个步骤:


调用service层ProvinceService.java完成查询,返回结果存入List中

将数据序列化为json格式

响应json数据至客户端

service层的ProvinceService.java先从redis中查询数据,如果查询结果不为空则直接返回该数据,否则调用dao层ProvinceDao.java从sql数据库中查询,再将查询结果存入redis并返回。



2 sql数据库准备


创建表province,数据有id和name


CREATE TABLE province(   -- 创建表
  id INT PRIMARY KEY AUTO_INCREMENT,
  NAME VARCHAR(20) NOT NULL
);
-- 插入数据
INSERT INTO province VALUES(NULL,'北京');
INSERT INTO province VALUES(NULL,'上海');
INSERT INTO province VALUES(NULL,'广州');
INSERT INTO province VALUES(NULL,'陕西');


数据库准备之后创建相应的Province类来存储该数据库的对象:


package domain;
public class Province {
    private int id;
    private String name;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}


3 程序基本框架


导入jar包,包含了操作redis的jedis包,操作mysql的包,包含Jdbc模板类的spring包以及与json操作相关的jackson包等:


20200613204557515.png


dao层查询sql数据库代码:


使用spring提供的JDBC模板类JdbcTemplate快速实现对数据库的操作,将查询结果保存在List里返回


package dao;
import domain.Province;
import java.util.List;
public interface ProvinceDao {
    public List<Province> findAll();
}


package dao.impl;
import dao.ProvinceDao;
import domain.Province;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import util.JDBCUtils;
import java.util.List;
public class ProvinceDaoImpl implements ProvinceDao{
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    @Override
    public List<Province> findAll() {
        String sql = "select * from province";
        List<Province> list = template.query(sql, new BeanPropertyRowMapper<>(Province.class));
        return list;
    }
}

JdbcTemplate对象创建时需要传入一个datasource,这里封装工具类JDBCUtils,使用druid数据库连接池技术,提供get方法来获取datasource


package util;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
/**
 * JDBC工具类 使用Durid连接池
 */
public class JDBCUtils {
    private static DataSource ds ;
    static {
        System.out.println("JDBCUtils");
        try {
            //1.加载配置文件
            Properties pro = new Properties();
            //使用ClassLoader加载配置文件,获取字节输入流
            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
 pro.load(is);
            //2.初始化连接池对象
            ds = DruidDataSourceFactory.createDataSource(pro);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    /**
     * 获取连接池对象
     */
    public static DataSource getDataSource(){
        return ds;
    }
    /**
     * 获取连接Connection对象
     */
    public static Connection getConnection() throws SQLException {
        return  ds.getConnection();
    }
}


service层:


只用直接调用dao层的查询数据库方法即可


package service;
import domain.Province;
import java.util.List;
public interface ProvinceService {
    public List<Province> findAll();
}


package service.impl;
import dao.ProvinceDao;
import dao.impl.ProvinceDaoImpl;
import domain.Province;
import service.ProvinceService;
import java.util.List;
public class ProvinceServiceImpl implements ProvinceService{
    private ProvinceDao dao = new ProvinceDaoImpl();
    @Override
    public List<Province> findAll() {
        return dao.findAll();
    }
}

servlet:


根据第一部分【分析】中描述的servlet的三个步骤,代码编写如下:

其中reponse中设置内容格式为json


package web.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import domain.Province;
import service.ProvinceService;
import service.impl.ProvinceServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/provinceServlet")
public class ProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ProvinceService service = new ProvinceServiceImpl();
        List<Province> list = service.findAll();
        // 序列化list为json
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(list);
        // 响应结果
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

页面:


html部分实现一个简单的下拉列表即可,js部分发送ajax请求来加载所有省份的数据,循环遍历服务器返回的数据,将每一条记录包装成一个option标签append如下拉列表中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            //发送ajax请求,加载所有省份数据
            $.get("provinceServlet",{},function (data) {
                // [{"id":1,"name":"北京"},{"id":2,"name":"上海"},{"id":3,"name":"广州"},{"id":4,"name":"陕西"}]
                var province = $("#province");
                // 遍历json
                $(data).each(function () {
                    var option = "<option name='" + this.id + "'>" + this.name + "</option>";
                    province.append(option);
                });
            });
        });
    </script>
</head>
<body>
    <select id="province">
        <option>--请选择省份--</option>
    </select>
</body>
</html>


4 使用redis


JedisPool连接池工具类用于加载配置文件并提供get方法获取resource


package jedis.util;
import redis.clients.jedis.Jedis;
import redis.clients.jedis.JedisPool;
import redis.clients.jedis.JedisPoolConfig;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;
/**
 * JedisPool连接池工具类
 *      加载配置文件
 *      提供获取连接的方法
 */
public class JedisPoolUtils {
    private static JedisPool jedisPool;
    static {
        InputStream is = JedisPoolUtils.class.getClassLoader().getResourceAsStream("jedis.properties");
        Properties pro = new Properties()
try {
            pro.load(is);
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 获取数据,设置到JedisPoolConfig中
        JedisPoolConfig config = new JedisPoolConfig();
        config.setMaxTotal(Integer.parseInt(pro.getProperty("maxTotal")));
        config.setMaxIdle(Integer.parseInt(pro.getProperty("maxIdle")));
        // 初始化JedisPool
        jedisPool = new JedisPool(config, pro.getProperty("host"), Integer.parseInt(pro.getProperty("port")));
    }
    /**
     * 获取连接的方法
     */
    public static Jedis getJedis(){
        return jedisPool.getResource();
    }
}


至此在service层的ProvinceServiceImpl.java 中新创建添加使用redis的方法:

在redis中直接存储数据的json格式


/**
 * 使用redis缓存
 */
@Override
public String findAllJson() {
    // 先从redis中查询数据
    Jedis jedis = JedisPoolUtils.getJedis();
    String province_json = jedis.get("province");
    // 判断redis里是否有记录,没有则查询数据库
    if (province_json == null || province_json.length() == 0){
        System.out.println("redis中没数据,查询数据库");
        List<Province> ps = dao.findAll();
        ObjectMapper mapper = new ObjectMapper();
        try {
            province_json = mapper.writeValueAsString(ps);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        // 存json到redis
        jedis.set("province",province_json);
        jedis.close();
    }else {
        System.out.println("redis中有数据,查询缓存");
    }
    return province_json;
}



相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
1月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
|
4月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
4月前
|
消息中间件 移动开发 NoSQL
Redis 协议 事务 发布订阅 异步连接
Redis 协议 事务 发布订阅 异步连接
|
4月前
|
消息中间件 存储 NoSQL
redis协议与异步方式学习笔记
redis协议与异步方式学习笔记
50 0
|
12天前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
19 3
|
3月前
|
消息中间件 NoSQL Kafka
Redis事务与异步方式
Redis事务与异步方式
36 0
|
4月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
4月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
4月前
|
NoSQL Java 关系型数据库
使用Kafka实现Java异步更新通知解决Redis与MySQL数据不一致
使用Kafka实现Java异步更新通知解决Redis与MySQL数据不一致
45 0
|
4月前
|
NoSQL 网络协议 关系型数据库
Redis(二)网络协议和异步方式(乐观锁&悲观锁、事务)
Redis(二)网络协议和异步方式(乐观锁&悲观锁、事务)
38 0