Ajax清除浏览器js、css、图片缓存的方法


Posted in Javascript onAugust 06, 2015

做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题。

第一:为了安全起见,js是无法读取本地的图片的,不然你写一个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,来加载流对象,然后就是处理类的代码了,这是我用的是springMVCspringMVC这段时间

比较火,所以我也好少用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属性,就可以得到图片了。

下面介绍下jquery1.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
});
Javascript 相关文章推荐
jquery 滚动条事件简单实例
Jul 12 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
JavaScript实现三级联动效果
Jul 15 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
vue设置默认首页的操作
Aug 12 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
jQuery实现动画效果circle实例
Aug 06 #Javascript
jQuery动态星级评分效果实现方法
Aug 06 #Javascript
javascript使用输出语句实现网页特效代码
Aug 06 #Javascript
JS实现霓虹灯文字效果的方法
Aug 06 #Javascript
javascript实现网页背景烟花效果的方法
Aug 06 #Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 #Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 #Javascript
You might like
PHP中路径问题的解决方案
2006/10/09 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
vuex实现数据状态持久化
2019/11/11 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
vuex的使用步骤
2021/01/06 Vue.js
python实现读取并显示图片的两种方法
2017/01/13 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python实现最常见加密方式详解
2019/07/13 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
python要安装在哪个盘
2020/06/15 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
少年犯观后感
2015/06/11 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript