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

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
云数据库 Tair(兼容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
相关文章
|
8月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
100 0
|
8月前
|
缓存 NoSQL 数据库
探秘Redis读写策略:CacheAside、读写穿透、异步写入
本文介绍了 Redis 的三种高可用性读写模式:CacheAside、Read/Write Through 和 Write Behind Caching。CacheAside 简单易用,但可能引发数据不一致;Read/Write Through 保证数据一致性,但性能可能受限于数据库;Write Behind Caching 提高写入性能,但有数据丢失风险。开发者应根据业务需求选择合适模式。
838 2
探秘Redis读写策略:CacheAside、读写穿透、异步写入
|
4月前
|
canal 缓存 NoSQL
Redis缓存与数据库如何保证一致性?同步删除+延时双删+异步监听+多重保障方案
根据对一致性的要求程度,提出多种解决方案:同步删除、同步删除+可靠消息、延时双删、异步监听+可靠消息、多重保障方案
Redis缓存与数据库如何保证一致性?同步删除+延时双删+异步监听+多重保障方案
|
2月前
|
设计模式 NoSQL Go
Redis 实现高效任务队列:异步队列与延迟队列详解
本文介绍了如何使用 Redis 实现异步队列和延迟队列。通过 Go 语言的 `github.com/go-redis/redis` 客户端,详细讲解了 Redis 客户端的初始化、异步队列的实现和测试、以及延迟队列的实现和测试。文章从基础连接开始,逐步构建了完整的队列系统,帮助读者更好地理解和应用这些概念,提升系统的响应速度和性能。
55 6
|
5月前
|
缓存 NoSQL Linux
【Azure Redis 缓存】Windows和Linux系统本地安装Redis, 加载dump.rdb中数据以及通过AOF日志文件追加数据
【Azure Redis 缓存】Windows和Linux系统本地安装Redis, 加载dump.rdb中数据以及通过AOF日志文件追加数据
149 1
【Azure Redis 缓存】Windows和Linux系统本地安装Redis, 加载dump.rdb中数据以及通过AOF日志文件追加数据
|
5月前
|
存储 NoSQL Redis
Redis 文件总大小问题之计算待加载AOF文件总大小如何解决
Redis 文件总大小问题之计算待加载AOF文件总大小如何解决
|
5月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
86 3
|
6月前
|
Rust NoSQL API
c++开发redis module问题之如果在加载module时,该module没有执行权限,Redis会如何解决
c++开发redis module问题之如果在加载module时,该module没有执行权限,Redis会如何解决
|
6月前
|
NoSQL 编译器 Redis
c++开发redis module问题之如果Redis加载了多个C++编写的模块,并且它们都重载了operator new,会有什么影响
c++开发redis module问题之如果Redis加载了多个C++编写的模块,并且它们都重载了operator new,会有什么影响
|
6月前
|
存储 缓存 监控
Redis问题之如何使用Guava Cache来监控缓存的加载/命中情况
Redis问题之如何使用Guava Cache来监控缓存的加载/命中情况