AJAX延迟异步加载边栏+服务器端缓存AJAX输出

网站常常有边栏，例如右边栏有“24小时最热博客”、“48小时最热门评论”、“本周活跃用户”等，这些边栏内容往往需要查询数据库，而且往往很多页面都有一样的边栏，所以最好共同抽取出来进行缓存并AJAX延迟加载，也就是说，主页面可以先显示出来，然后AJAX异步加载边栏，而服务器端也不是每次都从数据库读取，而是设置缓存，在一定时间之内服务器端输出都是从缓存获取，超时了超时时间才从数据缓存或数据库读取即可。

(注：如果您的网页极少变动，可以用网页静态化技术。本文适用于页面内容变化频繁的情况，例如：SNS网站每个人的个性化页面内容都不一样，而边栏是一样的。)

废话少说，来实现吧。首先我们需要一个服务端后台提供前端AJAX装载的后台实现，就叫 RightPnaelFeed.aspx，让页面load完成以后AJAX请求这个页面获得边栏的数据。

前端JavaScript是这样的(jQuery为例)：

$(document).ready(function(){    
  //从后台页面获取html，参数f，值为myparam
  $.get("RightPnaelFeed.aspx",{f:"myparam"},function (result) {
    $("#rigntcontent").html(result);//或者用append内部接着插入
  });
});

前端页面需要有一个母DOM节点，AJAX读取数据以后装载到该节点：

<div id=”rigntcontent”></div>

RightPnaelFeed.aspx 内如如下：

<%@ OutputCache Duration="180"  VaryByParam="f" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RightPnaelFeed.aspx.cs" Inherits="my.RightPnaelFeed" %>

第一行设置了页面输出缓存，也就是AJAX请求缓存，180秒。VaryByParam是参数名：f。通过它可以根据设置的参数值建立不同的缓存。这样设置以后，180秒内，只要参数一样，只要没有过Duration所设置的期限，那么ASP.NET就直接在缓存里查询即可，AJAX对该页面的请求将从缓存输出，大大提高性能。通过ACT(Application Center Test）的测试，发现设置缓存后执行的性能比未设置缓存时的性能足足提高了三倍多。

RightPnaelFeed.aspx.cs 内如如下：

public partial class RightPnaelFeed: System.Web.UI.Page
{
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string p= Request.Params["f"];//参数
                string outHtml = "";

                if (p== "abc")
                {

                    //… 这里从数据库读取数据或者从数据缓存读取 …具体实现略…

                    //输出html (您可能需要根据您的情况修改):
                    outHtml = String.Format("<div class=\"hotpanel\"><h2>最热门博客</h2><dl class=\"hotlist\"><dd>{0}</dd></dl></div><div class=\"hotpanel\"><h2>本周活跃用户</h2><div class=\"hotlist\"><ul>{1}</ul></div></div>",
                        HotBlogPart, HotUserPart);
                }
                Response.ContentType = "text/plain";
                Response.ContentEncoding = System.Text.Encoding.UTF8;               

                Response.Write(outHtml);
            }
        } 
    }

很多边栏可以缓存更长的时间，例如“一周内最热博客”，“博客排行榜”等，可以根据不同的粒度创建不同的后台输出。总之，根据不同数据特点，要结合运用AJAX，页面缓存，AJAX缓存，控件缓存，数据缓存，最大程度提高应用性能。

(注：如果您的网页极少变动，可以用网页静态化技术。本文适用于页面内容变化频繁的情况，例如：SNS网站每个人的个性化页面内容都不一样，而边栏是一样的。)

或许您对以下文章有兴趣：

• SQLServer索引调优实践
• 程序员办网站创业，几个问题你想好了吗？
• CTO谈豆瓣网和校内网技术架构变迁
• AJAX延迟异步加载边栏+服务器端缓存AJAX输出
• 二级下拉菜单被遮住，css设置z-index在ie下没作用的问题解决办法
• 简单JS实现走马灯效果的文字(无需jQuery)
• jQuery和ExtJS的timeOut超时设置和event事件处理