浅谈Ajax请求与浏览器缓存


在现代Web应用程序中,前端代码充斥着大量的Ajax请求,如果对于Ajax请求可以使用浏览器缓存,那么可以显著地减少网络请求,提高程序响应速度。

1. Ajax Request

使用jQuery框架可以很方便的进行Ajax请求,示例代码如下:

$.ajax({
  url : 'url',
  dataType : "xml",
  cache: true,
  success : function(xml, status){  
      }
});

非常简单,注意其中的第4行代码:cache:true,显式的要求如果当前请求有缓存的话,直接使用缓存。如果该属性设置为 false,则每次都会向服务器请求,Jquery的Comments如下:

If set to false, it will force requested pages not to be cached by the browser. Setting cache to false also appends a query string parameter, "_=[TIMESTAMP]", to the URL.

前端的工作也就这么多了,这样的话Ajax请求就可以利用浏览器缓存了吗?

继续看。

2. Http 协议

Http协议的header部分定义了关于客户端是否应该做Cache,以及如何做Cache。具体参见Http Header Field Definitions 的 14.9 Cache-Control 和 14.21 Expires。这里简单说一下:

Cache-Control

Cache-control用于控制HTTP缓存(在HTTP/1.0中可能部分没实现,仅仅实现了Pragma: no-cache)

数据包中的格式:

Cache-Control: cache-directive

cache-directive可以为以下:

request时用到:

| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"

response时用到:

