Ajax

开发平台：
JavaScript

index.js：源码内容
							/*
 * Author:MuBeiBei
 * Date:2008年12月21日
 */
window.onload = function(){
	var oInsert = document.getElementById('insert');
	var oXianShi = document.getElementById('xianshi');
	var oFragment = document.createDocumentFragment();
	var oTable = document.getElementById('t');
	
	var createHttp = new Object();
	createHttp.newXMLHttpRequest = function(){
		var xmlreq = false;
		if(window.XMLHttpRequest){
			xmlreq = new XMLHttpRequest();
		}else if(window.ActiveXObject){
			try{
				xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e1){
				try{
					xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e2){}
			}
		}
		return xmlreq;
	}
	
	oInsert.onclick = function(){
		oXianShi.innerHTML = "";
		var arrText = ['用户名:','密码:',''];
		var attr = ['text','password','button'];
		var attrId = ['name','password','tijiao'];
		for(var j = 0; j < arrText.length; j++){
			var oInput= document.createElement('input');
			if(attr[j] == 'button'){
				oInput.setAttribute('type',attr[j]);
				oInput.setAttribute('value','提交');
			}else{
				oInput.setAttribute('type',attr[j]);
			}
			oInput.setAttribute('id',attrId[j]);
			var oText = document.createTextNode(arrText[j]);
			oFragment.appendChild(oText);
			oFragment.appendChild(oInput);
		}
		oXianShi.appendChild(oFragment);
		
		//插入事件
		var oTiJiao = document.getElementById('tijiao');
		var oName = document.getElementById('name');
		var oPassWord = document.getElementById('password');
		oTiJiao.onclick = function(){
			var req = createHttp.newXMLHttpRequest();
			req.onreadystatechange = function(){
				if(req.readyState == 4){
					if(req.status == 200){
						if(req.responseText > 0){
							//插入成功
							var id = req.responseText - 1;
							var row = oTable.rows.length;
							oXianShi.innerHTML = "";
							oTable.insertRow(row).setAttribute('id',id);
							oTable.rows[row].insertCell(0);
							oTable.rows[row].cells[0].appendChild(document.createTextNode(id));
							oTable.rows[row].insertCell(1);
							var oSpan = document.createElement('span');
							var oStext = document.createTextNode(oName.value);
							oSpan.setAttribute('id',id);
							oSpan.setAttribute('title','username');
							oSpan.appendChild(oStext);
							oTable.rows[row].cells[1].appendChild(oSpan);
							oTable.rows[row].insertCell(2);
							var oPwd = document.createElement('span');
							var oPwdtext = document.createTextNode(oPassWord.value);
							oPwd.setAttribute('id',id);
							oPwd.setAttribute('title','password');
							oPwd.appendChild(oPwdtext);
							oTable.rows[row].cells[2].appendChild(oPwd);
							var oP = document.createElement('p');
							var oPtext = document.createTextNode('删除');
							oP.setAttribute('id',id);
							oP.appendChild(oPtext);
							oTable.rows[row].insertCell(3);
							oTable.rows[row].cells[3].appendChild(oP);
							
							oUsers.deleteUser();
							oUsers.updateUser();
						}else{alert('新增用户失败!');}	
					}
				}
			}
			req.open("POST","http://localhost:8080/lilin/servlet/Insert_User",true);
			req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			req.send("name="+oName.value+"&"+"password="+oPassWord.value);
		}
	}
	
	//删除事件
	var oUsers = new Object();
	oUsers.deleteUser = function(){
		var oPs = document.getElementsByTagName('p');
		var k = oPs.length;
		for(var i = 0; i < k; i++){
			oPs[i].onclick = function(){
				var oEvent = window.event || arguments[0];
				var id = oEvent.srcElement.id || oEvent.fromElement.id;
				var req = createHttp.newXMLHttpRequest();
				req.onreadystatechange = function(){
					if(req.readyState == 4){
						if(req.status == 200){
							if(req.responseText == 1){
								var oTrs = document.getElementsByTagName('tr');
								var tlength = oTrs.length;
								var oTrid = "";
								for(var j = 0; j < tlength; j++){
									if(oTrs[j].id == id){oTrid = j;}
								}
								oTable.deleteRow(oTrid);
							}else{alert("删除失败!");}
						}
					}
				}
				req.open("POST","http://localhost:8080/lilin/servlet/Delete_UserById",true);
				req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				req.send("id="+id);
			}
		}
	}
	
	//更新
	oUsers.updateUser = function(){
		var oSpans = document.getElementsByTagName('span');
		var k = oSpans.length;
		for(var i = 0; i < k; i++){
				oSpans[i].onclick = function(){
					var oEvent = window.event || arguments[0];
					var oSpan = oEvent.srcElement || oEvent.fromElement;
					var text = oSpan.childNodes[0].nodeValue;
					oSpan.outerHTML = "<input type='text' size=5 value='"+text+"' id='change' alt='"+oSpan.id+"' name='"+oSpan.title+"' />";
					var oChange = document.getElementById('change');
					oChange.focus();
					
					oChange.onblur = function(){
						var oEvent = window.event || arguments[0];
						var oSpan = oEvent.srcElement || oEvent.fromElement;
						var text = oSpan.value;
						var req = createHttp.newXMLHttpRequest();
						
						req.onreadystatechange = function(){
							if(req.readyState == 4){
								if(req.status == 200){
									if(req.responseText == 1){
										oSpan.outerHTML = "<span id='"+oSpan.alt+"' title='"+oSpan.name+"'>"+text+"</span>";
										oUsers.updateUser();
									}
									}else{alert('更新失败');}
								}
							}
						
						req.open("POST","http://localhost:8080/lilin/servlet/Update_User",true);
						req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
						req.send("id="+oSpan.alt+"&"+"name="+text+"&"+"type="+oSpan.name);
						
						
						}
					}
				
			}
		}
	
	
	oUsers.deleteUser();
	oUsers.updateUser();
}

						