利用Ajax与SpringMVC清除浏览器JS、CSS及图片缓存

作者:页面旅途时间:2026-10-30 02:11:03浏览:317

本文介绍如何通过SpringMVC结合jQuery Ajax技术清除浏览器对JS、CSS及图片的缓存。核心思路是利用BufferedImage将本地图片加载至内存,通过ImageIO.write()输出流返回给前端。前端通过动态修改img标签src属性或设置jQuery的cache:false与ifModified:true参数,实现强制刷新资源,避免浏览器读取旧缓存。

问题背景与思路

在开发过程中,通常将服务器上的图片地址存储于数据库,并在浏览器端进行显示。然而,这一做法引发了两个主要问题。

首先,出于安全考虑,JavaScript无法直接读取本地图片文件。如果允许JS读取本地文件,将导致任何网页脚本都能获取用户电脑内的文件,存在严重安全隐患。

其次,图片实际存储在服务器硬盘而非客户端硬盘,因此前端无法直接获取这些本地路径下的资源。

为解决上述问题,网络上常见的方案涉及将图片转换为二进制并嵌入XML等复杂方式。鉴于这些方法较为繁琐,本文提出一种更简便的替代方案。

该方案的核心在于使用BufferedImage类来处理图像数据。

服务端实现

具体实施步骤如下。

基本思路是将本地图片加载到内存中,并将其放入BufferedImage缓冲对象。随后利用ImageIO.write()方法进行处理。虽然这一思路较为直观,但若直接通过Ajax获取数据,结果可能不符合预期,下文将详细解释如何处理。

接下来构建工具类。

首先创建一个用于加载图片的工具类,该类接收图片地址作为参数,并返回对应的图片缓冲流。


/**
   * 根据图片的地址,返回图片的缓冲流
   * @param addr
   * @return
   */
  public static BufferedImage getInputStream(String addr){
    try {
      String imgPath = addr; 
      BufferedImage image = ImageIO.read(new FileInputStream(imgPath));
      return image;
    } catch (Exception e) {
      e.printStackTrace();
      System.out.println();
      System.out.println("获取图片异常:java.awt.image.BufferedImage");
      System.out.println("请检查图片路径是否正确,或者该地址是否为一个图片");
    }
    return null;
  }

具体实现上,使用ImageIO.read()方法加载流对象。以下是处理类的代码,此处采用SpringMVC框架,因其近期较为流行,故较少使用Struts2。

关于框架选择,SpringMVC目前应用广泛,因此本文示例基于此框架编写,减少了对Struts2的依赖。

接下来是具体的处理逻辑。


/**
   * 根据图片的地址,来获取图片
   * @param addr
   * @param response
   */
  @ResponseBody
  @RequestMapping("/getImg")
  public void getImg(@Param("addr")String addr,HttpServletResponse response){
    BufferedImage img = new BufferedImage(300, 150, BufferedImage.TYPE_INT_RGB);
    img = ImgUtil.getInputStream(addr);
    if(img==null){
      throw new RuntimeException("打印图片异常:com.controller.Business_Ctrl.getImg(String, HttpServletResponse)");
    }
    if(img!=null){
      try {
        ImageIO.write(img, "JPEG", response.getOutputStream());
      } catch (IOException e) {
        e.printStackTrace();
        System.out.println("打印异常:com.controller.Business_Ctrl.getImg(String, HttpServletResponse)");
      }
    }
  }

当使用ImageIO.read()读取到图片后,立即通过ImageIO.write()输出图片。此时,输入流即为

HttpServletResponse.getOutputStream()。

客户端调用与缓存清除

客户端实现部分。

 

相关配置代码示例如下。

前端代码如下:

function setImg(addr){
         
$("#logo").attr("src","business/getImg?addr="+addr+"");
            }

如代码所示,当需要加载图片时,触发setImg方法并传入地址。该地址此前已从后台传递至前台;即使未直接传递,也可通过调整逻辑在后台获取地址并返回,最终通过设置img标签的src属性来获取图片。

此外,介绍如何在jQuery 1.2版本中利用Ajax清除浏览器对JS、CSS及图片的缓存。

自jQuery 1.2版本起,提供了ifModified和cache参数,无需手动添加header即可控制缓存行为。


ifModified Boolean Default: false 
Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. 
cache Boolean Default: true 
Added in jQuery 1.2, if set to false it will force the pages that you request to not be cached by the browser. 
$.ajax({
type: "GET",
url: "static/cache.js",
dataType: "text",
cache:false,
ifModified :true
});

作者最新文章