使用jQuery调用XML实现无刷新即时聊天


Posted in Javascript onAugust 07, 2016

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调用XML实现无刷新即时聊天</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>';
}
});
//显示处理后的数据
$("#chatList").html(strHTML);
}
});
}
})
</script>
</head>
<body>
<div class="iframe">
<div class="title">德仔即时聊天与
(<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="发送" 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调用XML实现无刷新即时聊天

以上所述是小编给大家介绍的使用jQuery调用XML实现无刷新即时聊天,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言哦!

Javascript 相关文章推荐
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
HTML的select控件美化
Mar 27 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
vue+element实现表单校验功能
May 20 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
js中!和!!的区别与用法
May 09 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 #Javascript
深入理解Angular2 模板语法
Aug 07 #Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 #Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 #Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 #Javascript
Google 地图API Map()构造器详解
Aug 06 #Javascript
Google 地图API资料整理及详细介绍
Aug 06 #Javascript
You might like
php include类文件超时问题处理
2015/02/06 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
js 目录列举函数
2008/11/06 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
ant design实现圈选功能
2019/12/17 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
node.js通过url读取文件
2020/10/16 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python 12306抢火车票脚本
2018/02/07 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Python上下文管理器全实例详解
2019/11/12 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
餐厅销售主管职责范本
2014/02/19 职场文书
高中军训感言400字
2014/02/24 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
销售顾问工作计划书
2014/08/15 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技