??????? 写完这个雇员信息管理系统后，让我感受最深的是JSON的数据结构确实比XML更为优秀，但这并意味着JSON就可以代替XML，而作为轻量级开发，JSON应是首选。总之，JavaScript+Ajax在解析JSON类型的数据方面真的比XML简单、容易。下面贴出一些核心代码及效果图，完整案例请在本文最后下载。

1、数据分页代码：

function empInfo(){

	var tbl = document.getElementById("tbl");

	tbl.style.display = "none";

	var xhr=getXhr();
	
	xhr.open("GET", "./employee.do?symbol=pageInfo&page=" + nowPage
			+ "&pageSize=" + pageSize, true);
	
	xhr.send();
	
	xhr.onreadystatechange=function(){
	
		if(xhr.readyState==4&&xhr.status==200){
		
			var obj=eval("("+xhr.responseText+")");
			
			empInfoTool(obj);
			
		}
		
	}
			
}

2、获取总页数：?

//获取总页数
function getCountPage(){
			
	var tbl = document.getElementById("tbl");

	tbl.style.display = "none";
	
	var countRecord=0;
	
	var xhr=getXhr();
	
	xhr.open("GET","./employee.do?symbol=findAll",true);
	
	xhr.send();
	
	xhr.onreadystatechange=function(){
	
		if(xhr.readyState==4&&xhr.status==200){
		
			var obj=eval("("+xhr.responseText+")");
			
			countRecord=obj.length;
			
			countPage = (countRecord % pageSize == 0 ? countRecord / pageSize
					: Math.ceil(countRecord / pageSize));
		
		}
	
	}

}

?3、最为核心的代码：

//将雇员信息转化成页面表格显示
function empInfoTool(obj){

	var itbody = document.getElementById("itbody");
			
	itbody.innerText = "";
			
	for(var i=0;i<obj.length;i++){
			
		var tr=document.createElement("tr");
				
		var delbtn = document.createElement("input");

		var upbtn = document.createElement("input");

		delbtn.setAttribute("type", "button");

		upbtn.setAttribute("type", "button");

		delbtn.setAttribute("value", "删除");

		upbtn.setAttribute("value", "编辑");
				
		var empno=document.createElement("td");
				
		var ename=document.createElement("td");
				
		var job=document.createElement("td");
				
		var mgr=document.createElement("td");
				
		var hiredate=document.createElement("td");
				
		var sal=document.createElement("td");
				
		var comm=document.createElement("td");
				
		var deptno=document.createElement("td");
				
		var udtd=document.createElement("td");
				
		empno.appendChild(document.createTextNode(obj[i].empno));
				
		ename.appendChild(document.createTextNode(obj[i].ename));
				
		job.appendChild(document.createTextNode(obj[i].job));
				
		mgr.appendChild(document.createTextNode(obj[i].mgr));
		
		var date=new Date(obj[i].hiredate.time);
		
		var str=getFormatDate(date);
		
		hiredate.appendChild(document.createTextNode(str));
				
		sal.appendChild(document.createTextNode(obj[i].sal));
				
		comm.appendChild(document.createTextNode(obj[i].comm));
				
		deptno.appendChild(document.createTextNode(obj[i].deptno));
				
		udtd.appendChild(upbtn);
				
		udtd.appendChild(delbtn);
				
		tr.appendChild(empno);
				
		tr.appendChild(ename);
				
		tr.appendChild(job);
				
		tr.appendChild(mgr);
			
		tr.appendChild(hiredate);
				
		tr.appendChild(sal);
				
		tr.appendChild(comm);
				
		tr.appendChild(deptno);
				
		tr.appendChild(udtd);
				
		itbody.appendChild(tr);
				
		//删除雇员信息
		delbtn.onclick=function(){
			
		var empno = this.parentNode.parentNode.firstChild.innerHTML;			
		
		var xhr=getXhr();
					
		xhr.open("GET", "./employee.do?symbol=delete&empno="+ empno, true);	
										
		xhr.send();
					
		xhr.onreadystatechange = function() {

			if (xhr.readyState == 4 && xhr.status == 200) {
			
				var obj=eval("("+xhr.responseText+")");
								
				empInfoTool(obj);	

			}
			
		}
		
		}
		
		//更新雇员信息
		upbtn.onclick=function(){
		
			var tbl = document.getElementById("tbl");

			tbl.style.display = "block";
			
			var empno_tr=$("empno_tr");
			
			empno_tr.style.display="none";