Ajax简单聊天B/S
需要一个ajaxserver页面,一个聊天记录txt文件
js部分
Talk = function () { } Talk.prototype = { AjaxPagePath: "AjaxHandler.ashx", ShowDivID: "divTalkList", CrrentCount: 0, UserName:null, AppendTalk: function (divid, meg) { document.getElementById(divid).innerHTML += meg; }, GetTalk: function (talk) { if (talk == undefined) { talk = this; } $.ajax({ type: "POST", url: talk.AjaxPagePath, data: { "op": "GetTalk", "Count": talk.CrrentCount, "Date": new Date() }, success: function (m) { var ms = m.split('@'); talk.AppendTalk(talk.ShowDivID, ms[1]); talk.CrrentCount = ms[0]; } }); }, RefreshTalk: function () { var t = this; $.ajax({ type: "POST", url: t.AjaxPagePath, data: { "op": "RefreshTalk", "Count": t.CrrentCount, "Date": new Date() }, success: function (m) { if (m == "1") { t.GetTalk(t); } } }); setTimeout(function () { t.RefreshTalk(); }, 1000); }, SubmitTalk: function () { var meg = $("#txtInput").val(); var t = this; $.ajax({ type: "POST", url: t.AjaxPagePath, data: { "op": "Talk", "Talk": meg, "UserName": t.UserName, "Date": new Date() }, success: function () { t.GetTalk(t); } }); } }
aspx部分
调用Js
<script src="Script/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Script/talk.js" type="text/javascript"></script> <script type="text/javascript"> var cTalk = new Talk(); cTalk.CrrentCount = 0; cTalk.RefreshTalk();//定时查看是否有新纪录 cTalk.UserName = "client"; </script>
<div id="divTalkList" style="80%; height:40%; border:1px solid #000000; overflow:scroll"></div> <div><input type="text" id="txtInput" /><input type="button" value="Submit" onclick="cTalk.SubmitTalk();" /> <input id="btnRefresh" type="button" value="刷新" onclick="cTalk.RefreshTalk()" /><!--手动刷新测试用--></div>
ajaxserver 部分
public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string talkPath = @"/TextFile.txt"; string op = context.Request["op"]; String rootPath =context.Server.MapPath("~"); string path1 =rootPath+ talkPath; if (op == "Talk") { string talk =context.Request["UserName"]+":"+ context.Request["Talk"]+System.Environment.NewLine; count++; File.AppendAllText(path1, talk, System.Text.Encoding.UTF8); //context.Response.Write(count); } if (op == "RefreshTalk") { string[] lastMegs = File.ReadAllLines(path1, System.Text.Encoding.UTF8); count = lastMegs.Length; if (int.Parse(context.Request["Count"]) < count) { context.Response.Write("1"); } else { context.Response.Write("0"); } } if (op=="GetTalk") { string takl = GetTalk(path1, int.Parse(context.Request["Count"])); context.Response.Write(count+"@"+takl); } } string GetTalk(string path1, int currentCount) { string[] lastMegs = File.ReadAllLines(path1, System.Text.Encoding.UTF8); count = lastMegs.Length; string lastMeg = string.Empty; if (currentCount < count) { for (; currentCount < count; ) { lastMeg += lastMegs[currentCount] + "<br/>"; currentCount++; } return lastMeg; } return null; } public bool IsReusable { get { return false; } } }
标签: ajax 聊天