Ajax delayed asynchronous loading sidebar + server-side cache Ajax output

Websites often have sidebar, for example,Top blogs in 24 hours","Top comments in 48 hours","Active users this week"And so on, these sidebar content often needs to query the database, and often many pages have the same sidebar, so it is best to extract them together for caching and Ajax loading delay, that is, the homepage can be displayed first, and then Ajax loads the sidebar asynchronously. The server does not read the sidebar from the database every time, but sets the cache. The server outputs are obtained from the cache within a certain period of time, the timeout value can be read from the data cache or database.

(Note: If your webpage is rarely changed, you can use static Web technology. This article applies to the situations where the page content changes frequently. For example, the personalized page content of each person on the SNS website is different, while the sidebar is the same .)

Let's talk about it. First, we need a backend server to provide the backend Implementation of front-end Ajax loading, which is calledRightpnaelfeed. aspxAfter the page load is complete, Ajax requests this page to obtain the sidebar data.

The front-end Javascript is like this (jquery is used as an example ):

$ (Document). Ready (function (){ // Obtain HTML from the background page. The parameter F has the value of myparam. $. Get ("Rightpnaelfeed. aspx", {F:" myparam "}, function (result ){ $ ("# Rigntcontent" result .html (result); // or Use APPEND to insert }); });

 

The front-end page must have a parent Dom node. After Ajax reads data, it is loaded to this node:

<Div id = "rigntcontent"> </div>

Rightpnaelfeed. aspxAs shown in the following figure:

<% @ OutputcacheDuration= "180"Varybyparam= "F" %> <% @ Page Language = "C #" autoeventwireup = "true" codebehind = "rightpnaelfeed. aspx. cs" inherits = "My. rightpnaelfeed" %>

The first line sets the page output cache, that is, the Ajax request cache, 180 seconds. Varybyparam is the parameter name: f. It can be used to create different caches Based on the set parameter values. After this setting, Asp. net is directly queried in the cache. Ajax requests to the page are output from the cache, greatly improving the performance. Through the Application Center Test test, it is found that the performance after cache is set is improved by more than three times than that when no cache is set.

Rightpnaelfeed. aspx. CSAs shown in the following figure:

Public partial class rightpnaelfeed: system. Web. UI. Page { Protected void page_load (Object sender, eventargs E) { If (! Ispostback) { String P =Request. Params["F"]; // Parameter String outhtml = ""; If (P = "ABC ") { //...Read data from the database or from the data cache... Specific implementation... // Output HTML (you may need to modify it according to your situation ): Outhtml = string. format ("<Div class = \" hotpanel \ "> <H2> top blogs </H2> <DL class = \" hotlist \ "> <dd >{0} </DD> </dl> </div> <Div class = \ "hotpanel \"> <H2> active users this week </H2> <Div class = \ "hotlist \"> <ul> {1} </ul> </div> ", Hotblogpart, hotuserpart ); } Response. contenttype = "text/plain "; Response. contentencoding = system. Text. encoding. Utf8 ; Response. Write (outhtml ); } } }

 

Many sidebar can be cached for a longer period, for example,The hottest blog in a week","Blog rankingYou can create different background outputs based on different granularities. In short, according to different data characteristics, we should combine Ajax, page cache, Ajax cache, control cache, and data cache to maximize application performance.

(Note: If your webpage is rarely changed, you can use static Web technology. This article applies to the situations where the page content changes frequently. For example, the personalized page content of each person on the SNS website is different, while the sidebar is the same .)

You mayArticleInterested:

• SQL Server INDEX OPTIMIZATION practices
• Do you have any questions for programmers to start a website?
• CTO talks about the technical architecture change of Douban.com and Intranet
• Ajax delayed asynchronous loading sidebar + server-side cache Ajax output
• The level-2 drop-down menu is hidden, and CSS setting of Z-index does not work in IE. Solution
• Simple js to implement text with the drive lamp effect (jquery is not required)
• Timeout setting and event processing for jquery and extjs