zoukankan      html  css  js  c++  java
  • 解决在IE中获取数据的缓存问题,运行环境为node.js

    IE下默认会开启缓存策略,不管是页面还是通过ajax请求的数据都会议一个url,url是uri(统一资源定位符)的实例,url就是资源的标识符。

    写一个demo进行验证,测试环境:IE8,node.js 0.12.7,页面模板为jade。

    页面代码:testCache.jade

    页面上放一个按钮,点下后从后台获取一个自增的数值显示在按钮上。

    doctype html
    html
        head
            meta(charset='utf-8')
            title= title
            script(src='/js/jquery-1.10.2.min.js')
            script(src="/js/bootstrap.min.js")
    
        body
            button(id='btnTest', type='button', class='btn btn-default gap') 测试
        script.
            $(document).ready(function(){
                $('#btnTest').click(doTest);
            });
    
            function doTest(){
                $.ajax({
                    type: 'GET',
                    url: '/cache/data',
                    data: '',
                    dataType: 'html'})
                    .done(function(data){
                        $('#btnTest').html(data);
                    })
            }

    后台关键代码:

    //获取测试页面
    router.get('/cache/page', function(req, res){
        res.render('testCache', { title: 'testCache' });
    });
    
    //获取自增数值
    var index = 0;
    router.get('/cache/data', function(req, res){
        var data = index++;
        res.write(data.toString());
        res.end();
    });

    运行效果可以看出无数次疯狂的点击后,还是“0”,原因就是IE第一次拿到数据后,从相同路径获取数据时采用了默认的缓存策略,当然可以通过IE的设置来规避缓存。

    缓存问题,根本上还是响应header的设置问题,只不过IE在发现响应头中没有缓存设置项时会采取缓存策略,和其他浏览器的处理方式不同而已。

    缓存很多时候是必须的,比如:新闻页面,升级页面,静态页面,这些资源在被访问后都可以缓存在浏览器段,通过根据资源的更新策略来设置规定的过期时间,可降低同服务器的资源获取次数。

    当然在不需要缓存的地方,也要坚决的避免被缓存。

    在IE中避免被缓存,如果是一个页面,那么就要在meta中设置缓存。

        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="-1">
        <meta http-equiv="progma" content="no-cache">

    上面的三项设置其实只要cache-control就可以了,本质上来说,在meta中的http-equiv的设置都会有服务器填入页面的响应header中。

    如果是在页面上通过ajax来获取数据的,就要在后台数据的响应处,加上缓存的设置,明明白白地告诉浏览器,请你不要缓存。如下。

    //获取自增数值
    var index = 0;
    router.get('/cache/data', function(req, res){
        var data = index++;
        res.setHeader('cache-control', 'no-cache');
        res.write(data.toString());
        res.end();
    });

    通过设置了no-cache后,本文的demo中的字增值就可以随着点击而增加并显示在按钮上。 

    在http的header中,缓存的配置项主要是5种,这里就列一下,网上的说明太多了。

    1.cache-control

    有4个值,private、no-cache、max-age、must-revalidate。

    private:缓存到私有缓存。

    max-age:相对过期时间,秒为单位,从浏览器获取资源的相应秒数后过期。

    must-revalidate:每次访问都需要重新验证。

    no-cache:不缓存。

    2.expires

     过期时间,这是一个绝对时间,时间格式是格林威治时间,如“Sun, 08 Nov2009 03:37:26 GMT”,过了这个时间,就过期

    3.progma

    对http1.0服务器的兼容。 

    4.Last-Modified/If-Modified-Since

    在你的请求中发送一个 If-Modified-Since 头信息,它包含了上一次从服务器连同数据所获得的日期。如果数据从那时起没有改变,服务器将返回一个特殊的 HTTP 状态代码 304。

    5.ETag/If-None-Match

     服务器发送你所请求的数据的同时,发送某种数据的 hash (在 ETag 头信息中给出)。hash 的确定完全取决于服务器。当第二次请求相同的数据时,你需要在 If-None-Match: 头信息中包含 ETag hash,如果数据没有改变,服务器将返回 304 状态代码。

  • 相关阅读:
    CLRS2e读书笔记—Chapter10
    CLRS2e读书笔记—Chapter6
    CLRS2e读书笔记—Chapter34 & Appendix A,B
    CLRS2e读书笔记—Chapter8
    CLRS2e读书笔记—Chapter5 & Appendix C
    CLRS2e读书笔记—Chapter7
    Haskell学习笔记<三>
    屏幕一直亮的问题
    对CCLabelTTF进行自动换行,显示打字效果
    XCODE 4.2打包发布
  • 原文地址:https://www.cnblogs.com/kongxianghai/p/5008060.html
Copyright © 2011-2022 走看看