用javascript缓存ajax数据

时间：2007-11-25 10:44:50      类别：HTML客户端, Web技术|WEB Tech      本文链接：生活点滴Enjoy Life

我们都知道，ajax能提高页面载入的速度的主要原因是通过ajax减少了重复数据的载入，真正做到按需获取，既然如此，我们在写ajax程序的时候不妨送佛送到西，在客户端再做一次缓存,进一步提高数据载入速度。那就是在载入数据的同时将数据缓存在浏览器内存中，一旦数据被载入，只要页面未刷新，该数据就永远的缓存在内存中，当用户再次查看该数据时，则不需要从服务器上去获取数据，极大的降低了服务器的负载和提高了用户的体验。

下面举例子来说明如何实现的！为了简化ajax，示例中采用了jQuery，首先我们来看看一个常规的ajax例子。ajax.html中的内容如下：

  1. <script src="jQuery.js"></script>
  2.   <script LANGUAGE="JavaScript">
  3.   <!--
  4.         function gopage(option,obj){
  5.         var page = $("#page").html() * 1;
  6.         obj.disabled = true;
  7.         if(option == '+'){
  8.                 page ++ ;
  9.                 var url = "data.php?page="+page + "&r="+Math.random();
  10.      //获取ajax url，后面的random是为了防止浏览器缓存xml内容
  11.         }else{
  12.                 page --;
  13.                 if(page < 1)page =1;
  14.                 var url = "data.php?page="+page + "&r="+Math.random();
  15.  
  16.         }
  17.         $("#data").html("loading...");//设置loading状态
  18.         $("#page").html(page);
  19. //下面是ajax处理
  20.         $("#data").load(url,
  21.                 {limit: 25},
  22.                          function() { obj.disabled = false; }
  23.                 );
  24.  
  25.         }
  26.   //-->
  27.   </script>
  28.  
  29.    <input type="button" value="&lt;"  onClick="gopage('-',this)" />
  30.    <input type="button" value="&gt;"  onClick="gopage('+',this)" /><br />
  31.   page:<span id="page">1</span>
  32.   <div style="border:2px solid red;padding:2px;" id="data">data area</div>

上面是完全没有任何缓存的ajax，用户翻页的时候都会去向服务器请求数据，当然某些浏览器如IE也自带有缓存功能，如上面代码的第九行，不过咱们得考虑到其他浏览器，所以最好自己设置缓存，上面的案例演示请看这里。

下面是自带缓存的例子，基本思想是将已经load下来的数据存在javascript数组变量中，当再次遇到请求时，先检查该数据是否已经请求，是则直接调用内存中的数据，否则便向服务器请求数据。

  1. <script LANGUAGE="JavaScript">
  2.   <!--
  3. var cache_data = new Array();//定义全局变量用来保存缓存数据
  4.         function gopageCache(option,obj){
  5.         var page = $("#page2").html() * 1;     
  6.         if(option == '+'){
  7.                 page ++ ;
  8.                 var url = "data.php?page="+page + "&r="+Math.random();
  9.         }else{
  10.                 page --;
  11.                 if(page < 1)page =1;
  12.                 var url = "data.php?page="+page + "&r="+Math.random();
  13.  
  14.         }
  15. /*下面是缓存增加的部分*/
  16.         if( (cache_data[page] !=null) && (cache_data[page].length > 1) ) {
  17. //如果缓存存在,则直接调用缓存数据,不用再去服务器进行数据请求
  18.                 alert('cache hit');
  19.                 $("#data2").html(cache_data[page]);
  20.                 $("#page2").html(page);
  21.                 return true;
  22.         }
  23.         $("#page2").html(page);
  24.         obj.disabled = true;
  25.         $("#data2").html("loading(cache enabled)..."); 
  26.         $("#data2").load(url,
  27.                 {limit: 25},
  28.                          function(responseText) { obj.disabled = false;
  29.                             cache_data[page] = responseText;//将当前的数据存入到内存(缓存变量)中 }
  30.                 );
  31.  
  32.         }
  33.  
  34.   //-->
  35.   </script>
  36.    <input type="button" value="&lt;"  onClick="gopageCache('-',this)" />
  37.    <input type="button" value="&gt;"  onClick="gopageCache('+',this)" /><br />
  38.   page:<span id="page2">1</span>
  39.   <div style="border:2px solid red;padding:2px;" id="data2">data area</div>

上面的代码简单的展示了如何合理的利用缓存提高速度和减轻数据重复载入对服务器的负载,上案例演示请看这里。

缓存的介绍完毕,思路来源于我自己的bloggermap,有好建议的朋友,欢迎排砖.下一步我便打算将本站的留言ajax添加缓存功能.

标签：,
发表于 2007-11-25 10:44:50 目录：HTML客户端, Web技术|WEB Tech [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
如果您喜欢本blog，欢迎你的feed订阅，谢谢你的支持
上一篇： « CRM Software 下一篇： 利用周末对本站ajax评论进行了修改 »

前2排已经被占据了 快抢好位置哦

  • 第1楼 nextway.cn 在 2008.01.22 23:11发表评论如下:

    不错！可以提高速度。
    我想问下cos，你的代码高亮用的是哪个插件？
    可否提供一份或者说一下插件名。谢谢！
    往我skyfocus@gmail.com发吧，反正我的gmail没有重要邮件，公布了也无所谓。

    搜索geshi，原来用的是coolcode，但是它加载的js和css文件太多了

    [回复他/她]
  • 第2楼 梗罚梗 在 2008.03.17 16:30发表评论如下:

    我怎么没有看到效果呢？？？

    [回复他/她]
  • 转到第 页
(Required)
(Required, not published)
如果留言未显示请不要重复留言，我将为你恢复！


生活点滴Enjoy Life is proudly powered by WordPress | admin| About Us | cosbeta| Bluehost| site map 1.138s & 34