jQuery调用Ajax高效缓存:.NET MVC实战

jQuery调用Ajax高效缓存:.NET MVC实战,第1张

尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持 还是有必要了解一下如何高效地使用协议

首先要做的事情是在服务器端支持HTTP GET 定义不同的URL输出不同的数据(MVC里对应的就是action) 如果要使用同一个地址获取不同的数据 那就不对了 一个HTTP POST也不行因为POST不能被缓存 许多开发人员使用POST主要有 个原因 明确了数据不能被缓存 或者是避免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功能在缓存上下文中用于重新验证缓存中过期的条目 如果jQuery认为一个条目已经过期了 它首先会请求服务器使用Conditional GETs功能重新验证该条目 如果服务器返回状态码 (Not modified) jQuery会重新使用缓存里的该项目 这样的话 我们可以节约很多流量去下载页面内容

cache选项基本上是覆盖服务器端返回的 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 ) (unt)

}

})

})

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 ) (unt)

}

})

})

C#代码

public ActionResult Expires()

{

Response Cache SetExpires(DateTime Now AddSeconds( ))

return Json(new { count = Count++ } JsonRequestBehavior AllowGet)

}

客户端从来不缓存数据

客户端决定每次都要最新的数据(不能使用缓存) 也就是说ajax里的cache选项设置为false 不管服务器端如何定义 jQuery每次请求的URL地址都是唯一不同的 目的是每次都获取最新的内容

JS代码

$( #expires_nocache ) click(function () {

$ ajax({

url: /Home/Expires

ifModified: false

cache: false // 这里是关键

success: function (data status xhr) {

$( #content ) (unt)

}

})

})

C#代码

public ActionResult Expires()

{

// 不管服务器端怎么设置都没用

Response Cache SetExpires(DateTime Now AddSeconds( ))

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 ) (unt)

}

})

})

C#代码

public ActionResult ExpiresWithConditional()

{

if (Request Headers[ If Modified Since ] != null &&Count % == )

{

return new HttpStatusCodeResult((int)HttpStatusCode NotModified)

}

Response Cache SetExpires(DateTime Now AddSeconds( ))

Response Cache SetLastModified(DateTime Now)

return Json(new { count = Count++ } JsonRequestBehavior AllowGet)

}

上述MVC action中的代码只是一个例子(非真实代码) 在真实的实现中 服务器端应该能否知道数据自从上次响应以后是否被修改过

总结

lishixinzhi/Article/program/net/201311/11886

当请求的资源并不是一层不变的时候,即不能简单的一直使用客户端缓存时,可能通过将cache设置为false来发送请求,这实际上是在url加上时间戳组合成新的url,每次发送新的请求,这明显加大了服务器的压力。

对于这种情况,可以通过ifModified参数改进缓存方式(即:cache和ifModified都设置为true)。

他针对的是资源变动比较频繁的情况,希望时刻获取最新的文件,而应该是想要尽量使用缓存吧。

先说明两点:

1、jquery mobile默认跳转都是用ajax的方法,这样的做法导致的直接影响就是页面js只能加载一次,用data-ajax后可以使当前页面摆脱ajax,而页面加载默认就是重新加载了。

2、jquery mobile默认在页面刷新或者跳转后,会自动移除缓存

然后说说你的问题,在jquery mobile中倒是有个能够控制缓存的属性:

如果想要的话,你可以使jQuery Mobile在dom中保存之前访问过的页面而不是移除他们。这样用户在回到这个页面的时候就可以迅速加载。

要让所有曾经访问过的pages都缓存,设置domcache选项为true,

HTML 代码:

$.mobile.page.prototype.options.domCache = true

或者你可以缓存特定的某个页面,给page容器添加如下属性

<div data-role="page" id="cacheMe" data-dom-cache="true">

当然这个是jquery mobile的处理缓存的方法,不知道能不能解决,如果不能解决说下,我再告诉你其他方法

不明白请追问,如果对你有帮助,记得采纳~


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11306387.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存