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事件處理