发送 XMLHttpRequest 时缓存结果的问题


Problems with cached result when sending a XMLHttpRequest?

我对AJAX和缓存的想法很陌生。

在 AJAX - 从 W3Schools 向服务器发送请求时,它说您应该将"?t=" + Math.random()添加到要运行的脚本的 URL 末尾以防止缓存。

在维基百科上,"缓存"的简单定义是:

在计算机科学中,缓存是透明存储数据的组件,以便可以更快地满足未来对该数据的请求。缓存中存储的数据可能是先前计算的值,也可能是存储在其他位置的原始值的副本。

但是,这不应该更好吗?如果计算机已经存储了一些重复的数据,则脚本将运行得更快。此外,教程页面上的第一个示例(无需添加到 URL)工作正常。

有人可以告诉我使用"?t=" + Math.random()的原因吗?

但是,这不应该更好吗?

是的,

出于性能原因,最好有一个缓存系统,您的应用程序页面将快速加载,因为加载一次的元素将被检索,而无需每次向服务器发出 HTTP 请求。

有人可以告诉我使用"?t="+ Math.random()背后的原因吗?

添加此"?t=" + Math.random()就像每次重新加载脚本时重命名脚本的 URL。缓存系统会将其视为一个新元素,而不是他已经存储的旧元素,即使没有真正更改。因此,它强制从服务器重新加载元素。

通常,我们可能希望在经常更新的元素(如图像、脚本)上执行此操作。例如,用户可以更改的网站中的个人资料图片就是这种情况,如果旧图片文件在缓存中,如果我们不使用随机数的技巧,用户将不会立即看到新图片出现。用户可能会认为他的上传不起作用。他必须在浏览器中手动清空缓存,这并不总是非常直观。

第二个原因可能是,在我们开发时这样做是件好事,因为我们不需要每分钟清空缓存,因为我们的代码更改就被考虑在内......

但是,不要在您确定不会更改或很少更改的元素上使用此技巧。

在这样的 Web 服务请求末尾添加一些随机元素的原因是,在许多情况下,您希望数据始终是最新的。如果要缓存它,则数据可能不是最新的。

例如,假设您有一个 AJAX 请求,该请求为您提供游戏的当前高分。你用http://example.com/get_high_score.php来称呼它.假设它返回100 .现在,假设您等待 5 秒钟并再次调用此按钮(或用户刷新其页面)。如果该请求被缓存,它可能会再次返回100。但是,在那个时候,分数实际上现在可能125

如果调用 http://example.com/get_high_score.php?t=12345786 ,则分数将是最新值,因为它未缓存。

url + "?t=" + Math.random()只是这样做的一种手段。我实际上更喜欢使用时间戳,因为它保证始终是唯一的。

url + "?t=" + (new Date()).getTime()

另一方面,如果您不需要数据始终是新鲜的(例如,您只是发送几乎永远不会更改的菜单项选项列表),那么缓存是可以的,并且您希望省略额外的位。

另一种方法是使用时间戳,或设计每隔几秒钟更改一次的时间戳。尽管最好的方法(如果可以的话)是在服务器响应的标头中添加条目,以告诉浏览器不要缓存结果。

var t = new Date().getTime(); var t2 = Math.floor(t/10000); url = target_url + "?t=" + t2;

虽然在这种情况下不太可能,但请注意,如果您的网站不断生成指向随机内部 URL 的链接,例如通过服务器端代码,那么它就会成为一个"蜘蛛陷阱",搜索引擎等爬虫会陷入循环,跟随这些随机链接导致服务器负载达到峰值。