解析浏览器端的AJAX缓存机制与IE特殊行为

AJAX缓存机制与URL唯一性策略

AJAX的缓存行为由浏览器底层机制维持。当向服务器发送特定URL的AJAX请求时，浏览器仅在首次请求时与服务器进行完整交互。随后的相同URL请求，浏览器将直接从本地缓存中提取数据，而不再向服务器提交新的网络请求。

url=url+"&"+Math.random();

要点： 1.每次请求的url都不一样（ajax的缓存便不起作用） 2.不影响正常应用（最基本的）

基于上述现象，可以得出以下两条核心结论：

AJAX缓存与HTTP缓存头设置

1. AJAX缓存机制与HTTP缓存机制本质相同。 现代浏览器的HTTP缓存机制比AJAX的XMLHttpRequest对象更为成熟，因此浏览器并不区分AJAX请求与普通资源请求，而是统一遵循标准的HTTP缓存规则，通过服务器返回的响应头来控制缓存行为。 若已熟悉HTTP缓存原理，可直接将其应用于AJAX场景。两者的主要区别在于设置响应头的方式与普通静态文件略有不同。以下响应头可用于配置AJAX请求的缓存策略： - Expires：该字段应设置为未来的某个时间点，具体时长取决于内容更新的频率。例如，若请求的是库存数量，可设置为10秒后过期；若请求的是图片，因其变动较少，可设置较长的过期时间。Expires头允许浏览器在指定时间内复用本地缓存，避免不必要的网络交互。 - Last-Modified：这是一个良好的配置选项。浏览器在发送条件性GET请求时，会利用请求头中的If-Modified-Since字段来比对本地缓存内容。若数据未更新，服务器将返回304状态码。 - Cache-Control：在适用场景下，该值应设置为Public，以便所有中间代理和缓存服务器保存并共享内容。Firefox浏览器还支持对HTTPS请求进行缓存。 需要注意的是，使用POST方式发送的AJAX请求永远不会被缓存。若AJAX请求涉及副作用（如银行账户转账），务必使用POST请求以确保数据一致性。 我们提供了一个示例（该示例目前可能已失效）来演示上述响应头的工作方式。在HttpWatch工具中，可以观察到响应头中已设置上述三个字段。

若规律性地点击‘Ajax Update'按钮，会发现时间更新频率趋于每分钟一次。这是因为Expires响应头被设置为未来一分钟。在下图中可以看到，重复点击更新按钮时，AJAX请求直接读取浏览器本地缓存，此时网络传输栏的发送和接收值均为0，表明未产生实际网络活动。

在最后一次点击时刻（1:06.531），由于本地缓存数据已过期（超过一分钟），AJAX请求产生了实际的网络数据传输。服务器返回200状态码，表示成功获取了一份新数据。 推测该示例为一个按钮，每次点击时获取当前时间并显示在页面上。

IE浏览器AJAX缓存的特殊行为

2. IE浏览器在Expires过期前，不会刷新通过AJAX获取的内容。 有时，AJAX会在页面加载阶段被用于填充页面特定区域（如价格列表）。这类请求并非由用户事件（如点击按钮）触发，而是通过JavaScript在页面加载时自动发送，类似于嵌入资源（如JS和CSS文件）。 若开发此类页面，刷新时可能希望更新已嵌入的AJAX内容。对于嵌入资源，浏览器会根据用户的刷新方式（F5常规刷新或Ctrl+F5强制刷新）自动发送不同类型的请求： 1. F5（常规刷新）：若请求内容包含Last-Modified响应头，浏览器会发送条件性更新请求。它使用If-Modified-Since请求头进行比较，服务器据此返回304状态码以避免传输不必要的数据。 2. Ctrl+F5（强制刷新）：该操作指示浏览器发送无条件更新请求，并将请求头Cache-Control设置为‘no-cache’。这告知所有中间代理和缓存服务器，浏览器需要获取最新版本，无论其是否已被缓存。 Firefox将这种刷新行为传播至页面加载时发送的AJAX请求，将其视为嵌入资源处理。以下是Firefox下HttpWatch的截图，展示了刷新（F5）页面时AJAX请求的效果：

Firefox确保AJAX发起的请求是条件性的。在此示例中，若缓存数据未超过10秒，服务器返回304状态；若超过10秒，则返回200状态并重新传送数据。 而在IE浏览器中，页面加载时发起的AJAX请求被视为与页面其他部分的刷新无关，且不受用户刷新方式的影响。如果缓存的AJAX数据未过期，浏览器不会向服务器发送GET请求，而是直接从缓存中读取数据。从HttpWatch观察到的结果是(Cache)。下图展示了在IE下缓存未过期时按F5刷新的情况：

即使使用Ctrl+F5强制刷新，通过AJAX获取的数据依然从缓存中读取：

这意味着，在IE浏览器中，任何未过期的AJAX内容都不会被更新——即使使用Ctrl+F5强制刷新。确保获取最新数据的唯一方法是手动清除缓存。可以使用HttpWatch的工具栏执行此操作：

Cache与304状态码的区别

需注意，Cache结果与304结果存在本质区别。Cache实际上对应的是200状态码（缓存命中），而304则是304状态码。Cache命中时，浏览器并未向服务器发送请求，从Chrome开发者工具可见，其耗时为0，响应体为空。而304请求不同，它由浏览器发起一个条件性请求，携带If-Modified-Since请求头。若文件在该时间后未被修改，服务器返回304状态，告知浏览器使用本地缓存内容。304请求速度较慢，因为请求已发送至服务器端，只是服务器未返回数据体。 可查看淘宝首页，其中既包含200(cache)也包含304，可进一步查看两者的区别。

总结：

客户端内存缓存优化建议

众所周知，AJAX提高页面载入速度的主要原因是通过减少重复数据加载，实现按需获取。因此，在编写AJAX程序时，不妨在客户端进一步实施缓存策略，以进一步提升数据载入速度。具体做法是在载入数据的同时，将数据缓存在浏览器内存中。一旦数据被载入，只要页面未刷新，该数据将永久缓存在内存中。当用户再次查看该数据时，无需从服务器重新获取，从而极大降低服务器负载并提升用户体验。