最近在做一个企业通讯录的功能,功能很简单,我的本意是做数据存储并且做同步更新,时间原因以及服务端的同事更倾向于简单点的方式,呵呵,于是我们就采取了实时查询的方式。

由于get请求有点多,由于页面的生命周期就是打开页面-关闭页面,想到cache,但是由于公司是使用的原生的ajax,因此研究一下jq的ajax的缓存是如何写的。

jq的思路大概是检测到需要cache这个请求,就会在对象池中检测是不是存在该url的Last-Modified值,存储容器如下:

 // Last-Modified header cache for next request
lastModified: {},
etag: {},

然后,在发送请求的时候检测是否cache后,有如下的代码:

 // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
if ( s.ifModified ) {
if ( jQuery.lastModified[ cacheURL ] ) {
jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ cacheURL ] );
}
if ( jQuery.etag[ cacheURL ] ) {
jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ cacheURL ] );
}
}

这里的代码意思是如果说jq根据jQuery.lastModified字典中是否包含数据来决定是否设置If-Modified-Since。那第一次请求jQuery.lastModified是没有数据的(JS是无法获取浏览器缓存的信息),因此第一次请求jqXHR是没有设置If-Modified-Since,那也就解释了第一次请求jqXHR.status为200。因为有了第一次请求,jq获取获取到第一次请求响应中的Last-ModifiedjQuery.lastModified有了数据,第二次请求jqXHR是会加上If-Modified-Since头的,因此jqXHR.status收到了浏览器直接传递过来的请求响应及内容。

然后等到请求成功了的时候,

 if ( s.ifModified ) {
modified = jqXHR.getResponseHeader("Last-Modified");
if ( modified ) {
jQuery.lastModified[ cacheURL ] = modified;
}
modified = jqXHR.getResponseHeader("etag");
if ( modified ) {
Query.etag[ cacheURL ] = modified;
}
}

此时,从返回头中获取Last-Modified的值,一般是个时间,etag一般是一个hash,两种方式比较类似,然后这个值就会被缓存在jq的池子中,下次再请求就是304了。

关于lastModified 跟 etag可以参考 一下链接 http://www.51testing.com/html/28/116228-238337.html

												

jquery 之ajax cache的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  3. jquery中ajax在firefox浏览器下“object XMLDocument”返回结果的解决办法

    asp.net中借助jquery的ajax处理功能,使用起来很方便.但是在firefox下获得的data报错object XMLDocument.这是因为默认的情况下把datatype用html来解析 ...

  4. 关于Jquery中ajax介绍

    jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需 ...

  5. 基于jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

  6. jquery中ajax的简单使用

    一.load() 这是最简单的一个函数,传入一个url他会异步加载该url的内容,然后将内容插入每一个选中的元素中,替换掉其中已经存在的内容. 所以最简单的用法是: $("#myDiv&qu ...

  7. 【ERROR】使用jquery的ajax出现error:readyState=4,status=500

    使用jquery的ajax出现error:readyState=4,status=500,ajax代码如下: $.ajax({ url : "../toBeFinMisManage/show ...

  8. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  9. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

随机推荐

  1. P4174 [NOI2006]最大获利(网络流)

    P4174 [NOI2006]最大获利 还是最大权闭合子图的题 对于每个中转站$k$:$link(k,T,P_k)$ 对于每个用户$i$.中转站$A_i,B_i$.贡献$C_i$ $link(S,i, ...

  2. 微信小程序表单验证

    参考:http://www.cnblogs.com/zhangxiaoyong/p/10166951.html

  3. Leaflet获取可视范围内4个顶点

    //地图级别改变时发生 map.on("zoomend", function (e) { var zoom_val = e.target.getZoom(); map_drag() ...

  4. xftp5和xshell的使用

    目的:实现windows和linux系统之间文件的传输 步骤:1)下载xshell5 百度搜索即可,直接下载安装 2)xshell5下载完成后与虚拟机链接成功 3)下载xftp5点击 然后跟据官方的指 ...

  5. topcoder srm 615 div1

    problem1 link 对于数字$x$,检验每个满足$x=y*2^{t}$的$y$能否变成$x$即可. problem2 link 如果起点到终点有一条长度为$L$的路径,那么就存在长度为$L+k ...

  6. IDEA 初建Spring项目(Hello Spring)

    新建项目 在文件夹中建立一个项目文件 打开项目 打开IDEA,点击Open,根据所建项目路径找到该项目 依赖注入 点击项目名右键,点击new,点击file,创建pom.xml 内容为: <pro ...

  7. ipv4网络无访问权限

    昨天折腾了一天这个网络受限问题,都没有得到解决,驱动精灵.电脑管家(我不用360).重置Winsock目录.网络重置.组策略控制台.重启路由器(学校的以太网,工作时间不好重置路由器)都用了个遍,一直都 ...

  8. 16_Linux网络配置

    A类:255.0.0.0        8 0 000 0001 - 0 111 1111 127用户回环,1-126 2^7-1个A类地址 容纳多少个主机:2^24-2 主机位全0:网络地址 主机位 ...

  9. TCGA样本命名详解

    在TCGA中,一个患者可能会对应多个样本,如TCGA-A6-6650可以得到3个样本数据: TCGA-A6-6650-01A-11R-1774-07TCGA-A6-6650-01A-11R-A278- ...

  10. java扫描文件。

    前言:一步一步来实现迷你ioc框架,前面的容器工厂也是一个铺垫,这次的扫描文件也是一个铺垫…… 需求:扫描当前项目下所有文件.包括文件夹下文件夹里面的文件.利用递归进行扫描 ScanFileUtil类 ...