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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 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 escape URL编码
2008/12/10 PHP
PHP之短标签开启设置
2013/06/17 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
离婚纠纷代理词
2015/05/23 职场文书
烈士陵园观后感
2015/06/08 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python