QQ实现对话

动态读取数据，实现QQ消息模式
1.使用技术，dwr实现异步数据读取数据,Dom创建html对象
2。html中给table设置ID值
<div style="width: 100%;overflow-x:auto;overflow-y:auto;" id="divide" >
	<table id="t1" style="width: 99%;" cellpadding="0" cellspacing="0" border="1" bordercolor="#DAEBFC">
		
	</table>
</div>
3.添加一行记录公用方法
name,datetime,content是列的值
state是状态，主要是为了实现鼠标放在不同的行显示不同的样式
function innserDate(name,datetime,content,state){
	var tbl= document.getElementById("t1");
	var tb=tbl.appendChild(document.createElement("tbody"));
	var tr=tb.appendChild(document.createElement("tr"));
	tr.attachEvent("onmouseout",function(){
		if(state=="1"){
			setStyle(tr,"background-color:#FFEEDD");
		}else{
			setStyle(tr,"background-color:#F3F4F3");
		}
		
	});
	tr.attachEvent("onmouseover",function(){
		setStyle(tr,"background-color:#DDEEFF");
	});
	if(state=="1"){
		setStyle(tr,"background-color:#FFEEDD");
	}else{
		setStyle(tr,"background-color:#F3F4F3"); 
	}
	tr.setAttribute("height","30px");
	var td1=tr.appendChild(document.createElement("td"));
	td1.setAttribute("align","center");
	td1.setAttribute("width","20%");
	td1.innerText=name;
	var td2=tr.appendChild(document.createElement("td"));
	td2.setAttribute("align","center");
	td2.setAttribute("width","32%");
	td2.innerText=datetime;
	var td3=tr.appendChild(document.createElement("td"));
	td3.setAttribute("align","left");
	td3.setAttribute("width","48%");
	td3.innerText=content;
}
4.设置样式公共方法
function setStyle(element,text) {   
	element.setAttribute("style",text)   
	element.style.cssText=text   
} 
5.dwr设置
com.ekms.query.logic.QueryMessageDWR实现dwr方法
com.ekms.query.logic.AnswerBean:Bean对象，主要是在dwr中使用,value中是相应的AnswerBean的对象
<create creator="new" javascript="QueryMessageDWR">      
	<param name="class" value="com.ekms.query.logic.QueryMessageDWR" />    
</create>
<convert converter="bean" match="com.ekms.query.logic.AnswerBean">
	<param name="include" value="answerId,content,userName,createDate" /> 
</convert>
6.QueryMessageDWR:java方法
public List getMessagaes(Long queryId){
	List<AnswerBean> answerBeanList = new ArrayList<AnswerBean>();
	if(queryId!=null){
		answerBeanList = iFactory.getAnswerDAO().getAnswerListAll(queryId);
	}
	return answerBeanList;
}
7.js 引用dwr
<script type='text/javascript' src='<%=webapp%>/dwr/interface/QueryMessageDWR.js'></script>
<script type='text/javascript' src='<%=webapp%>/dwr/engine.js'></script>  
<script type='text/javascript' src='<%=webapp%>/dwr/util.js'></script>
8.js实现异步请求
setInterval用于设置多久一步请求一次数据库
checkUpdate是QueryMessageDWR的方法，用于查看数据是否被改变，如果改变就跟新，否则就继续请求，只到被关闭会话。
function getDateAjax(){
	var questionId = document.getElementById("questionId").value;
	var userId = document.getElementById("userId").value;
	if(questionId!="" && userId!=""){
		QueryMessageDWR.checkUpdate(replayA,questionId,userId);
	}
}
var replayA = function getState(ans){
	if(ans=="1"){
		getdate();
	}else{
		setInterval("getDateAjax()",30000);
	}
}
function getdate(){
	var questionId = document.getElementById("questionId").value;
	if(questionId==""){
		return "系统提示：暂时不能用户对话";
	}else{
		QueryMessageDWR.getMessagaes(replay,questionId);
		
	}
}
到此为止已经将整个设计思路列出，