chat.js

这是一个简单的基于Ajax和DWR实现的无刷新在线实时聊天程序

var nowNum = "m"
function getId(objId){
	return document.getElementById(objId)
}
function getName(objName){
	return document.getElementsByName(objName)[0]
}
var xmldoc
function createxmldoc(){
	if(window.XMLHttpRequest){
		xmldoc = new XMLHttpRequest();
		if(xmldoc.overrideMimeType){
				xmldoc.overrideMimeType("text/xml");
		}
	}else if(window.ActiveXObject){
		try{
			xmldoc = new ActiveXObject("Msxml4.XMLHTTP");
		}catch(e){
			try{
				xmldoc = new ActiveXObject("Msxml3.XMLHTTP");
			}catch(e){
				try{
					xmldoc = new ActiveXObject("Msxml2.XMLHTTP");
				}catch(e){
					try{
						xmldoc = new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){}
				}
			}
		}
	}
	if(!xmldoc){
		return false;
	}
}
function createQueryString(names){
	var conts = getName(names).value
	if(conts != ""){
		if(conts == "clear"){
			getId("chatmain").innerHTML = ""
			clean()
			focs()
			return false
		}else{
			return conts
		}
	}else{
		return false
	}
}
function doUsingGet(){
	xmldoc = false
	createxmldoc();
	var url = "chat.jsp?clien="+nowNum+"&timeStamp="+new Date().getTime();
	xmldoc.open("GET",url,true);
	//alert(url);
	//document.write(url);
	xmldoc.onreadystatechange = CheckState;
	xmldoc.setRequestHeader("Content-Type","text/xml;charset=GB2312;");
	xmldoc.send(null);
}
function doUsingPost(){
	createxmldoc();
	var named ="";
	var cont = "";
	if(createQueryString("inputs")){
		
		if(createQueryString("named")){
			named = createQueryString("named");
			
		}else{
			named = "";
		}
		
		/**/
		if(createQueryString("inputs") == "cls"){
			nowNum = "m"
		}

		cont = createQueryString("inputs");
	
		//alert(cont);
		var url = "chat.jsp?clien="+nowNum+"&cont="+cont+"&named="+named+"&timeStamp="+new Date().getTime();
		
		//昵称空格不给提交
		if(isWhiteWpace(named))
		{
			//alert("昵称不能包含空格");
			getId("loadifo").innerHTML = "昵称不能包含空格！";
		}else
		{
			if(cont.indexOf(" ")==0)
			{
				getId("loadifo").innerHTML = "内容不能为空格！";
			
			}else{

				xmldoc.open("GET",url,true);
				xmldoc.onreadystatechange = CheckState;		
				xmldoc.setRequestHeader("Content-Type","text/xml;charset=GB2312;");
				xmldoc.send(null);
				getId("errors").innerHTML = ""
				addChat(createQueryString("inputs"));
				clean()
				focs()
				getId("loadifo").innerHTML = "";
			}
		}

		//document.write(url);
		//alert(url);
		
	}else{
		getId("loadifo").innerHTML = "请输入对话内容！"	
		focs()
	}
}
function CheckState(){
	if(xmldoc.readyState == 1){
		//getId("loadifo").innerHTML = "连接服务器"
		}
	else if(xmldoc.readyState == 2){
		//getId("loadifo").innerHTML = "开始加载数据"
		}
	else if(xmldoc.readyState == 3){
		//getId("loadifo").innerHTML = "正在加载数据"
		}
	else if(xmldoc.readyState == 4){
		if(xmldoc.status == 200){
			results()
		}
		else{
			getId("loadifo").innerHTML = "错误"+xmldoc.status;
			focs()
		}
	}
}
function results(){
	resXml();
}
function resXml(){
	
	var res = xmldoc.responseXML.documentElement;
	
	//alert(res);
	var resLen = res.getElementsByTagName("items").length;
	
	if(getTag(res,0,"num") != nowNum){
		
		nowNum = getTag(res,0,"num")
		for(var i=0; i<resLen; i++){
			var useName = getTag(res,i,"name");
			//if(useName.length==0);
			var useMag = getTag(res,i,"conts");
			var useIp = getTag(res,i,"ip");
			var mid = getTag(res,i,"id");
		
		  //alert(useMag);
	   	
		  if (mid=="0")
		  {
		   	var lis = "游客 ["+ useIp + "] 进入聊天室！";
		  }
		 else{
			if(nowNum != "0" && useMag != ""){
				 if ((useName=="null")&&(useMag=="null")) { continue;}
				if(useName != ""){
					var lis = ""+ useName + " 说：" + useMag + " ["+ useIp + "]"
				}else{
					var lis = "游客: ["+ useIp + "] 说：" + useMag
				}
			}else{
					//alert(useMag);
					var lis = "游客 ["+ useIp + "] 进入聊天室！";
			}
			
		}
			//var newp = document.createElement("p")
			//newp.innerHTML = lis
			//getId("chatmain").appendChild(newp)
			getId("chatmain").innerHTML += lis + "<br />"
		}
		innerSize()
	}
}
function getTag(response,i,objTagName){
	try{
		var nodeV = response.getElementsByTagName(objTagName)[i].firstChild.nodeValue;
	}catch(e){
		var nodeV = ""
	}
	return nodeV;
}
var overs
function innerSize(){
	if(overs != 1){
		if(getId("chatmain").offsetHeight < getId("outmain").offsetHeight){
			getId("chatmain").style.marginTop = getId("outmain").offsetHeight - getId("chatmain").offsetHeight +"px";
		}else{
			getId("chatmain").scrollIntoView(false)	
		}
	}
}
window.onload = function(){
	getId("outs").onmousedown = function(){
		overs = 1
	}
	getId("outs").onmouseout = function(){
		overs = 0
		focs()
	}
	getName("inputs").onkeydown = function(e){
		if(document.all){
			var Keys = event.keyCode;	
		}else{
			var Keys = e.which;
		}
		//alert(Keys)
		if(Keys == "38"){
			preChat()
		}else if(Keys == "40"){
			nextChat()
		}else if(event.ctrlKey && Keys == "13"){
			doUsingPost()
		}else if(event.ctrlKey && Keys == "46"){
			clean()
		}
	}
			
}
//是否空格 
function isWhiteWpace (s)
{
  var whitespace = " \t\n\r";
  var i;

  for (i = 0; i < s.length; i++){   
     var c = s.charAt(i);
     if (whitespace.indexOf(c) >= 0) {
		  return true;
	  }
   }
    /* */

   return false;
}

setInterval("doUsingGet()",1000)