从TreeView的节点数据加载到WebService再到Ajax的联想

MS的TreeView到Ajax会有什么联系呢？说真的，我对Ajax不是很明白，自从下载了它的帮助及说明后，才恍然大悟，原来它就是MS的WebService的一个新名词。
不管三七二十一，我们先来从简单的入手，看看这个WebService到底是什么，以及这个Ajax又为我们做了什么？

首先，你可以从MS的网站上下载到关于TreeView的Web Controls。这里是相关的下载及说明。
http://msdn.microsoft.com/library/default.asp?url=/workshop/webcontrols/webcontrols_entry.asp
你应该可以学会什么是WebControls以及如何使用TreeView.
好了，我们看看如何在页面上添加一个TreeView:下面的代码添加到ASPX页面里，当然，要对MS的控件添加引用：<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> <%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> <%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> <%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="Webb.WAVE.WebService.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

</HEAD>

<body>

<iewc:TreeView id="TreeView1" runat="server">

<iewc:TreeNode Text="Node0">

<iewc:TreeNode Text="Node5"></iewc:TreeNode>

<iewc:TreeNode Text="Node6"></iewc:TreeNode>

<iewc:TreeNode Text="Node7"></iewc:TreeNode>

</iewc:TreeNode>

<iewc:TreeNode Text="Node1"></iewc:TreeNode>

<iewc:TreeNode Text="Node2"></iewc:TreeNode>

<iewc:TreeNode Text="Node3"></iewc:TreeNode>

<iewc:TreeNode Text="Node4"></iewc:TreeNode>

</iewc:TreeView>

</form>

</body>

</HTML>

这应该是极简单的事情了。
然而我却偶然在MS的网站上看到了这样的代码：

<iewc:TreeView id="TreeView1" runat="server">

<iewc:TreeNode Text="Node0">

</iewc:TreeNode>

<iewc:TreeNode Text="Node1"></iewc:TreeNode>

<iewc:TreeNode Text="Node2"></iewc:TreeNode>

<iewc:TreeNode Text="Node3"></iewc:TreeNode>

<iewc:TreeNode Text="Node4"></iewc:TreeNode>

</iewc:TreeView>

而文本文件就是一些子节点数据文件。这不是一个好方法来添加节点，因为一方面在设计时会出现错误而不能显示TreeView，另一方面也使得页面逻辑混乱，然而它却为我打开了一个思路！
如果我所添加的文件不是一个真实的文件，而是动态生成的文本文件呢？也就是说可以为不同的用户在TreeView里添加不同的数据节点。这是个好想法，然而上而的语法是不能通过的。因为include方法只能添加静态文件，而不能使用任何的参数。
于是不得不用其它的方法，就是使用XML文件来添加节点。这个方法在MS的网站上有很多的说明，因此就不多说了。我们只关心这个XML文件的来历，即动态的生成：
这有一个测试：

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 Webb.WAVE.Controls;

namespace Webb.WAVE.WebService

