AJAX聊天室小DEMO(讨厌JS,IE下有问题已解决)

本文主要是介绍AJAX聊天室小DEMO(讨厌JS,IE下有问题已解决)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

太闲啦,太闲啦,连续一月没上课了.不知他们想我没.昨QQ上一JJ给我看她写的聊天室,刷的眼难受,让我帮她写个不刷新的给她看.就是闲嘛,一切都是Teach Myself,从来没人指导过我.想帮帮她.偶尔有个人帮我我也很感动.顺便自个学点东西吧.一直没用在CNBLOGS上东西,上次发错了,发到首页上去了,写的一个数据结构的代码片断,一大哥骂我不写注释,原来首页就是那个意思,现在我没事就往首页上发,旨在寻人骂我.我是菜鸟我怕谁,PS:在此之前我只懂点AJAX原理,对框架一无所知.以下是DEMO.发上来主要是给大家批评的还有点问题想请教.
我用XML做一个队列类似的东西存储10条信息.先入先出.再用ajax取出信息反应到聊天窗口,聊天窗口1秒刷一次
default.aspx页表单部分

下面是ajax_chat.js代码

var sendReq = createAjaxObj();

var receiveReq = createAjaxObj();

var mTimer;

var lastMessage = 0 ; // 最后一条Message ID值

var n_messages = 0 ; // XML中的MESSAGE节点数,我设的是10条

var diff = 0 ;

var chat_div = document.getElementById('div_chat');

function startChat()

function createAjaxObj()

