使用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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript 一些用法小结
2009/09/11 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
javascript实现微信分享
2014/12/23 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
python微信公众号开发简单流程
2018/03/23 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python web框架中实现原生分页
2019/09/08 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
国贸专业个人求职信分享
2013/12/04 职场文书
指导教师评语
2014/04/26 职场文书
减负增效提质方案
2014/05/23 职场文书
关于运动会的广播稿
2014/09/22 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
幼儿园辞职信范文
2015/02/27 职场文书