{

/// <summary>

/// Summary description for TestForLoadTreeNodes.

/// </summary>

public class TestForLoadTreeNodes : System.Web.UI.Page

{

private string m_openFolderPic = @"..\images\WAVE_Folder.gif";

private string m_closeFolderPic = @"..\images\WAVE_FolderOpen.gif";

private string m_filePic = @"..\images\WAVE_File.gif";

public bool IsShowFiles = true;

public bool IsShowCheckBox = false;

private void Page_Load(object sender, System.EventArgs e)

{

// Put user code to initialize the page here

Object m_parentFolder = this.Request["FolderID"];

if(m_parentFolder==null)

{

this.ShowErrorNode();

}

long m_folderID = 0L;

try

{

m_folderID = Convert.ToInt32(m_parentFolder);

}

catch

{

this.ShowErrorNode();

}

if(m_folderID==0)

{

this.ShowErrorNode();

}

this.ShowNodeXML(m_folderID);

this.Response.End();

}

private void ShowErrorNode()

{

string m_errorNode =@"<TREENODES>

</TREENODES>";

this.Response.Write(m_errorNode);

}

/// <summary>

///

/// </summary>

/// <param name="i_folderID"></param>

private void ShowNodeXML(long i_folderID)

{

//Sub Folder

DataTable m_table = new DataTable();

WaveFolderManager.GetSubFolderData(m_table,i_folderID);

render xml data

}

Web Form Designer generated code

}

它专门用于查询数据库，根据参数来生成XML文件。于是我们在TreeView上可以添加一些事件，让它动态的绑定节点（不用刷新页面）。

private void TreeView1_Load(object sender, System.EventArgs e)

{

string m_treeViewID = this.TreeView1.ClientID;

//(sender as TreeView).Attributes.Add("onexpand","return ShowTreeNode('"+m_treeViewID+"');");

string m_textBoxID = this.TextBox_SelectedData.ClientID;

(sender as TreeView).Attributes.Add("onselectedindexchange","return SelectedNode('"+m_treeViewID+"','"+m_textBoxID+"');");

(sender as TreeView).Attributes.Add("onclick","return ShowTreeNode('"+m_treeViewID+"');");

// (sender as TreeView).Attributes.Add("onload","this.click();alert();return false;");

}

相关JS代码：

//TreeView.js

//Cleint Jscript: Load tree nodes for IE web controls of treeview.

//Edit by: Wu.Country 2006-05

///

///str_objID:TreeVirw client ID

function ShowTreeNode(str_ObjID){

var m_treeView = eval("document.all."+str_ObjID);

var m_selectedNode = m_treeView.getTreeNode(m_treeView.selectedNodeIndex);

//alert(m_selectedNode.getAttribute("NodeData"));

var m_nodeData = m_selectedNode.getAttribute("NodeData");

var m_isLoaded = m_selectedNode.getAttribute("IsLoaded");

if(m_isLoaded!=null){

event.cancelBubble=true;

return false;

}else{

var m_id = m_nodeData.split("|");

if(m_id[2]!="folder"){

m_selectedNode.setAttribute("IsLoaded",true);

event.cancelBubble=true;

return false;

}

//The request respone should return a XML file.

//<TREENODES>

//<TREENODE TEXT="MyDocuments" NodeData="4|2|folder"/>

//<TREENODE TEXT="MyUser'sFolder_1" NodeData="8|2|folder"/>

//<TREENODE TEXT="2006_05" NodeData="245|2|folder"/>

//<TREENODE TEXT="策划方案.doc" NodeData="1289|2|file"/>

//</TREENODES>

m_selectedNode.setAttribute("treeNodeSrc","WebService/LoadTreeNodes.aspx?FolderID="+m_id[0]);

m_selectedNode.databind();

m_selectedNode.setAttribute("IsLoaded",true);

m_selectedNode.setAttribute("EXPANDED",true);

}

// event.cancelBubble=true;

// return false;

}

function SelectedNode(str_ObjID,str_ObjData){

var m_treeView = eval("document.all."+str_ObjID);

var m_TextBox = eval("document.all."+str_ObjData);

var m_selectedNode = m_treeView.getTreeNode(m_treeView.selectedNodeIndex);

var m_nodeData = m_selectedNode.getAttribute("NodeData");

var m_isLoaded = m_selectedNode.getAttribute("IsLoaded");

ShowTreeNode(str_ObjID);

m_TextBox.value = m_selectedNode.getAttribute("NodeData")+"|"+m_selectedNode.getAttribute("Text");

//alert(m_selectedNode.getAttribute("NodeData"));

// event.cancelBubble=true;

// return false;

}

function ExpendTreeNode(str_ObjID){

var m_treeView = eval("document.all."+str_ObjID);

m_treeView.setAttribute("selectedNodeIndex","0");

alert();

}

于是我们就简单的完成了一个概念上讲，类似WebService的事情了。
回顾一下我们的做法：
1、先做一个ASPX文件，它只负责生成XML文件，当然是TreeView可用的数据岛。
2、在TreeView上添加JS事件，让它在展开的时候，根据当前所选择的节点ID来查找所有子节点，并将参数传给上而的ASPX文件。
3、将返回结果绑定到TreeView上。
本质上讲，MS的webService和上面的过程类似。
我们再看一个WebService的例子：

[WebMethod]

public string HelloWorld(long i_parentID)

{

string m_retrunStr = string.Empty;

DataTable m_table = new DataTable();

WaveFolderManager.GetSubFolderData(m_table,i_parentID);

render xml data

}

经过调用后可以得到：

<?xml version="1.0" encoding="utf-8" ?>

显然，我们是没有办法直接使用WebMethod来返回数据给页面上的JS函数或者对象来使用的，虽然我们可以很轻松的写好WebMethod方法来返回我们想要的数据！
于是就用到了所味的Ajax。其实除了Ajax，MS早就有一种技术可以直接在JS页面上调用WebService方法，它就是Css的behavior方法。
其实看上而的TreeView例子，为什么它可直接加载从ASPX页面上返回的节点数据呢？就是因为它已经实现了behavior，你要从MS的网站上下载这个文件：webservice.htc(在MS的网站上搜索一个，应该可以很快的找到该文件并下载)，其实上面的TreeView就有这样的文件，而且在运行时是加载了一些HTC文件的，这才使得TreeView有了神出鬼没的数据加载效果。
没关系，我们可以自己为一个HTML Button添加事件并返回WebService上的数据。
看一个例子：还是用上而的服务：

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="Webb.WAVE.WebService.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<!--

function Init(){

Service.useService("TVFolderAndFiles.asmx?WSDL","TVFolderAndFiles");

}

function GetTreeNodeData(){

Service.TVFolderAndFiles.callService(OnResule,"HelloWorld",2);

}

function OnResule(result){

Service.innerText = result.value;

}

-->

</script>

</HEAD>

</form>

</body>

</HTML>

点击后，我们一样可以得到结果：
<TREENODES>
<TREENODE TEXT="MyDocuments" NodeData="4|2|folder" />
<TREENODE TEXT="MyUser'sFolder_1" NodeData="8|2|folder" />
<TREENODE TEXT="2006_05" NodeData="245|2|folder" />
<TREENODE TEXT="策划方案.doc" NodeData="1289|2|file"/>
<TREENODE TEXT="策划方案.doc" NodeData="1308|2|file"/>
<TREENODE TEXT="ABC.JPG" NodeData="1309|2|file"/>
<TREENODE TEXT="策划方案.doc" NodeData="1400|2|file"/>
<TREENODE TEXT="策划方案.doc" NodeData="1401|2|file"/>
<TREENODE TEXT="test_135MB.avi" NodeData="1410|2|file"/>
<TREENODE TEXT="test_3.25MB.avi" NodeData="1411|2|file"/>
<TREENODE TEXT="冥王哈迪斯之冥界篇_前章06.rmvb" NodeData="1412|2|file"/>
<TREENODE TEXT="MS_WSS_Dec_05.pdf" NodeData="1548|2|file"/>
<TREENODE TEXT="MS_WSS_Dec_05.pdf" NodeData="1550|2|file"/>
怎么样，是不是对这个WebService有了一个大概的认识呢？
而对于Ajax，其原理和上面的beheivor是一样的(我只试了一下，没深入研究)，只不过简化了一些操作，用了一个HTTPHander来处理所以来自Ajax的请求，然后变向的从服务器哪里取得数据并返回给调用函数。
因为本人对Ajax研究的不深，所以也就不深入的讨论这个Ajax了，但从上面的讨论中应该可以明确的发现，不管用什么新技术还是什么新名词，都是为了解决实际的需求。我之所以从TreeView的节点数据加载开始讨论这个WebService，就是因为TreeView的节点数据加载太浪费时间，而且每次的页面视图占用太多的数据，所以想到用其它的方法来解决。而在解决这一问题的时候，自然的也就用到了上面的这些东西。