(转)用后台线程对TreeView加载大量数据的探索(异步加载)
这几天我在弄TreeView，在节点比较多的时候会发现加载速度很慢，甚至
当机，解决的办法一般有分次加载（象CSDN社区），但是这样也有不好的
地方，就是当用户点击后才加载，会有点延迟，感觉不爽。
我现在的解决办法是页面请求的时候先输出第一层节点，等页面加载完毕后
用Microsoft.XMLHTTP对象广度优先对每个节点异步加载子节点，由于是异步，一般
用户感觉不到父节点在加载子节点，我这个测试用了4605个子节点
，历时30秒左右，在加载的同时还操作节点和界面。也欢迎大家一起来探讨你们的解决方法
主要思路：添加onload事件，等页面加载完毕后
1：将所有子节点加入队列，修改头指针和尾指针
2：while(队列)非空，读取一个节点，向页面请求子节点，设置请求完毕的回调函数,否则GOTO 5
3：如果请求完毕，添加所有的子节点，将所有子节点加入队列，释放队列中对应的父节点，修改头指针和尾指针
4：GOTO 2
5：完毕
在实际的browser环境里，js始终是单线程的但是通过创建COM组件等来实现多线程（象VB通过进程外组件来实现
多线程），因此为了不阻塞浏览器，一般都采用异步方式来调用，而这也是一般的Ajax 框架提供了默认方式。
Code
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>加载大量数据 </title>
</HEAD>
<body MS_POSITIONING="GridLayout" onload="LoadData()">
<form id="Form1" method="post" runat="server">
<table align="left">
<tr>
<td>
<iewc:TreeView id="tvw" runat="server"> </iewc:TreeView>
</td>
<td valign=top> <input type="text" id="txtNode"> </td>
</tr>
</table>
</form>
</body>
</HTML>
<script language="javascript">
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");;
var xmlDoc=new ActiveXObject("MSXML2.DOMDocument");
var array;
var head=0;
var tail=0;
//开始自动加载
function LoadData()
{
array=tvw.getChildren();
tail=array.length;
ExecCommand("POST",'WebForm1.aspx','ID='+array[head].getAttribute("Text"),GetItemComplete)
}
//点击节点时显示节点名称，表明界面线程没有被冻结
function DisplayNode() {
var node=tvw.getTreeNode(tvw.clickedNodeIndex);
if(node==null)
return;
document.all.txtNode.value=node.getAttribute("Text");
}
//请求响应后的回调函数
function GetItemComplete()
{
if (xmlhttp.readyState==4)
{
//加载完毕
if(xmlhttp.responseTEXT=="")
return;
xmlDoc.loadXML(xmlhttp.responseTEXT);
var root=xmlDoc.firstChild;
var nodes = root.childNodes;
for (var i=0; i <nodes.length; i++)
{
var node = nodes.item(i);
AddNode(array[head],node.text,node.text);
}
array[head]=null;//释放内存
head++;
if(head <tail)
{
ExecCommand("POST",'WebForm1.aspx', 'ID='+array[head].getAttribute("Text"),GetItemComplete);
}
}
}
function ExecCommand(strMethod ,strPrgmURL , strParamString,functionAddr)
{
try
{
xmlhttp.Open(strMethod , strPrgmURL, true);
//设置异步回调函数
xmlhttp.onreadystatechange=functionAddr;
if (strMethod.toUpperCase() == 'POST')
{
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.Send(strParamString);
}
else
{
xmlhttp.Send();
}
}
catch(e)
{
//alert(e);
return -1;
}
}
//根据父ID创建子节点
function AddNode(node,Text,ID)
{
var subNode=tvw.createTreeNode();
subNode.setAttribute("Text",Text);
subNode.setAttribute("ID","ID");
node.add(subNode);
//将subNode加入对列
array[tail++]=subNode;
}
</script>
Code
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.WebControls;
using System.Text;
namespace WebApplication1
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected Microsoft.Web.UI.WebControls.TreeView tvw;
public static int cnt;
private const int MAX=5;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
if(!Page.IsPostBack)
{
if(this.Request["ID"]!=null)
{
string first=this.Request["ID"].ToString().Trim().Substring(0,1);
int depth=Convert.ToInt32(first);
depth++;
if(depth>=4)
Response.End();
int count=depth*depth*MAX;//定义当层单个节点的子节点数
StringBuilder sb=new StringBuilder(" <root>",count*21+20);//预计所有子节点字符串的长度和
for(int i=0;i <count;i++,cnt++)
{
sb.Append(" <node>"+depth.ToString()+"--"+cnt.ToString()+" </node>");
}
sb.Append(" </root>");
Response.Write(sb.ToString());
Response.End();
}
tvw.Attributes.Add("onclick","DisplayNode()");
cnt=1;
for(int i=0;i <MAX;i++)
{
TreeNode tn=new TreeNode();
tn.ID="1--"+cnt.ToString();//层号码＋序列号
tn.Text="1--"+cnt.ToString();
tvw.Nodes.Add(tn);
cnt++;
}
}
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
当机，解决的办法一般有分次加载（象CSDN社区），但是这样也有不好的
地方，就是当用户点击后才加载，会有点延迟，感觉不爽。
我现在的解决办法是页面请求的时候先输出第一层节点，等页面加载完毕后
用Microsoft.XMLHTTP对象广度优先对每个节点异步加载子节点，由于是异步，一般
用户感觉不到父节点在加载子节点，我这个测试用了4605个子节点
，历时30秒左右，在加载的同时还操作节点和界面。也欢迎大家一起来探讨你们的解决方法
主要思路：添加onload事件，等页面加载完毕后
1：将所有子节点加入队列，修改头指针和尾指针
2：while(队列)非空，读取一个节点，向页面请求子节点，设置请求完毕的回调函数,否则GOTO 5
3：如果请求完毕，添加所有的子节点，将所有子节点加入队列，释放队列中对应的父节点，修改头指针和尾指针
4：GOTO 2
5：完毕
在实际的browser环境里，js始终是单线程的但是通过创建COM组件等来实现多线程（象VB通过进程外组件来实现
多线程），因此为了不阻塞浏览器，一般都采用异步方式来调用，而这也是一般的Ajax 框架提供了默认方式。
ASPX文件：
Code<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>加载大量数据 </title>
</HEAD>
<body MS_POSITIONING="GridLayout" onload="LoadData()">
<form id="Form1" method="post" runat="server">
<table align="left">
<tr>
<td>
<iewc:TreeView id="tvw" runat="server"> </iewc:TreeView>
</td>
<td valign=top> <input type="text" id="txtNode"> </td>
</tr>
</table>
</form>
</body>
</HTML>
<script language="javascript">
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");;
var xmlDoc=new ActiveXObject("MSXML2.DOMDocument");
var array;
var head=0;
var tail=0;
//开始自动加载
function LoadData()
{
array=tvw.getChildren();
tail=array.length;
ExecCommand("POST",'WebForm1.aspx','ID='+array[head].getAttribute("Text"),GetItemComplete)
}
//点击节点时显示节点名称，表明界面线程没有被冻结
function DisplayNode() {
var node=tvw.getTreeNode(tvw.clickedNodeIndex);
if(node==null)
return;
document.all.txtNode.value=node.getAttribute("Text");
}
//请求响应后的回调函数
function GetItemComplete()
{
if (xmlhttp.readyState==4)
{
//加载完毕
if(xmlhttp.responseTEXT=="")
return;
xmlDoc.loadXML(xmlhttp.responseTEXT);
var root=xmlDoc.firstChild;
var nodes = root.childNodes;
for (var i=0; i <nodes.length; i++)
{
var node = nodes.item(i);
AddNode(array[head],node.text,node.text);
}
array[head]=null;//释放内存
head++;
if(head <tail)
{
ExecCommand("POST",'WebForm1.aspx', 'ID='+array[head].getAttribute("Text"),GetItemComplete);
}
}
}
function ExecCommand(strMethod ,strPrgmURL , strParamString,functionAddr)
{
try
{
xmlhttp.Open(strMethod , strPrgmURL, true);
//设置异步回调函数
xmlhttp.onreadystatechange=functionAddr;
if (strMethod.toUpperCase() == 'POST')
{
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.Send(strParamString);
}
else
{
xmlhttp.Send();
}
}
catch(e)
{
//alert(e);
return -1;
}
}
//根据父ID创建子节点
function AddNode(node,Text,ID)
{
var subNode=tvw.createTreeNode();
subNode.setAttribute("Text",Text);
subNode.setAttribute("ID","ID");
node.add(subNode);
//将subNode加入对列
array[tail++]=subNode;
}
</script>
CS文件：
Codeusing System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.WebControls;
using System.Text;
namespace WebApplication1
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected Microsoft.Web.UI.WebControls.TreeView tvw;
public static int cnt;
private const int MAX=5;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
if(!Page.IsPostBack)
{
if(this.Request["ID"]!=null)
{
string first=this.Request["ID"].ToString().Trim().Substring(0,1);
int depth=Convert.ToInt32(first);
depth++;
if(depth>=4)
Response.End();
int count=depth*depth*MAX;//定义当层单个节点的子节点数
StringBuilder sb=new StringBuilder(" <root>",count*21+20);//预计所有子节点字符串的长度和
for(int i=0;i <count;i++,cnt++)
{
sb.Append(" <node>"+depth.ToString()+"--"+cnt.ToString()+" </node>");
}
sb.Append(" </root>");
Response.Write(sb.ToString());
Response.End();
}
tvw.Attributes.Add("onclick","DisplayNode()");
cnt=1;
for(int i=0;i <MAX;i++)
{
TreeNode tn=new TreeNode();
tn.ID="1--"+cnt.ToString();//层号码＋序列号
tn.Text="1--"+cnt.ToString();
tvw.Nodes.Add(tn);
cnt++;
}
}
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
浙公网安备 33010602011771号