| "public"
| "private" [ "=" <"> field-name <"> ]
| "no-cache" [ "=" <"> field-name <"> ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| "max-age" "=" delta-seconds
| "s-maxage" "=" delta-seconds
| "cache-extension"

说明:

-Public  指示响应可被任何缓存区缓存。

-Private  指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。

-no-cache  指示请求或响应消息不能缓存(HTTP/1.0用Pragma的no-cache替换)

-no-store  用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

-max-age  指示客户端可以接收生存期不大于指定时间(以秒为单位)的响应。

-min-fresh  指示客户端可以接收响应时间小于当前时间加上指定时间的响应。

-max-stale  指示客户端可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户端可以

接收超出超时期指定值之内的响应消息。

Expires

Expires 表示Cache的有效时间,允许客户端在这个时间之前不去发请求,等同max-age的效果。但是如果同时存在,则被Cache-Control的max-age覆盖。
格式:Expires = "Expires" ":" HTTP-date
示例:Expires: Thu, 01 Dec 1994 16:00:00 GMT

Last-Modified

Last-Modified用GMT格式表明了文档的最后修改时间,客户端第二次请求此URL时,会在头部加入一个属性,询问该时间之后文件是否有被修改过。如果服务器端的文件没有被修改过,则返回状态是304,内容为空,这样就节省了传输数据量。

 

3. 我的问题

这几天在做Web前端的时候,发现客户端的每次Ajax都会从服务器端请求数据,而这些数据的即时性没有那么高,没必要每次都请求。

在显式的给Ajax加上cache为true后,发现问题依旧。于是怀疑是服务端的问题,服务端使用 jersey 搭建了基于Restful的服务,代码片段如下:

@GET
@Produces("application/xml")
public Response getProducts() {
     Response.ResponseBuilder response = Response.ok(data);
     return response.build();
}

添加Cache控制后,进行测试,一切OK。

最后的代码如下:

@GET
@Produces("application/xml")
public Response getProducts() {
     Response.ResponseBuilder response = Response.ok(data);
     // Expires 3 seconds from now..this would be ideally based
     // of some pre-determined non-functional requirement.
     Date expirationDate = new Date(System.currentTimeMillis() + 3000);
     response.expires(expirationDate);
     return response.build();
}

以上只是示例代码,还可以进行更精细的控制,例如使用CacheControl、Last-Modified等等。

以上这篇浅谈Ajax请求与浏览器缓存就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持phpstudy。



相关阅读:
开启PHP的伪静态模式
jQuery 中ajax异步调用的四种方式
Win10到底啥什么时候正式发布?微软Build 2015未公布确切上市时间
基于html5和nodejs相结合实现websocket即使通讯
win10安装密钥更新变化有哪些? win10安装密钥新变化的内容
html禁止清除input文本输入缓存的两种方法
JavaScript实现梯形乘法表的方法
jquery学习总结(超级详细)
jQuery.Highcharts.js绘制柱状图饼状图曲线图
php通过array_merge()函数合并两个数组的方法
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
jQuery插件pagination实现无刷新分页
java利用Ant脚本生成war包全过程
Win10 Mobile 10586.107怎么更新?Lumia950/XL/550可升级
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 洛阳东-光山 怀柔北-流水沟 豆沙关-邓家湾 新华-通天屯 滁州北-富县东 唐山-大连 漳浦-于都 铁岭-昌图 车转湾-昆明 乐都-吉首 南陵-涵江 平峪-涞源 芷江-韶山南 民权北-萧县北 高密-禹城 团结-齐齐哈尔 北屯-三合庄 黄花筒-奈曼 章丘-巩义南 杭州东-郴州西 枣庄西-砀山 重庆南-大河坝 柳州-鹤壁 海安县-太原 太平川-张台子 呼和浩特东-潍坊 宁波-石柱县 上海虹桥-烟台 邵阳北-涿州东 九江-赣州 宣汉-包头 成都东-广安南 大冶北-武汉 锦州-广州 乌尔旗汗-伊图里河 王安镇-北京西 绥中北-四平东 南宁-徐州 怀化-龙岩 辽阳-宣汉 鲘门-苍南 信阳东-东安东 海宁西-新化南 商丘-民权 偃师-玉门 讷河-保康 英德-陇西 瓦拉干-团结 龙岩-十堰 太谷-霍州 弋阳-成都东 广州西-黎塘 安陆-路口铺 平峪-云彩岭 鹤壁东-扶余北 潮水-兴隆镇 镇远-月山 低窝铺-山丹 海林-平邑 沙沱-白水镇 德州东-福州 黎塘-桐柏 天门-万州 杭州东-峡江 五台山-平型关 天津-阜新南 塘沽-平顶山西 朝阳村-沈阳 西安-双峰北 扎兰屯-兴莲 湛江-双峰北 向塘-宿松 柳州-龙洞堡 黄山北-涵江 白城-榆林 双牌-富川 唐山-阜新南 三道营-卓资山 肇庆-义乌 聊城-建瓯 现在的长沙动物园里面的动物还多吗?2010年下半年哦
中山到东莞唐夏怎么搭车
L340火车列车时刻表
在辽源市第五中学到新长途客运站(三海商城),怎样走我要
我要从福建泉州到深圳龙华车站该到哪里买票
优速快递能到大庆吗
现在安阳火车列车票预售期是多长
谁知道从衡水到沂水怎么走啊坐列车的话
从武汉到乌镇怎么坐车才最省钱
中山到淮南 宣城 亳州 宿州直线物流公司有那些
杭州湾大桥通车后,宁波到嘉兴的客车汽车票价是多少?降了多少?
泉州大长江丰田汽车客车销售服务有限公司英语怎么说
南昌火车列车票现在可以提前几天买
无锡列车火车站旁边去张家港的车最早几点去张家港到张家港停到
尉氏今天有去开封坐k631到信阳农专上学的么下午五点的车
南昌到哈尔滨列车火车站随车托运
谁能知道从安徽铜陵到温岭坐车怎么走啊
怎么订不到从昆明到南京的列车火车票
临猗被盗的摩托车卖到哪了
网上可以买火车列车票吗
求伤感的散文句子
火车列车站到辽源宾馆
邯郸到保定的汽车客车票价谁知道急……
求龙岩到福州列车票价和时刻
峨眉山市到剑阁县怎么走最快
浙江嘉兴南北湖景区,门票预订,价格多少的?
广州大巴车票
烟台到大连金州有船吗
商丘往乌鲁木齐方向的1045次列车火车硬卧有暖气没啊
K1474火车列车信息,时刻表,过哪些站

Copyright © 2016 phpStudy |