使用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之一
Apr 27 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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 用sock技术发送邮件的函数
2007/07/21 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python 序列的方法总结
2016/10/18 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
DNA基因检测和分析:23andMe
2019/05/01 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
品牌宣传方案
2014/03/21 职场文书
绿色环保标语
2014/06/12 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
党员评议自我评价
2015/03/03 职场文书
总经理岗位职责范本
2015/04/01 职场文书