这里有新鲜出炉的 jQuery 示例, 程序狗速度看过来!
jQuery javascript 框架
jQuery 是一个兼容多浏览器的 javascript 框架, 核心理念是 write less,do more(写得更少, 做得更多).jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布, 吸引了来自世界各地的众多 JavaScript 高手加入, 由 Dave Methvin 率领团队进行开发.
这篇文章主要介绍了 ASP.NET MVC 中使用 jQuery 时的浏览器缓存问题详解, 需要的朋友可以参考下.
介绍
尽管 jQuery 在浏览器 ajax 调用的时候对缓存提供了很好的支持, 还是有必要了解一下如何高效地使用 http 协议.
首先要做的事情是在服务器端支持 HTTP GET, 定义不同的 URL 输出不同的数据 (MVC 里对应的就是 action). 如果要使用同一个地址获取不同的数据, 那就不对了, 一个 HTTP POST 也不行因为 POST 不能被缓存. 许多开发人员使用 POST 主要有 2 个原因: 明确了数据不能被缓存, 或者是避免 JSON 攻击 (JSON 返回数组的时候可以被入侵).
缓存解释
jQuery 全局对象里的 ajax 方法提供了一些 options 来支持缓存和 Conditional GETs 功能.
$.ajax({
ifModified: [true | false],
cache: [true | false],
});
ifModified 选项定义的是在 ajax 调用的时候是否支持 Conditional GETs 功能. jQuery 会自动帮我们处理服务器端返回的名为 Last-Modified 的 header 值, 然后在随后的请求里的 header 里发送 If-Modified-Since. 这需要我们的 MVC Controller 要实现 Conditional GETs 功能才能用. Conditional GETs 功能在 http 缓存上下文中用于重新验证缓存中过期的条目. 如果 jQuery 认为一个条目已经过期了, 它首先会请求服务器使用 Conditional GETs 功能重新验证该条目, 如果服务器返回状态码 304(Not modified),jQuery 会重新使用缓存里的该项目, 这样的话, 我们可以节约很多流量去下载页面内容.
cache 选项基本上是覆盖服务器端返回的 http header 里的所有关于缓存的设置, 如果设置 cache 选项为 false 的话, jQuery 会在请求的 URL 后面附件一个时间戳, 以便区分之前的 URL 地址, 这样没错请求的内容都是最新的, 也就是说浏览器每次接收的都是新地址, 自然返回的都是最新数据.
让我们来看几个场景:
服务器端响应里设置 No-Cache
服务器端为王, 如果服务器端明确定义了 response 响应不能被缓存的话, jQuery 也无能为力. ajax 里的 cache 选项将被忽略.
JS 代码:
$('#nocache').click(function () {
$.ajax({
url: '/Home/NoCache',
ifModified: false,
cache: true,
success: function (data, status, xhr) {
$('#content').html(data.count);
}
});
});
C# 代码:
public ActionResult NoCache()
{
// 禁用缓存
Response.Cache.SetCacheability(HttpCacheability.NoCache);
return Json(new { count = Count++ }, JsonRequestBehavior.AllowGet);
}
服务器端响应里设置过期时间
服务器端设置过期时间用于缓存数据, 该条目在客户端将依据过期时间被缓存.
JS 代码:
$('#expires').click(function () {
$.ajax({
url: '/Home/Expires',
ifModified: false,
cache: true,
success: function (data, status, xhr) {
$('#content').html(data.count);
}
});
});
C# 代码:
public ActionResult Expires()
{
Response.Cache.SetExpires(DateTime.Now.AddSeconds(5));
return Json(new { count = Count++ }, JsonRequestBehavior.AllowGet);
}
客户端从来不缓存数据
客户端决定每次都要最新的数据 (不能使用缓存), 也就是说 ajaxi 里的 cache 选项设置为 false, 不管服务器端如何定义, jQuery 每次请求的 URL 地址都是唯一不同的, 目的是每次都获取最新的内容.
JS 代码:
$('#expires_nocache').click(function () {
$.ajax({
url: '/Home/Expires',
ifModified: false,
cache: false, // 这里是关键
success: function (data, status, xhr) {
$('#content').html(data.count);
}
});
});
C# 代码:
public ActionResult Expires()
{
// 不管服务器端怎么设置都没用
Response.Cache.SetExpires(DateTime.Now.AddSeconds(5));
return Json(new { count = Count++ }, JsonRequestBehavior.AllowGet);
}
服务器端和客户端使用 Conditional Gets 功能验证缓存数据
客户端将条目放在缓存里, 在过期之后重新验证. 服务器端必须实现 Conditional GET 功能 (使用 ETags 或者 last modified 的 header).
JS 代码:
$('#expires_conditional').click(function() {
$.ajax({
url: '/Home/ExpiresWithConditional',
ifModified: true,
// 这里是关键
cache: true,
success: function(data, status, xhr) {
$('#content').html(data.count);
}
});
});
C#代码: public ActionResult ExpiresWithConditional() {
if (Request.Headers["If-Modified-Since"] != null && Count % 2 == 0) {
return new HttpStatusCodeResult((int) HttpStatusCode.NotModified);
}
Response.Cache.SetExpires(DateTime.Now.AddSeconds(5));
Response.Cache.SetLastModified(DateTime.Now);
return Json(new {
count = Count++
},
JsonRequestBehavior.AllowGet);
}
上述 MVC action 中的代码只是一个例子 (非真实代码), 在真实的实现中, 服务器端应该能够知道数据自从上次响应以后是否被修改过.
总结
详细通过这 4 个场景, 大家应该了解了 ajax 请求的缓存技术了吧, 我就不做总结了.
英文原文来自: http://weblogs.asp.net/cibrax/archive/2012/02/10/hacking-the-browser-cache-with-jquery-and-asp-net-mvc.aspx
以上这篇 ASP.NET MVC 中使用 jQuery 时的浏览器缓存问题详解就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持 PHPERZ.
来源: http://www.phperz.com/article/18/0130/352641.html