我在博客上用了很多的 javascript 代码, 来实现些简单的动画效果和 Ajax . 本意是为了好看, 增强用户体验但是也不得不有所牺牲: 1. 可能会增加数据库请求. 2. 无法使用浏览器前进后退按钮.
今天写个思路来缓解一下第一个问题 ( 数据库请求 ) 注意只是缓解. 因为不是真正的缓存.
我们知道所以的 Ajax 请求其实和不同的请求是没有什么两样的. 但它也有自己的特点:
1. 通过特定的 URL 请服务器请求数据.
2. 可能包含特定的头部信息 ( RequestHeader ) .
3. 服务器端有专门的代码来识别这些特殊请求, 并作相应处理.
Ajax 只是可能增加数据库请求, 并不是绝对会增加数据库请求. 这个要具体情况具体分析. 像我目前使用的这种分页方法就没有增加反而是减少请求.
我的思路是将请求返回的数据在展示的同时也放到一个数组变量里, 在下次请求的时候直接从这个缓存变量中取值. 因此, 这时 Ajax 的请求顺序变为: 先判断缓存如果有需要的数据则返回缓存数据, 没有则执行 Ajax 请求, 并在请求成功后缓存返回数据.
以 Ajax 分页 举例:
/* 建立一个用于缓存的数组 */ var ajaxpageCache = new Array(); function ajaxpage() { /* 取得链接 */ var nav_a = $('#navigation a'); /* 注册链接单击事件 */ nav_a.click(function() { /* 获取链接值 */ var url = $(this).attr('href'); /* 判断缓存, 缓存中有值则使用缓存数据 */ if (ajaxpageCache[url]) { $('#content').html(ajaxpageCache[url]); /* 平滑移动到头部的动画 */ $.scrollTo('#header', 800); /* 重新注册该事件 */ ajaxpage(); /* 阻止打开链接 */ return false; } /* ... 省略的代码 ... */ /* 请求前 */ var beforeSend = function() { /* ... 省略的代码 ... */ }; /* 请求失败时 */ var error = function(request) { /* ... 省略的代码 ... */ }; /* 请求成功 */ var success = function(data) { /* 展示(显示返回数据) */ $('#content').html(data); /* 写入缓存 */ ajaxpageCache[url] = data; /* ... 省略的代码 ... */ }; /* 启动 Ajax 请求 */ ajax('POST', url, data, beforeSend, error, success); /* 阻止打开链接 */ return false; }); } |
这种缓存思路只是对重复使用相同数据的请求适用. 比如这种大页面翻页等.因为只要页面重新加载所有缓存内容将消失.
当然, 没有好处我也不会使用. 它的优点是在请求重复性数据时不产生数据库请求, 直接从客户端返回数据也让内容显示几乎没有延时. 在本地测试 Ajax 的时候可能并没有什么感觉, 一旦上传到网站, 在网速较慢的情况下就很明显的感觉慢.
考虑更高级一点的应用
1. 使用预加载, 即预先在’后台偷偷’将下一页的内容加载到缓存. (目前我还不想使用. 因为不是每个人都一定要看下一页的)
2. 定时清空指定的缓存数据.