使用jQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用JQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天</title> <script src="Jscript/jquery-1.8.2.min.js" type="text/javascript"></script> <style type="text/css" > body{font-size:13px} h3{ padding:0px; margin:8px 0px} .iframe{ width:260px; border: solid 1px #666} .iframe .title{padding:5px; background-color:#eee} .iframe .title .spnId{font-weight:bold; font-family:Arial} .iframe .content{ padding:8px; font-size:12px;} .iframe .content .lst{ height :180px; border: solid 1px #ccc; padding:3px; line-height:1.5em; overflow-y:scroll;} .iframe .content .nav{ color:#006EE} .iframe .content .nav .time, .iframe .content .msg{ margin-left:5px} .iframe .content .txt{ height:50px; width:238px; border:solid 1px #ccc} .btn {border:#666 1px solid;padding:2px;width:80px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} </style> <script type="text/javascript"> $(function () { var $FormId = 1243242; var $SendId = 1234560; $("#spnSendId").html($SendId); setTimeout(showList($FormId, $SendId), 3000); $("#btnSend").click(function () { $.ajax({ url: 'Chat.ashx?s=' + $SendId + '&f=' + $FormId + '&c=' + txtA.value, success: function (data) { if (data == 1) { showList($FormId, $SendId); txtA.value = ""; } } }); }); function showList(f, s) { $.ajax({ url: 'Chat.xml', dataType: 'xml', success: function (data) { var $strUser = $(data).find("message"); var strHTML = ""; $strUser.each(function () { if (($(this).attr("fId") == f && $(this).attr("sId") == s) || ($(this).attr("fId") == s && $(this).attr("sId") == f)) { var strNav = $(this).attr("fId"); if (strNav == f) { strNav = "我說"; } strHTML += '<div class=\"nav\"><span>(' + strNav + ')<\/span><span class =\"time\">' + $(this).children("datetime").text() + '<\/span><\/div>'; strHTML += '<div class=\"msg\">' + $(this).children("content").text() + '<\/div>'; } }); //顯示處理后的數(shù)據(jù) $("#chatList").html(strHTML); } }); } }) </script> </head> <body> <div class="iframe"> <div class="title">德仔即時(shí)聊天與 (<span id="spnSendId" class="spnId"></span> )聊天中 </div> <div class ="content"> <div id="chatList" class="lst"></div> </div> <div class="content"> <textarea id="txtA" class="txt"></textarea> <input id="btnSend" type="button" value="發(fā)送" class="btn" /> </div> </div> </body> </html>
Chat.ashx:
<%@ WebHandler Language="C#" Class="Chat" %> using System; using System.Web; using System.Xml; public class Chat : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string strContent = context.Request.QueryString["c"].ToString(); string strFromId = context.Request.QueryString["f"].ToString(); string strSendId = context.Request.QueryString["s"].ToString(); int intSuccess = 0; string strDate = DateTime.Now.ToString("HH:mm:ss"); XmlDocument xmlDoc = new XmlDocument(); try { xmlDoc.Load(context.Server.MapPath("Chat.xml")); XmlNode root = xmlDoc.SelectSingleNode("chat"); XmlElement xmlE = xmlDoc.CreateElement("message"); xmlE.SetAttribute("fId", strFromId); xmlE.SetAttribute("sId", strSendId); XmlElement xmlEd = xmlDoc.CreateElement("datetime"); xmlEd.InnerText = strDate; xmlE.AppendChild(xmlEd); XmlElement xmlEc = xmlDoc.CreateElement("content"); xmlEc.InnerText = strContent; xmlE.AppendChild(xmlEc); root.AppendChild(xmlE); xmlDoc.Save(context.Server.MapPath("Chat.xml")); intSuccess = 1; } catch(Exception ex) { throw ex; } context.Response.Write(intSuccess); } public bool IsReusable { get { return false; } } }
以上所述是小編給大家介紹的使用jQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言哦!
- jquery添加div實(shí)現(xiàn)消息聊天框
- jQuery實(shí)現(xiàn)聊天對(duì)話框
- jquery實(shí)現(xiàn)聊天機(jī)器人
- JS(jQuery)實(shí)現(xiàn)聊天接收到消息語言自動(dòng)提醒功能詳解【提示“您有新的消息請(qǐng)注意查收”】
- jquery仿微信聊天界面
- 基于jQuery實(shí)現(xiàn)簡單人工智能聊天室
- javascript和jQuery實(shí)現(xiàn)網(wǎng)頁實(shí)時(shí)聊天的ajax長輪詢
- PHP+jquery+ajax實(shí)現(xiàn)即時(shí)聊天功能實(shí)例
- JavaScript/jQuery、HTML、CSS 構(gòu)建 Web IM 遠(yuǎn)程及時(shí)聊天通信程序
- jQuery實(shí)現(xiàn)簡易聊天框
相關(guān)文章
jquery利用json實(shí)現(xiàn)頁面之間傳值的實(shí)例解析
本文主要介紹了jquery利用json實(shí)現(xiàn)頁面之間傳值的方法,具有很好的參考價(jià)值,需要的朋友可以看下2016-12-12jQuery EasyUI Pagination實(shí)現(xiàn)分頁的常用方法
這篇文章主要為大家詳細(xì)介紹了jQuery EasyUI Pagination實(shí)現(xiàn)分頁的常用方法,感興趣的朋友可以參考一下2016-05-05【經(jīng)典源碼收藏】基于jQuery的項(xiàng)目常見函數(shù)封裝集合
這篇文章主要介紹了基于jQuery的項(xiàng)目常見函數(shù)封裝集合,總結(jié)分析 jQuery常見功能的函數(shù)封裝,便于在項(xiàng)目開發(fā)中直接使用,需要的朋友可以參考下2016-06-06使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁面新數(shù)據(jù)
這篇文章主要介紹了使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁面新數(shù)據(jù)的方法,即控制滾動(dòng)條下拉時(shí)的加載事件,需要的朋友可以參考下2016-03-03jQuery簡單實(shí)現(xiàn)的HTML頁面文本框模糊匹配查詢功能完整示例
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)的HTML頁面文本框模糊匹配查詢功能,涉及jQuery事件響應(yīng)模擬列表框的下拉數(shù)據(jù)展示與隱藏,以及元素遍歷、匹配等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無縫輪播效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無縫輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)圖片定時(shí)輪播切換相關(guān)操作技巧,需要的朋友可以參考下2019-01-01