{

//创建兼容的的xmlhttp对象

var xmlhttp;

try

{

xmlhttp=new ActiveObject('Msxml2.XMLHTTP');

}

catch(e)

{

try

{

xmlhttp=new ActiveObject('Microsoft.XMLHTTP');

}

catch(e)

{

try

{

xmlhttp=new XMLHttpRequest();

}

catch(e){}

}

return xmlhttp;

}

// 获取XML文本

function getChatText()

{

//判断上次请求的状态是否完成或是还未发送请求

if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {

//从content.xml获取聊天内容

receiveReq.open("get","content.xml");

//当请求状态改变时调用handleReceiveChat方法

receiveReq.onreadystatechange = handleReceiveChat;

receiveReq.send(null);//因为是get方法所以发送请求null

}

function handleReceiveChat()

{

if (receiveReq.readyState == 4)

{//此时请求已经完成

//获得显示消息的图曾层元素

var chat_div = document.getElementById('div_chat');

//获得返回后的XML文件

var xmldoc = receiveReq.responseXML;

//得到所有的新的消息记录

var message_nodes = xmldoc.getElementsByTagName("message");

n_messages = message_nodes.length;

var id=message_nodes[n_messages-1].getAttribute("id");

lastMessage=getCookie("lastMessage");

if(lastMessage==null)

{

addCookie("lastMessage","0",10);

lastMessage=getCookie("lastMessage");

}

if(id-lastMessage>=n_messages)

{

var i=0;

diff=n_messages;

while((message_nodes[n_messages-1].getAttribute("id")>=lastMessage)&&i<=diff-1)

{

var user_node = message_nodes[i].getElementsByTagName("user");

var text_node = message_nodes[i].getElementsByTagName("text");

var time_node = message_nodes[i].getElementsByTagName("time");

chat_div.innerHTML += '('+user_node[0].firstChild.nodeValue + ') said at  ';

chat_div.innerHTML += '' + time_node[0].firstChild.nodeValue + ' ';

chat_div.innerHTML += ''+text_node[0].firstChild.nodeValue + ' ';

chat_div.scrollTop = chat_div.scrollHeight;

//每循环一条消息，记录到id到,lastMessage的cookie中

lastMessage = (message_nodes[i].getAttribute("id"));

deleteCookie("lastMessage");

addCookie("lastMessage",lastMessage,5);

i++;

// alert("this lastMessage:"+lastMessage);

}

else

{

while(message_nodes[n_messages-1].getAttribute("id")>lastMessage)

{

var dif=message_nodes[n_messages-1].getAttribute("id")-lastMessage;

var temp=n_messages-dif;

if(dif!=0)

{

var user_node = message_nodes[temp].getElementsByTagName("user");

var text_node = message_nodes[temp].getElementsByTagName("text");

var time_node = message_nodes[temp].getElementsByTagName("time");

chat_div.innerHTML += '('+user_node[0].firstChild.nodeValue + ') said at  ';

chat_div.innerHTML += '' + time_node[0].firstChild.nodeValue + ' ';

chat_div.innerHTML += ''+text_node[0].firstChild.nodeValue + ' ';

chat_div.scrollTop = chat_div.scrollHeight;

//每循环一条消息，记录到全局变量lastMessage的Cookie中

deleteCookie("lastMessage");

lastMessage++;

addCookie("lastMessage",lastMessage,1);

temp++;

}

//alert("this lastMessage:"+lastMessage+"getAttribute:"+message_nodes[n_messages-1].getAttribute("id"));

}

// 发送聊天内容

function sendChatText()

{

if(document.getElementById('userName').value=='annoymous')

{

alert("Input your name!");

return;

}

//如果输入的消息为空，提示用户输入

if(document.getElementById('txt_message').value == '')

{

alert("You have not entered a message");

return;

}

//判断上次发送消息请求的状态是否完成或是还未发送请求

if (sendReq.readyState == 4 || sendReq.readyState == 0)

{

//保存消息的服务器地址

var submitURL = "sendMessage.aspx?userName="+document.getElementById('userName').value+"&msg="+document.getElementById('txt_message').value;

sendReq.open("POST", submitURL , true);//建立请求连接

sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

sendReq.onreadystatechange = handleSendChat; //当请求状态改变时调用handleSendChat方法

sendReq.send(null);//发送请求

document.getElementById('txt_message').value = '';//设置提交消息文本框为空

}

function handleSendChat()

{

//发送后强制执行一次获取聊天内容一次

//lastMessage =getCookie("lastMessage");

getChatText();

}

// 三个JS常用的函数网上抄的

function addCookie(name,value,expireMin)

{

var cookieString=name+"="+escape(value);

//判断是否设置过期时间

if(expireMin>0){

var date=new Date();

date.setTime(date.getTime+expireMin*60*1000);

cookieString=cookieString+"; expire="+date.toGMTString();

}

document.cookie=cookieString;

}

function getCookie(name)

{

//获取指定名称的Cookie值

var strCookie=document.cookie;

var arrCookie=strCookie.split(";");

for(var i=0;i<arrCookie.length;i++)

{

var arr=arrCookie[i].split("=");

if(arr[0]==name)

return arr[1];

}

return null;

}

function deleteCookie(name)

{

var expires=new Date();

expires.setTime(expires.getTime()-1);

addCookie(name,"Delete Cookie",expires);

}

点击发送 sendMessage.aspx

public partial class sendMessage : System.Web.UI.Page

{

XmlDocument doc;

string filePath; //聊天内容存储的XML文件

protected void Page_Load(object sender, EventArgs e)

{

filePath = Server.MapPath("content.xml");

doc = new XmlDocument();

doc.Load(filePath);

if (!IsPostBack)

{

if (Application["lock"].ToString() == "unlock")

{

Application["lock"] = "lock"; //锁定防止多用户操作

int num = GetLastMsgId();

num++;

string msgid = num.ToString();

if (Request.QueryString["userName"] != string.Empty && Request.QueryString["msg"] != string.Empty)

{

if (GetMsgNum() < 10)

{

//如果消息少于10条,添加结点

AddInLast(msgid, Request.QueryString["userName"].Trim(), Request.QueryString["msg"].Trim());

}

else

{

//如果消息少于10条,弹出第一条,再向末结点后添加结点

DelFirst();

AddInLast(msgid, Request.QueryString["userName"].Trim(), Request.QueryString["msg"].Trim());

}

Application["lock"] = "unlock"; //解锁

}

doc = null;

}

public void DelFirst()

{

//如果超过10条弹出第一条

XmlNode node = doc.DocumentElement;

node.RemoveChild(node.FirstChild);

}

public int GetMsgNum()

{

//Message数目

XmlNode node = doc.DocumentElement;

return node.ChildNodes.Count;

}

public int GetLastMsgId()

{

//最后一条ID

XmlNode node = doc.DocumentElement;

XmlElement last = (XmlElement)node.LastChild;

return Convert.ToInt32(last.GetAttribute("id"));

}

public void AddInLast(string id,string strUser,string strContent)

{

//加入新建Messag结点

XmlNode node = doc.DocumentElement;

XmlElement msgNode = doc.CreateElement("message");

msgNode.SetAttribute("id",id);

node.AppendChild(msgNode);

XmlElement eleUser = doc.CreateElement("user");

XmlText textUser = doc.CreateTextNode(strUser);

eleUser.AppendChild(textUser);

msgNode.AppendChild(eleUser);

XmlElement eleContent = doc.CreateElement("text");

XmlText textText = doc.CreateTextNode(strContent);

eleContent.AppendChild(textText);

msgNode.AppendChild(eleContent);

XmlElement eleTime = doc.CreateElement("time");

XmlText textTime = doc.CreateTextNode(DateTime.Now.ToString());

eleTime.AppendChild(textTime);

msgNode.AppendChild(eleTime);

doc.Save(filePath);

}

content.xml结构:

<? xml version="1.0" encoding="utf-8" ?>

< root >

< message id ="125" >

< user > test </ user >

< text > test </ text >

< time > 2006-12-23 16:06:07 </ time >

</ message >

</ root >

解决方案:/Files/fancystyle/chat.rar

http://www.cnblogs.com/fancystyle/archive/2006/12/23/601669.html

这篇关于AJAX聊天室小DEMO(讨厌JS,IE下有问题已解决)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

AJAX聊天室小DEMO(讨厌JS,IE下有问题已解决)

相关文章

使用Node.js制作图片上传服务的详细教程

MySQL 中查询 VARCHAR 类型 JSON 数据的问题记录

Pyserial设置缓冲区大小失败的问题解决

PyInstaller打包selenium-wire过程中常见问题和解决指南

resultMap如何处理复杂映射问题

解决SpringBoot启动报错:Failed to load property source from location 'classpath:/application.yml'

java实现延迟/超时/定时问题

idea maven编译报错Java heap space的解决方法

如何解决mmcv无法安装或安装之后报错问题

浅谈配置MMCV环境,解决报错,版本不匹配问题