当前位置：文档之家 › 跟我学AJAX技术——实现对用户信息查询返回结果的数据表格在线编辑的Web应用示例

跟我学AJAX技术——实现对用户信息查询返回结果的数据表格在线编辑的Web应用示例

  • 格式：doc
  • 大小：417.00 KB
  • 文档页数：20

1.1跟我学AJAX技术——实现对用户信息查询返回结果的数据表格在线编辑的Web应用示例1.1.1构建出相关的Web项目1、在某个页面中添加一个搜索信息的表单<form action="<c:url value='/userInfoManageAction.action'/>" method="post"><input type="hidden" name="action" value="doSearchUserInfo" /><select name="search_Method"><option value="1" selected="selected">按用户类型搜索</option><option value="2" >按用户ID搜索</option><option value="3">按用户名称搜索</option><option value="4">按销售业绩搜索</option></select><input type="text" name="searchKeyWord" /><input title="点击我可以进行提交" name="submitImage" type="image"src="<c:url value='/images/search_btn.gif'/>" /></form>2、编程实现搜索功能的后台Servlet程序public void doSearchUserInfo_ByUserType(HttpServletRequest request,HttpServletResponse response,String searchKeyWord)throws ServletException, IOException{StringtargetPage=this.getServletContext().getInitParameter("forwardShowErrorInfoTargetPage");int userType;if(searchKeyWord.equals("普通用户")){userType=1;}else if(searchKeyWord.equals("后台管理")){userType=2;}else{ //其它类型的用户userType=0;}List<UserInfoVO> someUserInfosVOList=null;UserInfoInterface oneUserInfoBean=new UserInfoManageImple();try {someUserInfosVOList=oneUserInfoBean.doSearchUserInfo_ByUserType(userType);} catch (WebCRMException e) {request.setAttribute("errorText",e.getMessage());forwardTargetPage(targetPage,request,response);return;}if(someUserInfosVOList.size()==0){request.setAttribute("errorText","没有搜索到满足条件的结果信息！");forwardTargetPage(targetPage,request,response);}else{request.setAttribute("someUserInfosVOList", someUserInfosVOList);StringforawrdShowSearchResultTargetPage="/userManage/showSearchResultInfo.jsp";forwardTargetPage(forawrdShowSearchResultTargetPage,request,response);}return;}3、添加一个显示搜索结果信息的JSP页面（1）页面创建的过程局部截图（2）页面最终的代码示例<%@ page isELIgnored="false" pageEncoding="GB18030"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>蓝梦集团CRM系统在线用户信息搜索结果页面</title><meta http-equiv="keywords" content="蓝梦集团,CRM,账户" /><meta http-equiv="description" content="这是蓝梦集团CRM系统" /><link href="${pageContext.request.contextPath}/css/pageContentStyle.css"rel="stylesheet" type="text/css" /><script language="javascript"src="${pageContext.request.contextPath}/javascript/commonJavaScript.js"type="text/javascript"></script><script language="javascript" type="text/javascript">var webContextName="${pageContext.request.contextPath}";</script><script language="javascript"src="${pageContext.request.contextPath}/javascript/onLineEditTableRow.js"type="text/javascript"></script></head><body><jsp:include page="/commonPage/pageHead.jsp" ></jsp:include><jsp:include page="/commonPage/navMenuBar.jsp" ></jsp:include><br/><div id="someOnePageContent" ><div id="showState"></div><table border="1" width="80%" style="border:#63F" ><thead><tr><th>用户名</th><th>别名</th><th>密码回答问题</th><th>密码答案</th><th>电子邮件</th><th>性别</th><th><a onclick="addNewRow(7);" id="add" href="#">添加一行</a></th></tr></thead><tbody id="dataTableTBodyID"><c:forEach var="oneUserInfosVO" items="${someUserInfosVOList}"> <tr><td><span>${erName}&nbsp;</span></td><td><span>${oneUserInfosVO.aliaoName}&nbsp;</span></td><td><span>${oneUserInfosVO.passWordAsk}&nbsp;</span></td><td><span>${oneUserInfosVO.passWordAnswer}&nbsp;</span></td><td><span>${erMail}&nbsp;</span></td><td><span><c:choose><c:when test="${erSex==1}"><c:out value="男" /></c:when><c:when test="${erSex==0}"><c:out value="女" /></c:when></c:choose>&nbsp;</span></td><td><a onclick="editThisRow(this,1,7);" id="edit" href="#" >编辑该行</a>&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="deleteThisRow(this,1);" id="edit" href="#" >删除该行</a></td></tr></c:forEach></tbody></table></div><br/><br/><br/><jsp:include page="/commonPage/authorInfo.jsp" ></jsp:include></body></html>（3）页面预览的局部视图1.1.2实现在线编辑功能1、添加onLineEditTableRow.js文件（1）创建onLineEditTableRow.js文件过程的局部截图（2）onLineEditTableRow.js文件最终的代码示例var uniqueRow = 0;var xmlHttpRequest;/**************** 下面为增加新行的代码****************************/ function addNewRow(cellCount){var tbodyObj = document.getElementById("dataTableTBodyID");var newTR = document.createElement('tr');var newTDs = new Array(cellCount);for(var index=0; index< cellCount; index++){//新增的数据行包含有cellCount个单元格newTDs[index]=document.createElement('td');}var newInputs = new Array(cellCount);for(var index=0; index< cellCount; index++){//新增的数据行包含有cellCount个输入框newInputs[index]=document.createElement('input');newInputs[index].type="text";newInputs[index].name="colName"+index;newInputs[index].value=""; //新增的行中单元格的初始值//取消输入框的四周外框线newInputs[index].style = "border:none;";}//设置"保存"按钮的类型newInputs[cellCount-1].type= "button";//设置"保存"按钮的id名称newInputs[cellCount-1].id = "saveButtonName"+(++uniqueRow);newInputs[cellCount-1].value = "保存该行";newInputs[cellCount-1].onclick = function(){var inputButtonValue=new Array(cellCount-1);for(var index=0; index< cellCount-1; index++){inputButtonValue[index]=newInputs[index].value;} //获得用户在文本框中所输入的各个新的值saveNewRowDataToWebServer(inputButtonValue);};for (var index=0; index < newTDs.length; index++){//将动态创建的各个文本框添加到对应的单元格中newTDs[index].appendChild(newInputs[index]);//再将各个单元格添加到新增加的表格行中newTR.appendChild(newTDs[index]);}//将新增加的表格行插入到当前的表格中tbodyObj.insertBefore(newTR, null);}function saveNewRowDataToWebServer(inputButtonValue){var newRowData="";for(var index=0; index < inputButtonValue.length;index++){newRowData=newRowData+"dataName"+index+"="+inputButtonValue[index]+"&";}//只需要将newRowData作为查询参树字符串向服务器发送newRowData = newRowData+"dataCount="+inputButtonValue.lengthvar requestURL=webContextName+"/onLineEditServlet.action?action=saveOneNewRow&"+newRowData; xmlHttpRequest=createXMLHTTPRequestObject();xmlHttpRequest.onreadystatechange = processHttpResponseForSaveNewRow;// Get 请求方式的代码xmlHttpRequest.open("GET", requestURL, true);xmlHttpRequest.send(null);}function processHttpResponseForSaveNewRow(){if (xmlHttpRequest.readyState == 4){if (xmlHttpRequest.status == 200){if(xmlHttpRequest.responseText!=""){window.alert("在将该行数据保存到数据库表中时出现了“"+httpRequest.responseText+"”错误!");}else{window.alert("已经将该行数据保存到数据库表中!");}}else if(xmlHttpRequest.status == 404){alert("没有找到与所请求的文件相匹配的资源！");}else{alert("你所请求的页面发生异常，错误代码为："+httpRequest.status);}}else{document.getElementById(showState).innerHTML = "检测中，请稍等...";}}/********************下面为编辑某行的代码******************************/ function editThisRow(inputButtonObj,dataID,cellCount){//dataID 代表要编辑的数据行的主键ID值var inputButtonTempObj = inputButtonObj;while (!inputButtonTempObj.tagName || inputButtonTempObj.tagName.toLowerCase() != "tr"){inputButtonTempObj = inputButtonTempObj.parentNode;}//从当前的<a>标签往上搜索定位找到<tr>标签（页就是定位到当前编辑的表格行）var inps = inputButtonTempObj.getElementsByTagName("span");var myVals = [];for (var i=0,len=inps.length; i < len; i++){myVals[myVals.length] = inps[i].firstChild.nodeValue;}editThisRowData(document.getElementById('add'), inputButtonTempObj.nextSibling, myVals,dataID,cellCount);inputButtonTempObj.parentNode.removeChild(inputButtonTempObj);}function editThisRowData(inputButtonObj, sibBefore, vals,dataID,cellCount){var tbodyObj = document.getElementById("dataTableTBodyID");var newTR = document.createElement('tr'); //新增的数据行包含有三个单元格var newTDs = new Array(cellCount);var newInputs = new Array(cellCount);for(var index=0; index< cellCount; index++){newTDs[index]=document.createElement('td');newInputs[index]=document.createElement('input');newInputs[index].type="text";newInputs[index].name="colName"+index;newInputs[index].value=vals[index]; //获得原来表格单元格中的原来数据newInputs[index].style = "border:none;"; //取消输入框的四周外框线}newInputs[cellCount-1].type= "button"; //设置"保存"按钮的类型//设置"保存"按钮的id名称newInputs[cellCount-1].id = "saveButtonName"+(++uniqueRow);newInputs[cellCount-1].value = "保存该行";newInputs[cellCount-1].onclick = function(){var inputButtonValue=new Array(cellCount-1);for(var index=0; index< cellCount-1; index++){inputButtonValue[index]=newInputs[index].value;}saveThisEditedRowDataToServer(inputButtonValue,dataID);};for (var index=0; index < newTDs.length; index++){newTDs[index].appendChild(newInputs[index]);newTR.appendChild(newTDs[index]);}tbodyObj.insertBefore(newTR, sibBefore);}function saveThisEditedRowDataToServer(inputButtonValue,dataID){var newRowData="dataID="+dataID+"&";for(var index=0; index < inputButtonValue.length;index++){newRowData=newRowData+"dataName"+index+"="+inputButtonValue[index]+"&"; }//只需要将newRowData作为查询参树字符串向服务器发送newRowData = newRowData+"dataCount="+inputButtonValue.lengthvar requestURL=webContextName+"/onLineEditServlet.action?action=saveOneEditRow&"+newRowData;xmlHttpRequest=createXMLHTTPRequestObject();xmlHttpRequest.onreadystatechange = processHttpResponseForSaveOneEditRow; xmlHttpRequest.open("GET", requestURL, true); // Get 请求方式的代码xmlHttpRequest.send(null);}function processHttpResponseForSaveOneEditRow(){if (xmlHttpRequest.readyState == 4){if (xmlHttpRequest.status == 200){if(xmlHttpRequest.responseText!=""){window.alert("在将该行数据保存到数据库表中时出现了“"+httpRequest.responseText+"”错误!");}else{window.alert("已经将该行数据保存到数据库表中!");}}else if(xmlHttpRequest.status == 404){alert("没有找到与所请求的文件相匹配的资源！");}else{alert("你所请求的页面发生异常，错误代码为："+httpRequest.status);}}else{document.getElementById(showState).innerHTML ="正在向服务器发送请求，请稍等...";}}/**********************下面为删除某行的代码**************************/ function deleteThisRow(inputButtonObj,dataID){//dataID 代表要删除的数据行的主键ID值var isDeleteSomeOneRow=window.confirm("您是否真的要将此数据行删除吗？");if(!isDeleteSomeOneRow){return; //如果选择了”否“则不进行删除}var inputButtonTempObj = inputButtonObj;while (!inputButtonTempObj.tagName || inputButtonTempObj.tagName.toLowerCase() != "tr"){inputButtonTempObj = inputButtonTempObj.parentNode;}//从当前的<a>标签往上搜索定位找到<tr>标签（页就是定位到当前删除的表格行）inputButtonTempObj.parentNode.removeChild(inputButtonTempObj);var requestURL=webContextName+"/onLineEditServlet.action?action=deleteOneRow&dataID="+dataID; xmlHttpRequest=createXMLHTTPRequestObject();xmlHttpRequest.onreadystatechange = processHttpResponseForDeleteOneRow; xmlHttpRequest.open("GET", requestURL, true); // Get 请求方式的代码xmlHttpRequest.send(null);}function processHttpResponseForDeleteOneRow(){if (xmlHttpRequest.readyState == 4){if (xmlHttpRequest.status == 200){if(xmlHttpRequest.responseText!=""){window.alert("在将该行数据保存到数据库表中时出现了“"+httpRequest.responseText+"”错误!");}else{window.alert("已经将该行数据保存到数据库表中!");}}else if(xmlHttpRequest.status == 404){window.alert("没有找到与所请求的文件相匹配的资源！");}else{window.alert("你所请求的页面发生异常，错误代码为："+httpRequest.status);}}else{document.getElementById(showState).innerHTML ="正在向服务器发送请求，请稍等...";}}function createXMLHTTPRequestObject(){var httpRequestObject;if (window.XMLHttpRequest) { // Mozilla, Safari, ...httpRequestObject = new XMLHttpRequest();}else if (window.ActiveXObject) { // IEtry{httpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}catch (e){try{httpRequestObject= new ActiveXObject("Msxml2.XMLHTTP");}catch (e2) {window.alert("您所使用的浏览器不支持AJAX技术！");}}}return httpRequestObject;}3、添加对表格数据编辑的结果进行响应的Servlet组件（1）程序类名称为OnLineEditServlet，程序包名称为com.px1987.webcrm.servlet（2）URL-Pattern为/onLineEditServlet.action（3）编程该Servlet程序的功能实现代码package com.px1987.webcrm.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class OnLineEditServlet extends HttpServlet {public OnLineEditServlet() {super();}public void destroy() {super.destroy();}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String action=request.getParameter("action");if(action.equals("saveOneNewRow")){doSaveOneNewRow(request,response);}else if(action.equals("saveOneEditRow")){doSaveOneEditRoww(request,response);}else if(action.equals("deleteOneRow")){doDeleteOneRow(request,response);}}public void doSaveOneNewRow(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{String dataCount=request.getParameter("dataCount");String oneDataItemName=null;String oneDataItemValue=null;for(int index=0; index <Integer.parseInt(dataCount); index++){oneDataItemName="dataName"+index;oneDataItemValue=request.getParameter(oneDataItemName);oneDataItemValue=new String(oneDataItemValue.getBytes("ISO-8859-1"),"gb2312");System.out.println("数据行中的数据项目"+index+"的值为"+oneDataItemValue);}response.setContentType("text/html");PrintWriter out = response.getWriter();out.print(""); //向浏览器发送没有出现错误的状态out.flush();out.close();}public void doSaveOneEditRoww(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{String dataCount=request.getParameter("dataCount");String oneDataItemName=null;String oneDataItemValue=null;for(int index=0; index <Integer.parseInt(dataCount); index++){oneDataItemName="dataName"+index;oneDataItemValue=request.getParameter(oneDataItemName);oneDataItemValue=new String(oneDataItemValue.getBytes("ISO-8859-1"),"gb2312");System.out.println("数据行中的数据项目"+index+"的值为"+oneDataItemValue);}response.setContentType("text/html");PrintWriter out = response.getWriter();out.print(""); //向浏览器发送没有出现错误的状态out.flush();out.close();}public void doDeleteOneRow(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{String dataID=request.getParameter("dataID");System.out.println("dataID="+dataID+"的数据行已经被删除掉了！");response.setContentType("text/html");PrintWriter out = response.getWriter();out.print(""); //向浏览器发送没有出现错误的状态out.flush();out.close();}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {}public void init() throws ServletException {}}1.1.3测试本项目的最终应用效果1、部署本项目的系统程序2、启动服务器3、输入http://127.0.0.1:8080/webcrm/index.jsp后（1）在搜索表单中输入搜索的条件，并点击提交（2）将出现下面的结果4、点击“添加一行”按钮后，将出现下面的状态，并输入该行的各个数据项目5、点击“保存该行”按钮后，将出现下面的状态6、同时在控制台中将出现下面的提示7、点击“编辑该行”按钮后，将出现下面的状态，并输入该行的各个数据项目8、点击“保存该行”按钮后，将出现下面的状态9、同时在控制台中将出现下面的提示10、点击“删除该行”按钮后，将出现下面的状态11、点击其中的“确定”按钮后12、同时在控制台中将出现下面的提示。

合集下载

跟我学AJAX技术——实现对用户信息查询返回结果的数据表格在线编辑的Web应用示例

跟我学AJAX技术——实现对用户信息查询返回结果的数据表格在线编辑的Web应用示例

1.1跟我学AJAX技术——实现对用户信息查询返回结果的数据表格在线编辑的Web应用示例1.1.1构建出相关的Web项目1、在某个页面中添加一个搜索信息的表单<form action="<c:url value='/userInfoManageAction.action'/>" method="post"><input type="hidden" name="action" value="doSearchUserInfo" /><select name="search_Method"><option value="1" selected="selected">按用户类型搜索</option><option value="2" >按用户ID搜索</option><option value="3">按用户名称搜索</option><option value="4">按销售业绩搜索</option></select><input type="text" name="searchKeyWord" /><input title="点击我可以进行提交" name="submitImage" type="image"src="<c:url value='/images/search_btn.gif'/>" /></form>2、编程实现搜索功能的后台Servlet程序public void doSearchUserInfo_ByUserType(HttpServletRequest request,HttpServletResponse response,String searchKeyWord)throws ServletException, IOException{StringtargetPage=this.getServletContext().getInitParameter("forwardShowErrorInfoTargetPage");int userType;if(searchKeyWord.equals("普通用户")){userType=1;}else if(searchKeyWord.equals("后台管理")){userType=2;}else{ //其它类型的用户userType=0;}List<UserInfoVO> someUserInfosVOList=null;UserInfoInterface oneUserInfoBean=new UserInfoManageImple();try {someUserInfosVOList=oneUserInfoBean.doSearchUserInfo_ByUserType(userType);} catch (WebCRMException e) {request.setAttribute("errorText",e.getMessage());forwardTargetPage(targetPage,request,response);return;}if(someUserInfosVOList.size()==0){request.setAttribute("errorText","没有搜索到满足条件的结果信息！");forwardTargetPage(targetPage,request,response);}else{request.setAttribute("someUserInfosVOList", someUserInfosVOList);StringforawrdShowSearchResultTargetPage="/userManage/showSearchResultInfo.jsp";forwardTargetPage(forawrdShowSearchResultTargetPage,request,response);}return;}3、添加一个显示搜索结果信息的JSP页面（1）页面创建的过程局部截图（2）页面最终的代码示例<%@ page isELIgnored="false" pageEncoding="GB18030"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>蓝梦集团CRM系统在线用户信息搜索结果页面</title><meta http-equiv="keywords" content="蓝梦集团,CRM,账户" /><meta http-equiv="description" content="这是蓝梦集团CRM系统" /><link href="${pageContext.request.contextPath}/css/pageContentStyle.css"rel="stylesheet" type="text/css" /><script language="javascript"src="${pageContext.request.contextPath}/javascript/commonJavaScript.js"type="text/javascript"></script><script language="javascript" type="text/javascript">var webContextName="${pageContext.request.contextPath}";</script><script language="javascript"src="${pageContext.request.contextPath}/javascript/onLineEditTableRow.js"type="text/javascript"></script></head><body><jsp:include page="/commonPage/pageHead.jsp" ></jsp:include><jsp:include page="/commonPage/navMenuBar.jsp" ></jsp:include><br/><div id="someOnePageContent" ><div id="showState"></div><table border="1" width="80%" style="border:#63F" ><thead><tr><th>用户名</th><th>别名</th><th>密码回答问题</th><th>密码答案</th><th>电子邮件</th><th>性别</th><th><a onclick="addNewRow(7);" id="add" href="#">添加一行</a></th></tr></thead><tbody id="dataTableTBodyID"><c:forEach var="oneUserInfosVO" items="${someUserInfosVOList}"> <tr><td><span>${erName}&nbsp;</span></td><td><span>${oneUserInfosVO.aliaoName}&nbsp;</span></td><td><span>${oneUserInfosVO.passWordAsk}&nbsp;</span></td><td><span>${oneUserInfosVO.passWordAnswer}&nbsp;</span></td><td><span>${erMail}&nbsp;</span></td><td><span><c:choose><c:when test="${erSex==1}"><c:out value="男" /></c:when><c:when test="${erSex==0}"><c:out value="女" /></c:when></c:choose>&nbsp;</span></td><td><a onclick="editThisRow(this,1,7);" id="edit" href="#" >编辑该行</a>&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="deleteThisRow(this,1);" id="edit" href="#" >删除该行</a></td></tr></c:forEach></tbody></table></div><br/><br/><br/><jsp:include page="/commonPage/authorInfo.jsp" ></jsp:include></body></html>（3）页面预览的局部视图1.1.2实现在线编辑功能1、添加onLineEditTableRow.js文件（1）创建onLineEditTableRow.js文件过程的局部截图（2）onLineEditTableRow.js文件最终的代码示例var uniqueRow = 0;var xmlHttpRequest;/**************** 下面为增加新行的代码****************************/ function addNewRow(cellCount){var tbodyObj = document.getElementById("dataTableTBodyID");var newTR = document.createElement('tr');var newTDs = new Array(cellCount);for(var index=0; index< cellCount; index++){//新增的数据行包含有cellCount个单元格newTDs[index]=document.createElement('td');}var newInputs = new Array(cellCount);for(var index=0; index< cellCount; index++){//新增的数据行包含有cellCount个输入框newInputs[index]=document.createElement('input');newInputs[index].type="text";newInputs[index].name="colName"+index;newInputs[index].value=""; //新增的行中单元格的初始值//取消输入框的四周外框线newInputs[index].style = "border:none;";}//设置"保存"按钮的类型newInputs[cellCount-1].type= "button";//设置"保存"按钮的id名称newInputs[cellCount-1].id = "saveButtonName"+(++uniqueRow);newInputs[cellCount-1].value = "保存该行";newInputs[cellCount-1].onclick = function(){var inputButtonValue=new Array(cellCount-1);for(var index=0; index< cellCount-1; index++){inputButtonValue[index]=newInputs[index].value;} //获得用户在文本框中所输入的各个新的值saveNewRowDataToWebServer(inputButtonValue);};for (var index=0; index < newTDs.length; index++){//将动态创建的各个文本框添加到对应的单元格中newTDs[index].appendChild(newInputs[index]);//再将各个单元格添加到新增加的表格行中newTR.appendChild(newTDs[index]);}//将新增加的表格行插入到当前的表格中tbodyObj.insertBefore(newTR, null);}function saveNewRowDataToWebServer(inputButtonValue){var newRowData="";for(var index=0; index < inputButtonValue.length;index++){newRowData=newRowData+"dataName"+index+"="+inputButtonValue[index]+"&";}//只需要将newRowData作为查询参树字符串向服务器发送newRowData = newRowData+"dataCount="+inputButtonValue.lengthvar requestURL=webContextName+"/onLineEditServlet.action?action=saveOneNewRow&"+newRowData; xmlHttpRequest=createXMLHTTPRequestObject();xmlHttpRequest.onreadystatechange = processHttpResponseForSaveNewRow;// Get 请求方式的代码xmlHttpRequest.open("GET", requestURL, true);xmlHttpRequest.send(null);}function processHttpResponseForSaveNewRow(){if (xmlHttpRequest.readyState == 4){if (xmlHttpRequest.status == 200){if(xmlHttpRequest.responseText!=""){window.alert("在将该行数据保存到数据库表中时出现了“"+httpRequest.responseText+"”错误!");}else{window.alert("已经将该行数据保存到数据库表中!");}}else if(xmlHttpRequest.status == 404){alert("没有找到与所请求的文件相匹配的资源！");}else{alert("你所请求的页面发生异常，错误代码为："+httpRequest.status);}}else{document.getElementById(showState).innerHTML = "检测中，请稍等...";}}/********************下面为编辑某行的代码******************************/ function editThisRow(inputButtonObj,dataID,cellCount){//dataID 代表要编辑的数据行的主键ID值var inputButtonTempObj = inputButtonObj;while (!inputButtonTempObj.tagName || inputButtonTempObj.tagName.toLowerCase() != "tr"){inputButtonTempObj = inputButtonTempObj.parentNode;}//从当前的<a>标签往上搜索定位找到<tr>标签（页就是定位到当前编辑的表格行）var inps = inputButtonTempObj.getElementsByTagName("span");var myVals = [];for (var i=0,len=inps.length; i < len; i++){myVals[myVals.length] = inps[i].firstChild.nodeValue;}editThisRowData(document.getElementById('add'), inputButtonTempObj.nextSibling, myVals,dataID,cellCount);inputButtonTempObj.parentNode.removeChild(inputButtonTempObj);}function editThisRowData(inputButtonObj, sibBefore, vals,dataID,cellCount){var tbodyObj = document.getElementById("dataTableTBodyID");var newTR = document.createElement('tr'); //新增的数据行包含有三个单元格var newTDs = new Array(cellCount);var newInputs = new Array(cellCount);for(var index=0; index< cellCount; index++){newTDs[index]=document.createElement('td');newInputs[index]=document.createElement('input');newInputs[index].type="text";newInputs[index].name="colName"+index;newInputs[index].value=vals[index]; //获得原来表格单元格中的原来数据newInputs[index].style = "border:none;"; //取消输入框的四周外框线}newInputs[cellCount-1].type= "button"; //设置"保存"按钮的类型//设置"保存"按钮的id名称newInputs[cellCount-1].id = "saveButtonName"+(++uniqueRow);newInputs[cellCount-1].value = "保存该行";newInputs[cellCount-1].onclick = function(){var inputButtonValue=new Array(cellCount-1);for(var index=0; index< cellCount-1; index++){inputButtonValue[index]=newInputs[index].value;}saveThisEditedRowDataToServer(inputButtonValue,dataID);};for (var index=0; index < newTDs.length; index++){newTDs[index].appendChild(newInputs[index]);newTR.appendChild(newTDs[index]);}tbodyObj.insertBefore(newTR, sibBefore);}function saveThisEditedRowDataToServer(inputButtonValue,dataID){var newRowData="dataID="+dataID+"&";for(var index=0; index < inputButtonValue.length;index++){newRowData=newRowData+"dataName"+index+"="+inputButtonValue[index]+"&"; }//只需要将newRowData作为查询参树字符串向服务器发送newRowData = newRowData+"dataCount="+inputButtonValue.lengthvar requestURL=webContextName+"/onLineEditServlet.action?action=saveOneEditRow&"+newRowData;xmlHttpRequest=createXMLHTTPRequestObject();xmlHttpRequest.onreadystatechange = processHttpResponseForSaveOneEditRow; xmlHttpRequest.open("GET", requestURL, true); // Get 请求方式的代码xmlHttpRequest.send(null);}function processHttpResponseForSaveOneEditRow(){if (xmlHttpRequest.readyState == 4){if (xmlHttpRequest.status == 200){if(xmlHttpRequest.responseText!=""){window.alert("在将该行数据保存到数据库表中时出现了“"+httpRequest.responseText+"”错误!");}else{window.alert("已经将该行数据保存到数据库表中!");}}else if(xmlHttpRequest.status == 404){alert("没有找到与所请求的文件相匹配的资源！");}else{alert("你所请求的页面发生异常，错误代码为："+httpRequest.status);}}else{document.getElementById(showState).innerHTML ="正在向服务器发送请求，请稍等...";}}/**********************下面为删除某行的代码**************************/ function deleteThisRow(inputButtonObj,dataID){//dataID 代表要删除的数据行的主键ID值var isDeleteSomeOneRow=window.confirm("您是否真的要将此数据行删除吗？");if(!isDeleteSomeOneRow){return; //如果选择了”否“则不进行删除}var inputButtonTempObj = inputButtonObj;while (!inputButtonTempObj.tagName || inputButtonTempObj.tagName.toLowerCase() != "tr"){inputButtonTempObj = inputButtonTempObj.parentNode;}//从当前的<a>标签往上搜索定位找到<tr>标签（页就是定位到当前删除的表格行）inputButtonTempObj.parentNode.removeChild(inputButtonTempObj);var requestURL=webContextName+"/onLineEditServlet.action?action=deleteOneRow&dataID="+dataID; xmlHttpRequest=createXMLHTTPRequestObject();xmlHttpRequest.onreadystatechange = processHttpResponseForDeleteOneRow; xmlHttpRequest.open("GET", requestURL, true); // Get 请求方式的代码xmlHttpRequest.send(null);}function processHttpResponseForDeleteOneRow(){if (xmlHttpRequest.readyState == 4){if (xmlHttpRequest.status == 200){if(xmlHttpRequest.responseText!=""){window.alert("在将该行数据保存到数据库表中时出现了“"+httpRequest.responseText+"”错误!");}else{window.alert("已经将该行数据保存到数据库表中!");}}else if(xmlHttpRequest.status == 404){window.alert("没有找到与所请求的文件相匹配的资源！");}else{window.alert("你所请求的页面发生异常，错误代码为："+httpRequest.status);}}else{document.getElementById(showState).innerHTML ="正在向服务器发送请求，请稍等...";}}function createXMLHTTPRequestObject(){var httpRequestObject;if (window.XMLHttpRequest) { // Mozilla, Safari, ...httpRequestObject = new XMLHttpRequest();}else if (window.ActiveXObject) { // IEtry{httpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}catch (e){try{httpRequestObject= new ActiveXObject("Msxml2.XMLHTTP");}catch (e2) {window.alert("您所使用的浏览器不支持AJAX技术！");}}}return httpRequestObject;}3、添加对表格数据编辑的结果进行响应的Servlet组件（1）程序类名称为OnLineEditServlet，程序包名称为com.px1987.webcrm.servlet（2）URL-Pattern为/onLineEditServlet.action（3）编程该Servlet程序的功能实现代码package com.px1987.webcrm.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class OnLineEditServlet extends HttpServlet {public OnLineEditServlet() {super();}public void destroy() {super.destroy();}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String action=request.getParameter("action");if(action.equals("saveOneNewRow")){doSaveOneNewRow(request,response);}else if(action.equals("saveOneEditRow")){doSaveOneEditRoww(request,response);}else if(action.equals("deleteOneRow")){doDeleteOneRow(request,response);}}public void doSaveOneNewRow(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{String dataCount=request.getParameter("dataCount");String oneDataItemName=null;String oneDataItemValue=null;for(int index=0; index <Integer.parseInt(dataCount); index++){oneDataItemName="dataName"+index;oneDataItemValue=request.getParameter(oneDataItemName);oneDataItemValue=new String(oneDataItemValue.getBytes("ISO-8859-1"),"gb2312");System.out.println("数据行中的数据项目"+index+"的值为"+oneDataItemValue);}response.setContentType("text/html");PrintWriter out = response.getWriter();out.print(""); //向浏览器发送没有出现错误的状态out.flush();out.close();}public void doSaveOneEditRoww(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{String dataCount=request.getParameter("dataCount");String oneDataItemName=null;String oneDataItemValue=null;for(int index=0; index <Integer.parseInt(dataCount); index++){oneDataItemName="dataName"+index;oneDataItemValue=request.getParameter(oneDataItemName);oneDataItemValue=new String(oneDataItemValue.getBytes("ISO-8859-1"),"gb2312");System.out.println("数据行中的数据项目"+index+"的值为"+oneDataItemValue);}response.setContentType("text/html");PrintWriter out = response.getWriter();out.print(""); //向浏览器发送没有出现错误的状态out.flush();out.close();}public void doDeleteOneRow(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{String dataID=request.getParameter("dataID");System.out.println("dataID="+dataID+"的数据行已经被删除掉了！");response.setContentType("text/html");PrintWriter out = response.getWriter();out.print(""); //向浏览器发送没有出现错误的状态out.flush();out.close();}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {}public void init() throws ServletException {}}1.1.3测试本项目的最终应用效果1、部署本项目的系统程序2、启动服务器3、输入http://127.0.0.1:8080/webcrm/index.jsp后（1）在搜索表单中输入搜索的条件，并点击提交（2）将出现下面的结果4、点击“添加一行”按钮后，将出现下面的状态，并输入该行的各个数据项目5、点击“保存该行”按钮后，将出现下面的状态6、同时在控制台中将出现下面的提示7、点击“编辑该行”按钮后，将出现下面的状态，并输入该行的各个数据项目8、点击“保存该行”按钮后，将出现下面的状态9、同时在控制台中将出现下面的提示10、点击“删除该行”按钮后，将出现下面的状态11、点击其中的“确定”按钮后12、同时在控制台中将出现下面的提示。

ajax教程

ajax教程

ajax教程AJAX教程AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。

它通过在后台与服务器进行数据交换，而不需要重新加载整个页面，实现了在网页上更新部分内容的功能。

AJAX的核心是JavaScript和XML（现在也可以使用JSON）的组合。

它借助XMLHttpRequest对象来与服务器进行数据交换，将返回的数据动态显示在网页上。

AJAX的优势在于提升用户体验和减少网络流量。

通过使用AJAX，我们可以在不刷新整个页面的情况下获取数据并将其显示在页面上，这样能够实现更加快速、流畅的用户交互。

同时，由于只获取了需要的数据，而不是整个页面，所以也减少了不必要的网络流量，达到了节省带宽的效果。

在使用AJAX的过程中，需要注意一些问题。

首先，需要处理不同浏览器的兼容性问题，因为不同浏览器对于AJAX的实现方式有所区别。

为了解决这个问题，我们可以使用现代的JavaScript库，如jQuery，它提供了封装好的AJAX函数，使开发过程变得简单易用。

其次，由于AJAX是通过与服务器进行异步通信来获取数据的，所以需要处理服务器响应的时间和错误。

为了保证用户体验，我们可以使用loading动画或进度条来提示用户正在等待数据加载。

最后，AJAX的设计应该符合优雅降级和渐进增强的原则。

优雅降级是指当某个功能在用户的浏览器中不可用时，可以有一个替代方案，而不是完全让功能无法使用。

渐进增强是指从最基础的功能开始，逐步增加更高级的功能，以确保在各种环境下都能正常工作。

总结来说，AJAX是一种强大的技术，可以帮助我们创建出更加交互式和高效的网页应用程序。

正确认识和使用AJAX，可以提升用户体验，并减少网络流量消耗。

但在应用中需要注意兼容性、响应时间和错误处理，同时还要遵循优雅降级和渐进增强的原则。

以上是关于AJAX的简要介绍，希望对你有所帮助。

跟我学AJAX技术——应用AJAX技术实现Web网站的实时在线用户计数的应用示例(第二部分)

跟我学AJAX技术——应用AJAX技术实现Web网站的实时在线用户计数的应用示例(第二部分)

1.1跟我学AJAX技术——应用AJAX技术实现Web网站的实时在线用户计数的应用示例（第二部分）1.1.1测试本示例项目功能实现的效果1、部署该Web应用2、启动Tomcat服务器3、输入http://127.0.0.1:8080/webcrm/index.jsp并打开多个不同的浏览器来模拟多个不同的用户，系统将能够及时并准确地计数。

1.1.2进一步完善本示例1、解决用户离线时的及时更新的问题——方法之一：利用“在线注销”由于某个用户关闭浏览器窗口，浏览器没有通知服务器，从而在服务器端没有更新记数器。

（1）添加“在线注销”功能，但这样的方法的效果不是太理想。

<a onclick="window.close();"href="${pageContext.request.contextPath}/onLineUserInfoServlet.action?acti on=onLineLogout">在线注销</a>（2）实现的原理在该超链接中对后台发送用户离线的信息（浏览器窗口正要被关闭）,从而使得后台能够知道浏览器窗口现在正在关闭。

这样session的close事件能够正常地被捕获。

（3）修改OnLineUserInfoServlet程序package com.px1987.webcrm.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import com.px1987.webcrm.util.OnLineCounter;public class OnLineUserInfoServlet extends HttpServlet {public OnLineUserInfoServlet() {super();}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String requestAction=request.getParameter("action");if(requestAction.equals("showOnLineUserCounter")){doShowOnLineUserCounter(request,response);}else if(requestAction.equals("onLineLogout")){HttpSession session=request.getSession();session.invalidate(); //触发session被删除的事件}}public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String requestAction=request.getParameter("action");if(requestAction.equals("onLineLogout")){HttpSession session=request.getSession();session.invalidate(); //触发session被删除的事件}}public void doShowOnLineUserCounter(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=gb2312");PrintWriter out = response.getWriter();int onlineUserCounter=OnLineCounter.getOnLineUserCounter();out.print(onlineUserCounter);out.flush();out.close();}}2、再进行该Web并测试 http://127.0.0.1:8080/webcrm/index.jsp（1）点击其中的某个页面中的“在线注销”链接而退出后的结果（2）系统及时更新在线计数（3）而如果某个操作者直接关闭浏览器而退出系统后的结果——将不能及时更新在线计数3、解决用户离线时的及时更新的问题——方法之二：缩短会话超时时间（1）会话超时在HTTP协议中,客户机不再活跃时没有明确的终止信号.这意味着只有超时才是标识客户机不再活跃的唯一机制。

跟我学AJAX技术——应用“XML +XSLT +AJAX”组合技术实现无刷新的数据查询的Web应用示例

跟我学AJAX技术——应用“XML +XSLT +AJAX”组合技术实现无刷新的数据查询的Web应用示例

1.1跟我学AJAX技术——应用“XML +XSLT +AJAX”组合技术实现无刷新的数据查询的Web应用示例1.1.1构建相关的Web应用项目1、添加一个实现查询的请求页面searchBook.jsp（1）创建searchBook.jsp页面文件的过程示图（2）searchBook.jsp页面最终的代码示例<%@ page contentType="text/html; charset=gb2312" %><script language="javascript" src="searchBook.js"></script><form name="search" method="post" action="">请输入书名：<input id="bookkey" type="text" size="20" >&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="search" value="搜索" onclick=getBooks('bookkey')><div id="showBookInfo"></div></form>（3）searchBook.jsp页面预览示图2、添加searchBook.js程序文件（1）searchBook.js程序文件创建的过程示图（2）输入文件名称searchBook.js（3）searchBook.js程序的代码示例var httpRequest;function getHTTPRequestObject(){var httpRequestObject;if (window.XMLHttpRequest){ // Mozilla, Safari, ...httpRequestObject = new XMLHttpRequest();}else if (window.ActiveXObject){ // IEtry{httpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}{try{httpRequestObject= new ActiveXObject("Msxml2.XMLHTTP");}catch (e2){alert("您的浏览器有问题！");}}}return httpRequestObject;}//向searchbookservlet发送请求function getBooks(bookkey){httpRequest=getHTTPRequestObject();var url="searchbookservlet?bookkey="+document.getElementById(bookkey).value;httpRequest.onreadystatechange = showRetrunBooks;httpRequest.open("GET",url,true);httpRequest.send(null);}function showRetrunBooks() //将返回的数据显示在指定的节点下{if (httpRequest.readyState == 4){if (httpRequest.status == 200){var allBooksDomDocument =httpRequest.responseXML;var bookXSLDocument = new ActiveXObject('Microsoft.XMLDOM');bookXSLDocument.async=false;//直接加载bookDetail.xslbookXSLDocument.load("bookDetail.xsl");document.getElementById('showBookInfo').innerHTML=allBooksDomDocument.transformNode(bookXSLDocument);}else if(httpRequest.status == 404){document.getElementById('showBookInfo').innerHTML ="没有找到与所请求的文件相匹配的资源！";}else{document.getElementById('showBookInfo').innerHTML ="你所请求的页面发生异常，错误代码为："+httpRequest.status;}}else{document.getElementById('showBookInfo').innerHTML = "查找中，请稍等...";}}1.1.2添加bookDetail.xsl文件1、在项目中添加bookDetail.xsl文件（1）bookDetail.xsl文件创建的过程示图（2）bookDetail.xsl文件的代码示例<?xml version="1.0" encoding="gb2312" ?><xsl:stylesheet xmlns:xsl="/TR/WD-xsl"> <xsl:template match="/"><h2>您搜索的书籍如下：</h2><xsl:apply-templates select="Books"/></xsl:template><xsl:template match="Books"><Table border="1" width="80%"><TR><TD>书名</TD><TD>作者</TD><TD>出版社</TD><TD>价格</TD><TD>出版时间</TD><TD>内容简介</TD></TR><xsl:apply-templates select="Book"/> </Table></xsl:template><xsl:template match="Book"><TR><TD><xsl:value-of select="BookName"/> </TD><TD><xsl:value-of select="Writer"/></TD><TD><xsl:value-of select="Publisher"/></TD><TD><xsl:value-of select="Price"/></TD><TD><xsl:value-of select="PublishTime"/> </TD><TD><xsl:value-of select="Content"/></TD>></TR></xsl:template></xsl:stylesheet>1.1.3添加后台Java Servlet程序1、添加SearchBookServlet程序类（1）程序类名称为SearchBookServlet，程序包名称为com.px1987.webajax.servlet（2）该Servlet的名称为searchbookservlet（3）编程该Servlet中的doGet方法package com.px1987.webajax.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.jdom.*;import org.jdom.output.*;public class SearchBookServlet extends HttpServlet {Document xmlDoc=null;public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String bookName=request.getParameter("bookkey");//然后根据bookName查询数据库表以获得具体的结果数据，在此加以省略buildBooksXMLTree();response.setContentType("text/xml; charset=gb2312");response.setHeader("Cache-Control", "no-cache");PrintWriter out = response.getWriter();responseXMLDataToBrowser(out);out.close();}//利用JDom动态地创建XML的节点树public void buildBooksXMLTree(){treeRoot=new Element("Books");xmlDoc=new Document(treeRoot);/**ProcessingInstruction pi =new ProcessingInstruction("xml-stylesheet","href=\"bookDetail.xsl\" type=\"text/xsl\"");xmlDoc.addContent(pi);*/tagName=new Element("Book");treeRoot.addContent(tagName);//下面的数据实际应该来自于数据库表childTagName=new Element("BookName");childTagName.setText("AJAX技术与应用");tagName.addContent(childTagName);childTagName=new Element("Writer");childTagName.setText("张三");tagName.addContent(childTagName);childTagName=new Element("Publisher");childTagName.setText("电子工业出版社");tagName.addContent(childTagName);childTagName=new Element("Price");childTagName.setText("45.5");tagName.addContent(childTagName);childTagName=new Element("PublishTime");childTagName.setText("2007年12月");tagName.addContent(childTagName);childTagName=new Element("Content");childTagName.setText("本书是介绍AJAX技术与应用方面的图书");tagName.addContent(childTagName);}public void responseXMLDataToBrowser(PrintWriter out) throws IOException {Format format=Format.getCompactFormat();format.setEncoding("gb2312");format.setIndent(" ");XMLOutputter XMLOut=new XMLOutputter(format);// XMLOut.setNewlines(true); //设置回行标志XMLOut.output(xmlDoc,out);}}2、导入JDom的系统包文件（1）选择JDom的系统包文件（2）最终导入的结果示图3、部署和执行该Servlet4、启动Tomcat服务器1.1.4测试示例的应用效果1、执行本功能http://127.0.0.1:8080/AJAXWebApp/searchBook.jsp2、将出现下面的结果。