node.js下IE中获取数据的缓存

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 状态代码。

如何解决AngularJs在IE下取数据总是缓存的问题

如果用AngularJs在IE下发出GET请求从后台服务取完Json数据再绑定到页面上显示的话,你可能会发现就算数据更新了,IE还是会显示原来的结果。实际上这时候IE的确是缓存了hashtag,没有再次去做Http GET请求最新的数据。

最直接的办法是在后台撸掉OutputCache,但这种做法并不推荐,需要改每一处被Angular调用的地方,代价太大。这种问题应该在前端解决最好。研究了一会儿总结了最有效的解决方法,并不需要改后台代码了。

在你的app config里撸一个$httpProvider进去,比如像我这样,和路由可以配在一起,当然分开配也没问题。

var config = ["$routeProvider", "$httpProvider", function ($routeProvider, $httpProvider) {
   // Initialize get if not there
   if (!$httpProvider.defaults.headers.get) {
       $httpProvider.defaults.headers.get = {};
   }
   // Enables Request.IsAjaxRequest() in ASP.NET MVC
   $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
   // Disable IE ajax request caching
   $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
   $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
   $routeProvider.when("/", { templateUrl: "Manage/dashboard/index.cshtml" })
       .when("/dashboard", { templateUrl: "Manage/dashboard/index.cshtml" })
       .when("/dashboard/serverinfo", { templateUrl: "Manage/dashboard/serverinfo.cshtml" })
       .when("/dashboard/emaillogs", { templateUrl: "Manage/dashboard/emaillogs.cshtml" })
            // other code....
       .otherwise({ redirectTo: "/" });
    }];
app.config(config);

最关键的就是最后的禁用IE对ajax的缓存

$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';

如果你想这样写,是会爆的:

$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';

这样会导致include指令加载的partial view撸不出来

时间: 2024-08-31 14:54:34

node.js下IE中获取数据的缓存的相关文章

Node.js v6 LTS 中最激动人心的六个 ES6 特性

本文讲的是Node.js v6 LTS 中最激动人心的六个 ES6 特性, 随着 Node.js v6 LTS "Boron" 的发布,Node.js 的核心 API 和依赖关系得到了全面的改进.基于 Chromium 的 JavaScript 引擎的 Node.js V8 的更新非常重要,它具备对 Node.js 和 JavaScript 开发者心心相印的 ES6 的几乎全方位的支持. 这篇文章中,我们将一起了解 Node.js v6 LTS 版本中的六个最新的 ES6 特性. 给函

Node.js下自定义错误类型详解_node.js

前言 一般来说,很少人会考虑如何处理应用产生的错误的策略,调试的过程中,简单地利用console.log('error')定位错误,基本够用了,通过留下这些调试信息,能够为我们以后的调试过程中升了不少时间,提高了维护性.所以错误提示非常重要.同时,也会带来一些比较糟糕用法.最近的项目里就用到了自定义错误类型,觉得有必要深入了解一下,所以就写了这篇文章,方便自己和有需要的大家在需要的时候查阅. Subclassing Error 首先我们可以定义一个 Error 的子类.通过 Object.cre

asp.net-从SQL数据库中获取数据写入WORD文档,请附加代码,谢谢

问题描述 从SQL数据库中获取数据写入WORD文档,请附加代码,谢谢 基本格式:数据写入时需按一定格式(写入内容包含表格.文字.图片).标题居中等等 标题(含字体) 一.内容1 1.******* 2.***** 二.内容二 (1)***** 三.表格(或图片) 解决方案 c#里有一个非常不错的类库 叫aspose 里面可以操作word插入各种html以及表单以及图片. 非常不错 建议LZ搜索下 有很多相关代码,不想搜索你可以Call我 我发给你就是了 解决方案二: 在bai度中搜"java导出

c#-zedgraph 从数据库中获取数据 画图怎么做啊

问题描述 zedgraph 从数据库中获取数据 画图怎么做啊 在网上找的 也不知道对不对 但是不知道往下怎么做了 string sql = "select LOW_STAGE from POINT_STAGE where NAME = " + Didian ; DataSet ds = new DataSet(); SqlDataAdapter da = new SqlDataAdapter(sql, conn); da.Fill(ds, "POINT_STAGE"

基于JS实现textarea中获取动态剩余字数的方法_javascript技巧

案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能.当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下.当然我的封装还有缺漏,但是基本功能是实现了. 首先介绍下单个textarea实现案例 html部分: <textarea id="text_txt1"></textarea> <span id ="num_txt1&qu

smarty模板引擎从配置文件中获取数据的方法_php技巧

本文实例讲述了smarty模板引擎从配置文件中获取数据的方法.分享给大家供大家参考.具体如下: 当某个变量值,不希望在程序中写死时,就可以把该变量写到配置文件里,并从中获取(常见的配置样式). 第一步:先写一个配置文件,如数据库的 db.conf,后缀名conf可以随便写,db.ini也行.文件中内容的格式需要固定:key="值",每一行后面不需要添加分号或者什么,直接回国换行,如: 配置文件:db.conf 复制代码 代码如下: host = "localhost"

link中如何多线程从DataTable中获取数据?有没有高效不出错的办法?

问题描述 link中如何多线程从DataTable中获取数据?有没有高效不出错的办法? link中如何多线程从DataTable中获取数据?有没有高效不出错的办法?

sqlite-从列值为空的表中获取数据

问题描述 从列值为空的表中获取数据 表: CREATE TABLE Reports ( _id INTEGER NOT NULL PRIMARY KEY,member_id INTEGER, is_conf BOOLEAN, name TEXT, started INTEGER, finished INTEGER, description TEXT, obj_id INTEGER NOT NULL, FOREIGN KEY (obj_id) REFERENCES Objects (_id));

smarty模板引擎从php中获取数据的方法_php实例

本文实例讲述了smarty模板引擎从php中获取数据的方法.分享给大家供大家参考.具体如下: smarty可以分配($smarty->assign)的变量类型:所有php支持的数据类型--基本数据类型.复合数据类型.特殊数据类型(具体见smarty相关手册). 操作/显示文件:index.php 复制代码 代码如下: <?php //创建smarty对象 require_once("./libs/Smarty.class.php"); $smarty = new Smart