Cache for retrieving data in IE under node. js

By default, the cache policy is enabled in IE. Both the page and the data requested by ajax meet a url. The url is an instance of the uri (Uniform Resource Identifier), and the url is the resource identifier.

Write a demo for verification. Test environment: IE8, node. js 0.12.7, and the page template is jade.
 

Page code: testCache. jade

Place a button on the page, click it, and then obtain an auto-increment value from the background. The value is displayed on the button.


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') test
Script.
$ (Document). ready (function (){
$ ('# Btntest'). click (doTest );
});

Function doTest (){
$. Ajax ({
Type: 'GET ',
Url: '/cache/data ',
Data :'',
DataType: 'HTML '})
. Done (function (data ){
Certificate ('{btntest'{.html (data );
})
        }


Key background code:


// Obtain the test page
Router. get ('/cache/page', function (req, res ){
Res. render ('testcache', {title: 'testcache '});
});

// Obtain the auto-increment value
Var index = 0;
Router. get ('/cache/data', function (req, res ){
Var data = index ++;
Res. write (data. toString ());
Res. end ();
});,


The running effect shows that after countless crazy clicks, it is still "0", because IE uses the default cache policy to obtain data from the same path after obtaining data for the first time, of course, you can avoid caching through IE settings.

 

The cache problem is basically the response header setting problem, but IE will adopt a cache policy when it finds that there is no cache setting item in the response header, which is different from that of other browsers.

Caching is often required, such as news pages, upgrade pages, and static pages. These resources can be cached in the browser segment after being accessed, you can set the specified expiration time based on the resource update policy to reduce the number of resources retrieved from the same server.

Of course, the cache should be avoided wherever it is not needed.

Avoid caching in IE. If it is a page, you need to set the cache in meta.

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

In fact, only cache-control is required for the above three settings. In essence, the http-equiv settings in meta will be filled in the response header of the page by the server.

If ajax is used to obtain data on the page, you must add cache settings in the response to the background data to clearly inform the browser. Please do not cache the data. As follows.


// Obtain the auto-increment value
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 ();
});



After no-cache is set, the value-added words in the demo in this article can be added with the click and displayed on the button.

 

In the http header, there are five types of cache configuration items. Here we will list too many online descriptions.

1. cache-control

There are four values: private, no-cache, max-age, and must-revalidate.

Private: cache to private cache.

Max-age: relative expiration time, in seconds. It expires after obtaining the resource from the browser.

Must-revalidate: re-verification is required for each access.

No-cache: no cache.
 

2. expires

Expiration Time. This is an absolute time. The time format is Greenwich mean time, for example, "Sun, 08 Nov2009 03:37:26 GMT". After this time, it will expire.
 

3. progma

Compatible with http1.0 server.

 
4. Last-Modified/If-Modified-Since

Send an If-Modified-Since header in your request, which contains the date obtained from the last slave server along with the data. If the data has not changed since then, the server will return a special HTTP status code 304.
 

5. ETag/If-None-Match

When the server sends the data you requested, it sends the hash of some data (given in the ETag header ). The determination of hash depends entirely on the server. When the second request has the same data, you need to include ETag hash in the If-None-Match: header information. If the data does not change, the server will return the 304 status code.

How to solve the problem that AngularJs always caches data in IE


If AngularJs sends a GET request under IE to obtain Json data from the backend service and bind it to the page for display, you may find that even if the data is updated, IE will still display the original results. In fact, at this time, IE indeed caches hashtag and does not perform the latest data for Http GET requests again.

The most direct method is to disable OutputCache in the background. However, this method is not recommended. You need to change the region called by Angular at a high cost. This problem should be best solved at the front end. I summarized the most effective solution and did not need to change the background code.

Add a $ httpProvider in your app config. For example, you can configure it with routes like me. Of course, it is okay to separate the configurations.

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 ['pragm'] = '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 );

The most important thing is to disable IE's ajax cache.

$ HttpProvider. defaults. headers. get ['cache-control'] = 'no-cache ';
$ HttpProvider. defaults. headers. get ['pragm'] = 'no-cache ';

If you want to write it like this, it will pop up:

$ HttpProvider. defaults. headers. get ['if-Modified-Since '] = '0 ';

This will cause the partial view failed to be loaded by the include command.