client|聊天室|刷新|无刷新好了，至此，我们的webservice就完成了，大家可能不满了，还是没实现无刷新嘛，别急，这是客户端的事。下面我们就来做这项工作。
一般来说我们完全可以做一个html页面，而不用server page，但为了顺便说明怎样做组件，我决定作一个server control,先来看一下代码
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.ComponentModel;

namespace Michael.Web.UI.Controls
{
    /// <summary>
    /// Summary description for chat.
    /// </summary>
    [DefaultProperty("Text"),
        ToolboxData("<{0}:chat runat=server></{0}:chat>")]
    public class chat : System.Web.UI.WebControls.Table
    {
        private string doc;
        private string text;
        [Bindable(true),
        Category("Appearance"),
        DefaultValue("")]
        public string Text
        {
            get
            {
                return text;
            }

            set
            {
                text = value;
            }
        }

        /// <summary>
        /// Render this control to the output parameter specified.
        /// </summary>
        /// <param name="output"> The HTML writer to write out to </param>
        protected override void Render(HtmlTextWriter output)
        {
            // The script block is written to the client
            output.Write(doc);
            
            base.Render(output);
        }

        private string Serviceurl = "http://localhost/chat/ChatWebService.asmx?WSDL";
        [Bindable(true),
        Category("WebServiceProperty"),
        DefaultValue("http://localhost/chat/ChatWebService.asmx?WSDL")]
        public string ServiceURL
        {
            get
            {
                return Serviceurl;
            }
            set
            {
                Serviceurl = value;
            }
        }
        private string Behaviorurl = "http://localhost/chat/webservice.htc";
        [Bindable(true),
        Category("WebServiceProperty"),
        DefaultValue("")]
        public string BehaviorURL
        {
            get
            {
                return Behaviorurl;
            }
            set
            {
                Behaviorurl = value;
            }
        }

        private string tablecssclass;
        [Bindable(true),
        Category("LayoutProperty"),
        DefaultValue("")]
        public string TableCssClass
        {
            get
            {
                return tablecssclass;
            }
            set
            {
                tablecssclass = value;
            }
        }

        private string titlecssclass;
        [Bindable(true),
        Category("LayoutProperty"),
        DefaultValue("")]
        public string TitleCssClass
        {
            get
            {
                return titlecssclass;
            }
            set
            {
                titlecssclass = value;
            }
        }

        private string onlinecssclass;
        [Bindable(true),
        Category("LayoutProperty"),
        DefaultValue("")]
        public string OnlineCssClass
        {
            get
            {
                return onlinecssclass;
            }
            set
            {
                onlinecssclass = value;
            }
        }
        
        private string msgcssclass;
        [Bindable(true),
        Category("LayoutProperty"),
        DefaultValue("")]
        public string MSGCssClass
        {
            get
            {
                return msgcssclass;
            }
            set
            {
                msgcssclass = value;
            }
        }

