清理缓存中的头像
晚上和老同事谈及QQ空间头像修改后,页面上其它地方的图像也立马修改过来了。看了一下,说了我的想法(因为以前这样做过):
假设请求地址为 http://abc.com/a.gif
1、在flash设置完成头像后,在地址后面带个随机数,例如:http://abc.com/a.gif?k=xxxxx 将页面中所有能看到之前图像的位置设置为这个地址;
2、用ajax设置头部不缓存后,请求http://abc.com/a.gif这个地址,这样再次请求http://abc.com/a.gif这个地址时,浏览器的缓存已经是最新的了;
其实这是一种较为理想的状态,为什么呢?这种情况是,在设置完成头像后,地址http://abc.com/a.gif再次请求的文件就是最新的了(也就是CDN在设置成功头像后,URL地址被清理过了)。
但同事给我一个地址却是我如此刷新都是旧的(据说会被CDN给缓存一天),但加了随机数后立马是最新的了。要解决这个问题,目前想到的办法是本地存储一个cookie了,里面记录一个版本号,所有主人的头像都使用如下规则进行请求:http://abc.com/a.gif?v=1.x (1.x是版本号,从cookie中获取),这样就能保存更新过后url始终是最新的,但同时比上面那种方法麻烦一点,每次都得用JavaScript拼一次地址了~ 还得更新和设置版本号,如果cookie被清空了,版本号还不知道从多少算起呢~~~~
所以最好的方式还是想办法去让后台在更新完图像后,马上清理掉CDN中对图像URL的缓存(地址可能不止一个,如果图像有大、中、小三种规格)
讲了半天,还是看看代码,这段代码主要就是请求最新资源的公用方法。(jQuery中实现些方法,你只能改源代码了----我改过JQ的源码)
1: <script type='text/javascript'> 2: function send(opts){ 3: var xhr = getXHR(); 4: 5: xhr.open(opts._method, opts._url, opts._isAsync); 6: 7: opts._method = (opts._method || "post").toUpperCase(); 8: 9: if (opts._method == 'POST' && !opts._isHeaderSetted) { 10: xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 11: xhr.setRequestHeader('Content-Type', 'image/jpeg'); 12: opts._isHeaderSetted = true; 13: } 14: 15: if(opts._noCache){ 16: xhr.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT'); 17: xhr.setRequestHeader('Cache-Control', 'no-cache'); 18: } 19: 20: var d = getStr(opts._data); 21: 22: xhr.onreadystatechange = function(){ 23: if (xhr.readyState == 4) { 24: if (xhr.status >= 200 && xhr.status < 300) { 25: opts._callback({}); 26: } 27: else { 28: opts._callback('error'); 29: return; 30: } 31: } 32: } 33: xhr.send(opts._method == 'POST' ? d : null); 34: } 35: </script>
最主要的两段代码:
1、设置请求头部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader('Content-Type', 'image/jpeg');
2、设置请求头部不缓存(返回结果正常为200而非304)
xhr.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT'); xhr.setRequestHeader('Cache-Control', 'no-cache');
- 通过“震网三代”和Siemens PLC 0day漏洞,实现对工控系统的入侵实验
- 安卓端渗透工具DVHMA:自带漏洞的混合模式APP
- 小萝莉说Crash(二): Unrecognized selector xxx 之 ForwardInvocation
- 5分钟教程:如何通过UART获得root权限
- 源码级剖析PHP 7.2.x GD拒绝服务漏洞
- 美女程序媛发福利,读懂ANR的trace文件So easy
- Openshift高阶探索实验
- 卡卡卡!小萝莉告诉你开发iOS应用如何避免卡顿
- Bugly即将支持的ANR,精神哥告诉你是个什么鬼?
- Go语言Goroutine与Channel内存模型
- 手把手教 | 深度学习库PyTorch(附代码)
- 如何定位Obj-C野指针随机Crash(一):先提高野指针Crash率
- 如何定位Obj-C野指针随机Crash(二):让非必现Crash变成必现
- 六种开发环境部署大全:基于Openshift
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 基础(十六):迭代器与生成器
- MySQL information_schema详解 COLUMNS
- MySQL information_schema详解 COLUMN_PRIVILEGES
- 一分钟学Python|Python的字典
- MySQL information_schema详解 ENGINES
- 一日一技:不用轮询,基于事件监控文件变动
- Python 基础(十七):装饰器
- XtraBackup工具详解 Part 10 使用innobackupex对数据库进行部分备份(指定表或数据库)
- Python 基础(十九):数学相关模块
- XtraBackup工具详解 Part 11 使用innobackupex对部分备份进行恢复
- XtraBackup工具详解 Part 12 流式和压缩备份
- 基于STM32+RT-Thread的新冠肺炎疫情监控平台
- Python 基础(二十):sys 模块
- [Oracle 故障处理]记一次Windows监听启动失败
- Python 基础(二十一):argparse 模块