使用AJAX的Timer控制項來達到一個簡易聊天室的功能
這範例是利用AJAX-Timer的Tick事件來達到每秒更新聊天室畫面
C#範例
Talk.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Talk.aspx.cs" Inherits="Talk" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>簡易AJAX聊天室</title>
07 </head>
08 <body>
09 <form id="form1" runat="server">
10 <div>
11 <asp:ScriptManager ID="ScriptManager1" runat="server">
12 </asp:ScriptManager>
13 <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
14 </asp:Timer><asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="清除聊天內容" />
15 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
16 <contenttemplate>
17 <asp:TextBox ID="TextBox1" runat="server" Height="500px" TextMode="MultiLine" Width="800px" ReadOnly="True"></asp:TextBox>
18 </contenttemplate>
19 <triggers>
20 <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
21 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
22 <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
23 </triggers>
24 </asp:UpdatePanel>
25 <table border="0" cellpadding="0" cellspacing="0" style="width: 800px">
26 <tr>
27 <td style="width: 650px">
28 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
29 <triggers>
30 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
31 </triggers>
32 <contenttemplate>
33 <table border="0" cellpadding="0" cellspacing="0" style="width: 670px">
34 <tr>
35 <td>
36 名字：<asp:TextBox ID="TextBox3" runat="server" Width="50px"></asp:TextBox>內容：<asp:TextBox ID="TextBox2" runat="server" Width="500px"></asp:TextBox></td>
37 </tr>
38 </table>
39 </contenttemplate>
40 </asp:UpdatePanel>
41 </td>
42 <td>
43 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="送出" /></td>
44 </tr>
45 </table>
46 </div>
47 </form>
48 </body>
49 </html>
50
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>簡易AJAX聊天室</title>
07 </head>
08 <body>
09 <form id="form1" runat="server">
10 <div>
11 <asp:ScriptManager ID="ScriptManager1" runat="server">
12 </asp:ScriptManager>
13 <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
14 </asp:Timer><asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="清除聊天內容" />
15 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
16 <contenttemplate>
17 <asp:TextBox ID="TextBox1" runat="server" Height="500px" TextMode="MultiLine" Width="800px" ReadOnly="True"></asp:TextBox>
18 </contenttemplate>
19 <triggers>
20 <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
21 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
22 <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
23 </triggers>
24 </asp:UpdatePanel>
25 <table border="0" cellpadding="0" cellspacing="0" style="width: 800px">
26 <tr>
27 <td style="width: 650px">
28 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
29 <triggers>
30 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
31 </triggers>
32 <contenttemplate>
33 <table border="0" cellpadding="0" cellspacing="0" style="width: 670px">
34 <tr>
35 <td>
36 名字：<asp:TextBox ID="TextBox3" runat="server" Width="50px"></asp:TextBox>內容：<asp:TextBox ID="TextBox2" runat="server" Width="500px"></asp:TextBox></td>
37 </tr>
38 </table>
39 </contenttemplate>
40 </asp:UpdatePanel>
41 </td>
42 <td>
43 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="送出" /></td>
44 </tr>
45 </table>
46 </div>
47 </form>
48 </body>
49 </html>
50
Talk.aspx.cs
01 
using System;
02
using System.Data;
03using System.Configuration;
04using System.Collections;
05using System.Web;
06using System.Web.Security;
07using System.Web.UI;
08using System.Web.UI.WebControls;
09using System.Web.UI.WebControls.WebParts;
10
using System.Web.UI.HtmlControls;
11
12public partial class Talk : System.Web.UI.Page
13{
14
protected void Page_Load(object sender, EventArgs e)
15
{
16 if (!IsPostBack)
17 {
18 if (Application["content"] == null)
19 {
20 Application["content"] = "";
21
}
22 }
23 }
24 protected void Timer1_Tick(object sender, EventArgs e)
25 {
26 //Timer,每秒更新一次聊天內容
27 this.TextBox1.Text = Application["content"].ToString();
28 }
29 protected void Button1_Click(object sender, EventArgs e)
30 {
31 //判斷輸入內容是否為空白，是就不做事
32 if (this.TextBox2.Text != "")
33 {
34 //判斷名字是否為空白，是就預設為Guest
35 if (this.TextBox3.Text == "")
36 {
37 Application["content"] = Application["content"] + "\n" + "Guest" + ":" + this.TextBox2.Text;
38 }
39 else
40 {
41 Application["content"] = Application["content"] + "\n" + this.TextBox3.Text + ":" + this.TextBox2.Text;
42 }
43
44 //清除內容
45 this.TextBox2.Text = "";
46 }
47 }
48 protected void Button2_Click(object sender, EventArgs e)
49 {
50 //清除所有聊天內容
51 Application["content"] = "";
52 }
53}
using System;
using 02
using System.Data;03
using System.Configuration;04
using System.Collections;05
using System.Web;06
using System.Web.Security;07
using System.Web.UI;08
using System.Web.UI.WebControls;09
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
12
public partial class Talk : System.Web.UI.Page13
{14
protected void Page_Load(object sender, EventArgs e)15
{
16
if (!IsPostBack)17
{18
if (Application["content"] == null)19
{20
Application["content"] = "";21
}22
}23
}24
protected void Timer1_Tick(object sender, EventArgs e)25
{26
//Timer,每秒更新一次聊天內容27
this.TextBox1.Text = Application["content"].ToString();28
}29
protected void Button1_Click(object sender, EventArgs e)30
{31
//判斷輸入內容是否為空白，是就不做事32
if (this.TextBox2.Text != "")33
{34
//判斷名字是否為空白，是就預設為Guest35
if (this.TextBox3.Text == "")36
{37
Application["content"] = Application["content"] + "\n" + "Guest" + ":" + this.TextBox2.Text;38
}39
else40
{41
Application["content"] = Application["content"] + "\n" + this.TextBox3.Text + ":" + this.TextBox2.Text;42
}43
44 //清除內容
45
this.TextBox2.Text = "";46
}47
}48
protected void Button2_Click(object sender, EventArgs e)49
{50
//清除所有聊天內容51
Application["content"] = "";52
}53
}
參考檔案：
http://www.blueshop.com.tw/download/show.asp?pgmcde=PGM20070708003736NAE&extcde=PGMLST