        private string selusercssclass;
        [Bindable(true),
        Category("LayoutProperty"),
        DefaultValue("")]
        public string SelUserCssClass
        {
            get
            {
                return selusercssclass;
            }
            set
            {
                selusercssclass = value;
            }
        }
        protected override void OnInit(EventArgs e)
        {
            this.ID = "service";
            
            this.Style["Behavior"] = "url('" + Behaviorurl + "')";
            
            this.Style["Table-Layout"] = "Fixed";
            
            if( this.Attributes["class"] == null) this.Attributes["class"] = tablecssclass;

            this.Attributes["onresult"] = UniqueID + "_onmyresult();";

            TableRow tr;
            // And also create 7 Table Cell elements one by one
            TableCell cell = new TableCell();

            cell.Attributes["class"] = titlecssclass;
            cell.Attributes["Align"] = "Left";
            
            // Set the caption of the control
            cell.Text = "Portal 聊天室";
            // Instantiate a Table Roa and attach the First Cell to it
            tr = new TableRow();
            tr.Cells.Add(cell);
            // Add the Table Row to our Control
            this.Rows.Add(tr);
            
            // Row No 2 starts here
            
            cell = new TableCell();
            
            cell.Attributes["class"] = onlinecssclass;
            cell.Text = "在线人员";
            tr = new TableRow();
            tr.Cells.Add(cell);
            this.Rows.Add(tr);
            
            // Row No 3 Starts here
            
            cell = new TableCell();
            cell.Style["Height"] = "25%";
            // We create a DIV element using HtmlGenericControl object
            // We can also do this using the Panel object
            HtmlGenericControl d = new HtmlGenericControl("Div");
            d.ID = UniqueID + "_ChatMsgs";
            d.Style["Height"] = "100%";
            d.Style["Width"] = "100%";
            d.Style["Overflow"] = "Auto";
            d.Style["Padding-Left"] = "15%";
            d.ID = UniqueID + "_ChatList";
            // Adding the DIV element to the Table Cell
            cell.Controls.Add(d);
            tr = new TableRow();
            tr.Cells.Add(cell);
            this.Rows.Add(tr);
            
            // Row No 4 Starts here
            
            cell = new TableCell();
            
            cell.Attributes["class"] = msgcssclass;
            cell.Text = "消息:";
            tr = new TableRow();
            tr.Cells.Add(cell);
            this.Rows.Add(tr);
            
            // Row No 5 starts here
            
            cell = new TableCell();
            cell.Style["Height"] = "35%";
            d = new HtmlGenericControl("Div");
            d.ID = UniqueID + "_ChatMsgs";
            d.Style["Height"] = "100%";
            d.Style["Width"] = "100%";
            d.Style["Overflow"] = "Auto";
            cell.Controls.Add(d);
            tr = new TableRow();
            tr.Cells.Add(cell);
            this.Rows.Add(tr);
            
            // Row No 6 Starts here
            
            cell = new TableCell();
            
            cell.Attributes["class"] = selusercssclass;
            cell.ID = UniqueID + "_Prompt";
            cell.Text = "选择一个用户:";
            tr = new TableRow();
            tr.Cells.Add(cell);
            this.Rows.Add(tr);
            
            // Row No 7 starts here
            
            cell = new TableCell();
            cell.Text = "<INPUT Type=\"Text\" id= '" + UniqueID + "_UserInput'> \r\n";
            cell.Text += "
\r\n";
            cell.Text += "<Button id = '" + UniqueID + "_bnSendMsg' onclick = \"return SendMsg();\" class = " + UniqueID + "_TitleLabel style = \"display:none\"> 发送 </Button>\r\n";
            cell.Text += "<Button id = '" + UniqueID + "_bnSelectName' onclick = \"return " + UniqueID + "_SelectName();\" class = " + UniqueID + "_TitleLabel style = \"display:block\"> 登陆 </Button> \r\n";
            cell.Style["Color"] = "Black";
            cell.Style["Background-Color"] = "Gainsboro";
            tr = new TableRow();
            tr.Cells.Add(cell);
            this.Rows.Add(tr);
            
            // First script Block is written into 'doc' variable

            doc = "\r\n<SCRIPT FOR = 'window' EVENT = 'onload()'>";            
            doc += "//alert(\"done\"); \r\n";
            doc += "service.use(\"";
            doc += Serviceurl + "\",\"ChatWebService\"); \r\n";
            doc += "" + UniqueID + "_UserInput.focus();\r\n";
            doc += "</SCRIPT> \r\n";
                   
            // Then the second script block follows
                   
            doc += "<script language=\"JavaScript\">\r\n";
            doc += "var " + UniqueID + "_iCallID1, " + UniqueID + "_iCallID2, " + UniqueID + "_iCallID3; \r\n";
            doc += "var " + UniqueID + "_NickName; \r\n";
            doc += "var " + UniqueID + "_MsgXML = new ActiveXObject(\"MSXML.DOMDocument\");\r\n";
            doc += "function " + UniqueID + "_SelectName() \r\n";
            doc += "{ \r\n";
            doc += "if (" + UniqueID + "_UserInput.value == \"\") return false;\r\n";
            doc += "" + UniqueID + "_NickName = " + UniqueID + "_UserInput.value; \r\n";
            doc += "" + UniqueID + "_bnSelectName.disabled = 'true'; \r\n";
            doc += "" + UniqueID + "_UserInput.disabled = 'true';\r\n";
            doc += "" + UniqueID + "_iCallID1 = service.ChatWebService.call(\"Login\"," + UniqueID + "_NickName); \r\n";
            doc += "} \r\n";
            doc += "function " + UniqueID + "_onmyresult() \r\n";
            doc += "{ \r\n";
            doc += "if((event.result.error)&&(" + UniqueID + "_iCallID1==event.result.id)) \r\n";
            doc += "{ \r\n";
            doc += "var xfaultcode = event.result.errorDetail.code; \r\n";
            doc += "var xfaultstring = event.result.errorDetail.string; \r\n";
            doc += "var xfaultsoap = event.result.errorDetail.raw;\r\n";
            doc += "\r\n";
            doc += "// Add code to output error information here\r\n";
            doc += "alert(xfaultstring);\r\n";
            doc += "" + UniqueID + "_bnSelectName.disabled = false;\r\n";
            doc += "" + UniqueID + "_UserInput.disabled = false; \r\n";
            doc += "" + UniqueID + "_UserInput.focus();\r\n";
            doc += "\r\n";
            doc += "} \r\n";
            doc += "else if((!event.result.error)&&(" + UniqueID + "_iCallID1==event.result.id)) \r\n";
            doc += "{ \r\n";
            doc += "" + UniqueID + "_ChatList.innerText= event.result.value; \r\n";
            doc += "" + UniqueID + "_ChatList.scrollTop =  2000; \r\n";
            doc += "" + UniqueID + "_bnSelectName.style.display = 'none';\r\n";
            doc += "" + UniqueID + "_bnSendMsg.style.display = 'block';\r\n";
            doc += "" + UniqueID + "_UserInput.value = \"\"; \r\n";
            doc += "" + UniqueID + "_UserInput.disabled = false; \r\n";
            doc += "" + UniqueID + "_UserInput.focus();\r\n";
            doc += "" + UniqueID + "_Prompt.innerText = " + UniqueID + "_NickName + \" 说:\"; \r\n";
            doc += "window.setTimeout('" + UniqueID + "_iCallID2 = service.ChatWebService.call(\"GetMsgs\"," + UniqueID + "_NickName);',3000); \r\n";
            doc += "} \r\n";
            doc += "else if((event.result.error)&&(" + UniqueID + "_iCallID2==event.result.id))\r\n";
            doc += " {\r\n";
            doc += "var xfaultcode = event.result.errorDetail.code; \r\n";
            doc += "var xfaultstring = event.result.errorDetail.string; \r\n";
            doc += "var xfaultsoap = event.result.errorDetail.raw;\r\n";
            doc += "// Add code to output error information here\r\n";
            doc += "alert(\"xfaultstring\");\r\n";
            doc += " }\r\n";
            doc += " else if((!event.result.error)&&(" + UniqueID + "_iCallID2==event.result.id))\r\n";
            doc += " {\r\n";
            doc += "var xmlResult = event.result.raw.xml; \r\n";
            doc += " if (xmlResult != \"\" && xmlResult != null)\r\n";
            doc += " {\r\n";
            doc += "\r\n";
            doc += "" + UniqueID + "_MsgXML.loadXML(xmlResult);\r\n";
            doc += " " + UniqueID + "_ChatList.innerText = " + UniqueID + "_MsgXML.selectSingleNode(\"//UserList\").text; \r\n";
            doc += "" + UniqueID + "_ChatList.scrollTop =  2000; \r\n";
            doc += " " + UniqueID + "_ChatMsgs.innerHTML += " + UniqueID + "_MsgXML.selectSingleNode(\"//Messages\").text;\r\n";
            doc += "" + UniqueID + "_ChatMsgs.scrollTop =  2000; \r\n";
            doc += " }\r\n";
            doc += " window.setTimeout('" + UniqueID + "_iCallID2 = service.ChatWebService.call(\"GetMsgs\"," + UniqueID + "_NickName);',3000);\r\n";
            doc += " }\r\n";
            doc += "else if((event.result.error)&&(" + UniqueID + "_iCallID3==event.result.id))\r\n";
            doc += " {\r\n";
            doc += "var xfaultcode = event.result.errorDetail.code; \r\n";
            doc += "var xfaultstring = event.result.errorDetail.string; \r\n";
            doc += "var xfaultsoap = event.result.errorDetail.raw;\r\n";
            doc += "// Add code to output error information here\r\n";
            doc += "alert(\"xfaultstring\");\r\n";
            doc += " }\r\n";
            doc += " else if((!event.result.error)&&(" + UniqueID + "_iCallID3==event.result.id))\r\n";
            doc += " {\r\n";
            doc += "var xmlResult = event.result.raw.xml; \r\n";
            doc += " if (xmlResult != \"\" && xmlResult != null)\r\n";
            doc += " {\r\n";
            doc += "\r\n";
            doc += "" + UniqueID + "_MsgXML.loadXML(xmlResult);\r\n";
            doc += " " + UniqueID + "_ChatList.innerText = " + UniqueID + "_MsgXML.selectSingleNode(\"//UserList\").text; \r\n";
            doc += " " + UniqueID + "_ChatMsgs.innerHTML += " + UniqueID + "_MsgXML.selectSingleNode(\"//Messages\").text;\r\n";
            doc += " " + UniqueID + "_ChatList.scrollTop =  2000; \r\n";
            doc += " " + UniqueID + "_bnSendMsg.disabled = false;\r\n";
            doc += " " + UniqueID + "_ChatMsgs.scrollTop =  2000; \r\n";
            doc += " " + UniqueID + "_UserInput.value = \"\";\r\n";
            doc += " " + UniqueID + "_UserInput.disabled = false;\r\n";
            doc += " " + UniqueID + "_UserInput.focus();\r\n";
            doc += " }\r\n";
            doc += " window.setTimeout('" + UniqueID + "_iCallID2 = service.ChatWebService.call(\"GetMsgs\"," + UniqueID + "_NickName);',3000);\r\n";
            doc += " }\r\n";
            doc += "} \r\n";
            doc += "function SendMsg()\r\n";
            doc += "{ \r\n";
            doc += "if (" + UniqueID + "_UserInput.value == \"\") return false;\r\n";
            doc += "" + UniqueID + "_bnSendMsg.disabled = 'true';\r\n";
            doc += "" + UniqueID + "_UserInput.disabled = 'true';\r\n";
            doc += "" + UniqueID + "_iCallID3 = service.ChatWebService.call(\"XchangeMsgs\"," + UniqueID + "_NickName," + UniqueID + "_UserInput.value);\r\n";
            doc += "} \r\n";
            doc += "</script> \r\n";

        }
    }
}
这里有几个问题，
1。我们继承的是Table，记住table等server端控件本身就继承了control类，我们做控件不一定要直接继承control
2。[“。。。”]是metadata他是用来做可视化控件的具体含义看msdn
3。我们这里采用client script的方法，可以看出实现方式与asp中大体一致，即Server端“写”script
4。Dhtml Behavior的应用，Behavior是MS扩展的css元素，大家可去msdn查