清理缓存中的头像

最新推荐文章于 2021-06-07 13:32:01 发布

转载最新推荐文章于 2021-06-07 13:32:01 发布 · 423 阅读

文章标签：

#javascript #ViewUI

本文探讨了在修改QQ空间头像后如何即时更新页面显示的方法。通过在URL后添加随机数、使用Ajax请求和设置HTTP头部来避免浏览器缓存旧图片。介绍了利用JavaScript和Ajax实现不缓存请求的具体代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

晚上和老同事谈及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');