项目中涉及到了一个加载模型的功能:前端请求回一个JSON文件,然后再对这个文件进行解析,在页面上解析出3D的模型。由于是3D模型,所以这个JSON文件很大。
在第一次加载模型时,会花很多时间来进行下载,但如何实现在第二次加载且请求的JSON文件没有变化的情况下,不再花时间请求新的资源,同时满足如果有新的资源时,会正确的从服务器重新请求的这个需求?
解决方法之一是调用浏览器本地的缓存好的资源。JQ中AJAX的isModified参数实现了这个解决方法。
$.ajax({
url : xxx.weburl,
type : 'get',
dataType : "text",
ifModified : true,//强制要求检测最后更新时间,防止拿到旧的数据
success : function(data){
if(data===undefined){//没有数据,及没有数据变化,这时候再执行一次ajax,就是从浏览器缓存拿数据
$.ajax({
url : xxx.weburl,
type : 'get',
dataType : "text",
success : function(data){
if(sucFunc){
sucFunc(data,para);
}
}
});
}else{
if(sucFunc){
sucFunc(data,para);
}
}
},
error : function(xhr, s) {
if(errFunc){
errFunc();
}
},
timeout : 600000
});
将ifModefied参数设置为true(默认为false),这样每次请求时,都会判断服务器和缓存的数据有没有变化,有的时候才返回数据,否则不返回数据。
因此,在没有变化时,data为undefined,此时重新进行一次请求,这次不要设置ifModefied为true,代码就会拿到浏览器缓存的数据了。
如果data不为undefined,证明是有新数据,此时则直接执行方法即可。
第一次请求,必然是新资源:
第二次请求且资源为旧资源时:
旧资源的情况下,触发了新的请求: