Blog Calendar解决方案
在blog上发过几篇关于Calendar的文章
一直没有找到比较好的解决的方法
最近一次是将一个月以来的数据存入Cache中，然后对DataView进行RowFilter,查询出每一天的日志数
根据日志数给出日历上的链接
虽然这样可以在某程度上提高数据的可用性
但这样的数据调用还是同步的
只有异步才能真正提高其性能
于是最终还是想到用XmlHttpRequest来解决
谁让它现在这么火呢?
于是写了一个Calendar.html文件
该文件用的还是.net 内置的calendar控件,也曾想过自己写一个,但感觉有点麻烦,所以放弃了.
这个页面的完成是很简单的,数据的调用也在前面讲过.
现在的问题就是要在其它的页面中用XmlHttpRequest来获取这个日历了
代码很简单:
var objRequest;
function getCalendar()
{
try
{
objRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
objRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
objRequest=null;
}
}
if(!objRequest&&typeof XMLHttpRequest!="undefined")
{objRequest=new XMLHttpRequest();}
var url="calendar.aspx";
if(objRequest!=null)
{
objRequest.onreadystatechange = Process;
objRequest.open("GET",url,true);
objRequest.send(null);
}
}
function Process()
{
var objWeather = document.getElementById("CalendarMain");
//收到完整的服务器响应
if(objRequest.readyState == 1){
objWeather.innerHTML = "正在加载...."
}
else if(objRequest.readyState == 2){
objWeather.innerHTML = "已加载...."
}
else if(objRequest.readyState == 3){
objWeather.innerHTML = "交互中...."
}
else if(objRequest.readyState == 4){
//HTTP服务器响应值成功
if(objRequest.status == 200){
//将服务器返回的字符串写到页面中ID为showdiv的区域
var response = objRequest.responseText;
if(matchValue = response.match(/<table.*?>[\s\S]*<\/table>/i))
response = matchValue;
objWeather.innerHTML = response;
}
else{
objWeather.innerHTML = "Error:"+objRequest.statusText;
}
}
}
//
//getCalendar();
这里要注意这一行:
if(matchValue = response.match(/<table.*?>[\s\S]*<\/table>/i))
为什么要这样做呢?
Calendar.html的源代码是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
无标题页
</title></head>
<body>
<form name="form1" method="post" action="calendar.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE3NTY0MTAxNzJkZHrMIH1SM8CifbXXutpI8WwLDfBf" />
</div>
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<div>
<table id="Calendar1" cellspacing="0" cellpadding="2" rules="all" title="Calendar" border="1" style="width:220px;height:200px;font-size:8pt;font-family:Verdana;color:#663399;
border-width:1px;border-style:solid;border-color:Transparent;background-color:Transparent;
border-collapse:collapse;">
.............
</table>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWKwLEy+j+DgLJ0+9KAqTp8dMDAqTp7Y4LAq
Tp2akMAqTptcUFAqTpoeAOAqTpnZsGAqTpibYPAqTp5VECpOmRu
gUCpOmN1Q4Cn4af/gkCn4aLmQECn4bntAoCn4bT7wMCn4bPigsCn
4a7pgwCn4aXwQUCn4aD/A4Cn4a/xQMCn4ar4AQC+p+9iQYC+p+ppA
8C+p+FXwL6n/H6CQL6n+2VAQL6n9mwCgL6n7XsAwL6n6GHCwL6n93vC
QL6n8mKAQLVtNuTDALVtLfPBQLVtKPqDgLVtJ+FBgLVtIugDwLVtOdbA
tW00/YJAtW0z5EBAtW0+/oHAtW015UPAuDem9IF3AUmKv0tB+jLb53MqAgivmduZSE=" />
</div></form>
</body>
</html>
因为Calendar.html中的日历用的是.net控件,而这个控件是要放在<form runat=Server>中的,而在一个.aspx文件中,只能含有一个
<form Runat="server">,如果不进行处理直接取出response的话,那调用这段代码的.aspx文件必然会出错,于是这里必须处理一下,只取
出源代码中的<table></table>部分为我所用.
到此,blog的日历得到进一步解决
