使用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实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jquery 插件学习(五)
Aug 06 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
浅析Ajax语法
Dec 05 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
AngularJS实现路由实例
Feb 12 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
深入PHP curl参数的详解
2013/06/17 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php查询操作实现投票功能
2016/05/09 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
毕业生自我鉴定
2013/11/05 职场文书
三八节主持词
2014/03/17 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技