无刷新聊天室的技术实现

先简单说明下

服务端

用程序生成需要的 XML 文件

客户端

利用 XMLHTTP 或者 DSO(注意状态)  定时刷新需要的数据

相对来说 DSO 可以映射成 recordset 操作比较简单

以下是我简单写着玩的东西 不是完整部分 而且十分简陋

只是代码片段 但作为技术参考已经足够

需要 MSXML 4.0

服务端 我写了两个构造函数 分别是 聊天内容 聊天用户

<script language="JScript" runat="server">
function SLIGHTBOYChat()
{

 this.ID;
 this.XMLDOMElement = Server.CreateObject("Msxml2.FreeThreadedDOMDocument.4.0")

 this.Add = function(Name, Content, Append)
 {
  var root = this.XMLDOMElement.documentElement;
  var newItem = this.XMLDOMElement.createElement("Item");
  var newItemName = this.XMLDOMElement.createElement("Name");
  var newItemNameValue = this.XMLDOMElement.createCDATASection(Name);
  newItemName.appendChild(newItemNameValue)
  var newItemContent = this.XMLDOMElement.createElement("Content");
  var newItemContentValue = this.XMLDOMElement.createCDATASection(Content);
  newItemContent.appendChild(newItemContentValue)
  var newItemAppend = this.XMLDOMElement.createElement("Append");
  newItemAppend.text = Append;
  newItem.appendChild(newItemName);
  newItem.appendChild(newItemContent);
  newItem.appendChild(newItemAppend);
  if ( root.childNodes.length > 10 )
  {
   root.removeChild(root.firstChild)
  }
  root.appendChild(newItem)
 }
 this.Save = function()
 {
  Application("ChatContent") = this.XMLDOMElement.xml;
 }
 this.GUID = function(PushGUID)
 {
  if ( PushGUID.Count > 0 )
  {
   this.ID = PushGUID;
  }
  else
  {
   this.ID = "";
  }
 }
 this.Xml = function()
 {
  if ( this.ID != "" )
  {
   var XMLDOMElementString = "<?xml version=/"1.0/" encoding=/"gb2312/"?><Chat>";
   var items = Chat.XMLDOMElement.selectNodes("//Item[Append > "+ this.ID +"]")
   for (var item = items.nextNode(); item; item = items.nextNode())
   {
    XMLDOMElementString += item.xml;
   }
   XMLDOMElementString += "</Chat>";
   if ( items.length > 0 )
   {
    return XMLDOMElementString;
   }
   else
   {
    return;
   }
  }
  else
  {
   return this.XMLDOMElement.xml.replace("<?xml version=/"1.0/"?>","<?xml version=/"1.0/" encoding=/"gb2312/"?>");
  }
  
 }
 this.Load = function()
 {
  if ( Application("ChatContent") == "" | typeof(Application("ChatContent")) == "undefined" )
  {
   Application("ChatContent") = "<?xml version=/"1.0/" encoding=/"GB2312/"?><Chat><Item><Name>slightboy</Name><Content>欢迎 ^^</Content><Append>"+ new Date().getTime() +"</Append></Item></Chat>";
  }
  this.XMLDOMElement.loadXML(Application("ChatContent"));

 }
 this.Empty = function()
 {
  Application("ChatContent") = "<?xml version=/"1.0/" encoding=/"GB2312/"?><Chat><Item><Name>slightboy</Name><Content>欢迎 ^^</Content><Append>"+ new Date().getTime() +"</Append></Item></Chat>";
 }

 this.Load();
}

function SLIGHTBOYChatList()
{
 this.XMLDOMElement = Server.CreateObject("Msxml2.FreeThreadedDOMDocument.4.0")

 this.Add = function(Name, Level)
 {
  var root = this.XMLDOMElement.documentElement;
  var newItem = this.XMLDOMElement.createElement("Item");
  var newItemName = this.XMLDOMElement.createElement("Name");
  var newItemNameValue = this.XMLDOMElement.createCDATASection(Name);
  newItemName.appendChild(newItemNameValue)
  var newItemLevel = this.XMLDOMElement.createElement("Level");
  var newItemLevelValue = this.XMLDOMElement.createCDATASection(Level);
  newItemLevel.appendChild(newItemLevelValue)
  var newItemAppend = this.XMLDOMElement.createElement("Append");
  newItemAppend.text = Append;
  newItem.appendChild(newItemName);
  newItem.appendChild(newItemLevel);
  root.appendChild(newItem)
 }
 this.Save = function()
 {
  Application("ChatUser") = this.XMLDOMElement.xml;
 }
 this.Xml = function()
 {
  return this.XMLDOMElement.xml.replace("<?xml version=/"1.0/"?>","<?xml version=/"1.0/" encoding=/"gb2312/"?>"); 
 }
 this.Load = function()
 {
  if ( Application("ChatUser") == "" | typeof(Application("ChatUser")) == "undefined" )
  {
   Application("ChatContent") = "<?xml version=/"1.0/" encoding=/"GB2312/"?><Chat></Chat>";
  }
  this.XMLDOMElement.loadXML(Application("ChatUser"));

 }
 this.Remove = function()
 {
  var RemoveTimer = new Date().getTime();
  RemoveTimer -= 300000;
  var root = this.XMLDOMElement.documentElement;
  var RemoveNodes = root.selectNodes("//Item[Append < "+ RemoveTimer +"]");
  while (RemoveNodes.peekNode() != null)
  {
   RemoveNodes.removeNext();
  }
 }
 this.Load();
}
</script>

客户端聊天内容显示页面

<html>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<script language="JavaScript">
function SLIGHTBOYChat()
{
 this.GUID = "";
 this.recordset;
 var Timer = new Date();
 this.CheckState = function()
 {
  if ( xmlChat.readyState == "complete" )
  {
   this.recordset = xmlChat.recordset;
   this.Item();
  }
 }
 this.Item = function()
 {
  try
  {
   var PushString;

   this.recordset.MoveLast();
   if ( this.recordset("Append").value !=  this.GUID)
   {
    this.GUID = this.recordset("Append").value;
   }
   else
   {
    this.recordset = null;
    return;
   }
   this.recordset.MoveFirst();
   while (!this.recordset.EOF)
   {

    Timer.setTime(this.recordset("Append").value)
    PushString = this.recordset("Name").value +" 说: "+ this.recordset("Content").value +" <small>"+ Timer.toLocaleString() +"</small>";
    this.Push(PushString);
    this.recordset.moveNext();
   }
   this.recordset = null;
  }
  catch(e)
  {
   return;
  }

 }

 this.Push = function(PushString)
 {
  var ChatItem = document.createElement("li");
  ChatItem.innerHTML = PushString;
  ChatList.insertAdjacentElement("afterBegin",ChatItem);
 }
 this.Load = function()
 {
  xmlChat.src = "background.asp?GUID="+ this.GUID;
 }
 this.Remove = function()
 {
  try
  {
   var Removelength = ChatList.children.length;
   for (var i = 0; i < Removelength; i++)
   {
    ChatList.removeChild(ChatList.children(0));
   }
  }
  catch(e)
  {
  }
 }
}

var Chat = new SLIGHTBOYChat();
window.setInterval("Chat.Load()", 5000);
</script>
</head>

<body>
<xml id="xmlChat" src="background.asp" onreadystatechange="Chat.CheckState()"></xml>
<ul id="ChatList" style="list-style: none;margin: 0px;">
<li>欢迎访问 SLIGHTBOY XML ChatRoom...<small>(SLIGHTBOY)</small></li>
</ul>
</body>
</html>