初级ajax。。聊天室 ...
时间:2010-08-05 来源:hhh871030
传说中超级土鳖的方法,系本人以前所做,在这里发表一下,当做收集。。。。希望各位达人给点意见。。谢谢。。
首先要明确思路。。页面A。。是发送显示的页面。。。页面B。。用来将数据序列化。。输出为xml。。页面C。。。用来将聊天的信息保存起来。。。然后再用js来调用。。。(偶特笨,想了好久都米有想到。。还是主管告诉我的。。)
ChartContent.cs 这个类用来保存要显示的信息。。。
[Serializable] public class ChartContent { public string ID; public string SendTime; public string Content; }
聊天界面:Chart.aspx
发送和显示采用textarea。。。控件
显示: <textarea id="textContent" style="width: 486px; readonly="readonly"></textarea>
发送:<textarea id="txtChart" style="width: 98%; </textarea>
按钮:<input id="Button1" type="button" value="发送" onclick="Send()" /
将数据录入的界面:ChartSend.aspx
这个页面要注意,在html里面。。只留一行。。。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChartContent.aspx.cs" Inherits="Business_Chart_ChartContent" %>
(至于为什么偶就不知道了。。。希望知道的人告诉偶。。)
代码:
string content = Request.QueryString["content"].ToString(); using (DbAccess db = new DbAccess()) { T_Chart entity = new T_Chart(); entity.SendUserID = ChartUser.ID; entity.ChatUserID = 1; entity.AdminID = 2; entity.AddTime = DateTime.Now; entity.Chart = content; entity.Insert(); }
应主管要求。。。所有聊天信息都要录入数据库。。所以此处代码是将数据录入数据库。。这边的T_Chart。。是对应数据库的一个类。。这里就不写了。。反正只要放进数据库就行了
输出为xml的页面。。。ChartContent.aspx
代码:
protected void Page_Load(object sender, EventArgs e) { ChartContent entity = new ChartContent(); -------此处说偶自己定义的类。在上面有说明 using (DbAccess db = new DbAccess()) { string sql = "Select top 1 * from T_Chart order by AddTime desc"; DataSet ds = db.EcExecuteDataSet(sql); if (ds.Tables[0].Rows.Count != 0) { entity.ID = DbHelper.GetDataRowValue(ds.Tables[0].Rows[0], "SendUserID"); entity.SendTime = ds.Tables[0].Rows[0]["AddTime"].ToString(); entity.Content = DbHelper.GetDataRowValue(ds.Tables[0].Rows[0], "Chart"); send(entity); } } } public void send(ChartContent content) { XmlSerializer serializer = new XmlSerializer(typeof(ChartContent)); MemoryStream ms = new MemoryStream(); serializer.Serialize(ms, content); Response.Clear(); Response.Buffer = true; Response.ContentType = "text/xml"; Response.Charset = "UTF-8"; Response.ContentEncoding = System.Text.Encoding.UTF8; byte[] buffer = ms.ToArray(); string xml = System.Text.Encoding.UTF8.GetString(buffer, 0, buffer.Length); Response.Write(xml); }
好。。。所有页面做好之后就是js代码了。。。
function Send() { var txtChart=document.getElementById("txtChart"); if(txtChart.value!="") { var xmlHttp; if(window.XMLHttpRequest){ // For Mozilla, Safari, ... var xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject){ // For Internet Explorer var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } var url="/WebSite/Business/Chart/ChartSend.aspx?content="+escape(txtChart.value); ----- escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串 xmlHttp.open('POST',url,true); txtChart.value=" "; xmlHttp .onreadystatechange= function() { if(xmlHttp.readyState ==4) Get() } xmlHttp.send(null); } else { alert("发送内容为空"); } } function Get() { var xmlHttp; if(window.XMLHttpRequest){ // For Mozilla, Safari, ... var xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject){ // For Internet Explorer var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } var url='/WebSite/Business/Chart/ChartContent.aspx'; xmlHttp.open('POST',url,true); xmlHttp.setRequestHeader("Content-Type", "text/xml"); xmlHttp.onreadystatechange= function() { if(xmlHttp.readyState ==4) GetChartContent(); } xmlHttp.send(null); } function GetChartContent() { var theUrl='/WebSite/Business/Chart/ChartContent.aspx'; var myAjax = new Ajax.Request(theUrl, { method: 'get', parameters:"", onSuccess : function (transport) { var mychart=new MyChart(); var theXmlDocument = new ActiveXObject("Microsoft.XMLDOM"); theXmlDocument.loadXML(transport.responseText); mychart.ID=theXmlDocument.getElementsByTagName('ID')[0].text; mychart.SendTime=theXmlDocument.getElementsByTagName('SendTime')[0].text; mychart.Content= theXmlDocument.getElementsByTagName('Content')[0].text; mychart.Show(); } } ); } function MyChart() { this.ID; this.SendTime; this.Content; this.Show=function() { var Say= document.getElementById("textContent") Say.value=Say.value+"\n"+this.ID+" "+this.SendTime+"\n"+" "+this.Content+"\n"; }; }
现在看起来好像很简单。。真不知道偶为什么做了那么长时间。。看来偶的脑子不太好使。。。。。