根据ajax发送数据，从servelt中读取xml数据并显示，实现查询、删除和分页
根据ajax发送数据，从servelt中读取xml数据并显示，实现查询、删除和分页
首先我们必须知道ajax发送的几个步骤，我们以以下解析的为例：当点击查询按钮的时候要从数据库中查询出所有数据，并用xml读取，在查询的同时实现分页，并且可以在右边操作的时候可以实现删除，通过删除所选项和删除全部选的，也就是批量删除，下面我们来实现吧！
首先从数据库中读取，用ajax的方式来请求并用xml读取显示在jsp页面，使用ajax要先创建xmlHttpRequest，为：
//创建xmlHttpRequest对象
function createXMLHttpRequest() {
var xmlHttp;
try {
//在firefox opera等非浏览器中运行的
xmlHttp = new XMLHttpRequest();
} catch (ex) {
try {
//在IE中运行 运行的是第二个版本
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
} catch (e) {
// 在IE中运行第一个版本
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
所使用的html为：（以下的都用此html）
<body>
<div align="center">
<h1>
员工信息
</h1>
<br />
<input type="button" value="查询员工" id="btnEmp" />
<br />
<br />
<br />
<div id="list">
<table id="empList" border="1px">
<thead>
<tr>
<th>
序号
</th>
<th>
姓名
</th>
<th>
性别
</th>
<th>
年龄
</th>
<th>
出生日期
</th>
<th>
薪资
</th>
<th>
<input type="checkbox" id="chk" />
<input type="button" value="删除所选项 " id="delBtn" />
</th>
</tr>
</thead>
<tbody id="emps"></tbody>
</table>
</div>
<div id="pages">
</div>
</div>
</body>
当点击value为查询员工，id为btnEmp时，触发的事件，先创建xmlHttpRequest对象，并通过ajax来传给 servlet的几个步骤为：
第一步：在jsp页面开始创建xmlHttpRequest对象，并向servlet发送请求
Window.onload = function(){
//第一步：初始化xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
//第二步：为请求设置参数
xmlHttp.open("GET", "./delEmployeeServlet.do?ids=" + ids
+ "&timeStamp=" + new Date().getTime(), true);
//第三步：发送请求
xmlHttp.send(null);
}
第二步：查询所有并响应到jsp页面 EmployeeServlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
private EmployeeService employeeServlet = new EmployeeServiceImpl();
//设置编码字符集
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
List<Employee> entities = employeeServlet.findAll();
PrintWriter out = response.getWriter();
out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.println("<emps>");
for (int i = 0; i < entities.size(); i++) {
Employee entity = entities.get(i);
out.println("<emp id='" + entity.getId() + "'>");
out.println("<name>" + entity.getHrName() + "</name>");
out.println("<sex>" + entity.getHrSex() + "</sex>");
out.println("<age>" + entity.getHrAge() + "</age>");
out.println("<birth>" + entity.getHrBirth() + "</birth>");
out.println("<salary>" + entity.getHrSalary() + "</salary>");
out.println("</emp>");
}
out.println("</emps>");
out.flush();
out.close();
}
第三步：响应到jsp页面
//得到向tBody里面添加的节点
var empsHtmlNodes = document.getElementById("emps");
//获取到按钮的节点
var btnEmpNode = document.getElementById("btnEmp");
//当点击按钮的时候触发的事件
btnEmpNode.onclick = function() {
//每次点击的时候都会触发，所以要清除，只剩一次点击就可以了，此方法看第四步的上面
clearNodes(empsHtmlNodes);
//ajax回应后的信息调用onreadystatechange这个属性
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//获取xmlDocuemnt
var xmlDoc = xmlHttp.responseXML;
//获取xmlDoc中标签为emp的
var emps = xmlDoc.getElementsByTagName("emp");
//通过循环得到emp下的属性
for ( var i = 0; i < emps.length; i++) {
var empsNode = emps[i];
//创建tr
var trNode = document.createElement("tr");
//创建td
var tdNode1 = document.createElement("td");
//把获得的属性发到td中 tdNode1.appendChild(document.createTextNode(emps[i]
.getAttribute("id")));
//把td放到tr中
trNode.appendChild(tdNode1);
//获取emp下的子标签的属性
var empElemtNode = empsNode.childNodes;
//通过循环获得文本并发到tr中
for ( var j = 0; j < empElemtNode.length; j++) {
if (empElemtNode[j].nodeType == 1) {
//创建动态增加的属性的td
var tdNode2 = document.createElement("td");
//获取元素节点下面的text value
var textValue = empElemtNode[j].firstChild.nodeValue;
//alert(textValue);
//把获取到的值放到td2
tdNode2.appendChild(document
.createTextNode(textValue));
trNode.appendChild(tdNode2);
}
}
}
//调用分页的实现
pagesNode(pagesHtmlNode, rootNode);
}
}
}
xmlHttp.open("GET", "./employeeServlet.do?timeStamp="
+ new Date().getTime(), true);
xmlHttp.send(null);
}
//清空节点的方法
function clearNodes(node) {
var lens = node.childNodes.length;
for ( var i = 0; i < lens; i++) {
node.removeChild(node.childNodes[0]);
}
}
第四步：实现分页，首先写一下分页类 Page.java
package cn.csdn.hr.HibernateUtil;
import java.util.List;
public class Page {
// 封装分页信息
// 设置每页显示的记录数
public static final Integer PAGESIZE = 3;
private Integer nowPage;// 当前页
private Integer countPage;// /总页数
private Integer countSize;// 总记录数
private List datas;// 当前页的信息
public Page() {
}
public Page(String className, Integer nowPage) {
this.nowPage = nowPage;
// 先获取总记录数
this.setCountSize(HibernateUtil.getSession().createQuery(
"from " + className).list().size());
// 总页数
this.countPage = this.countSize % PAGESIZE == 0 ? this.countSize
/ PAGESIZE : this.countSize / PAGESIZE + 1;
// 获取当前页的信息
this.setDatas(HibernateUtil.getSession().createQuery(
"from " + className).setFirstResult(
(this.nowPage - 1) * Page.PAGESIZE).setMaxResults(PAGESIZE)
.list());
}
public Integer getNowPage() {
return nowPage;
}
public void setNowPage(Integer nowPage) {
this.nowPage = nowPage;
}
public Integer getCountPage() {
return countPage;
}
public void setCountPage(Integer countPage) {
this.countPage = countPage;
}
public Integer getCountSize() {
return countSize;
}
public void setCountSize(Integer countSize) {
this.countSize = countSize;
}
public List getDatas() {
return datas;
}
public void setDatas(List datas) {
this.datas = datas;
}
public static Integer getPagesize() {
return PAGESIZE;
}
public static void main(String[] args) {
Page page = new Page("Employee", 2);
System.out.println(page.getCountPage() + " " + page.getCountSize());
}
}
从Page.java类中可以得到所有的属性和想得到的当前页的信息等
当在查询的时候就应该分页，所以以上的servlet有一下变动，为：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
String npage = request.getParameter("nowPage");
System.out.println(npage);
int nowPage = 1;
if ("".equals(npage) || npage == null) {
System.out.println("不能操作");
} else {
nowPage = Integer.parseInt(npage);
}
Page page = new Page("Employee", nowPage);
List<Employee> entities = page.getDatas();
PrintWriter out = response.getWriter();
out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.println("<emps nowPage='" + page.getNowPage() + "' countPage='"
+ page.getCountPage() + "' countSize='" + page.getCountSize()
+ "'>");
for (int i = 0; i < entities.size(); i++) {
Employee entity = entities.get(i);
out.println("<emp id='" + entity.getId() + "'>");
out.println("<name>" + entity.getHrName() + "</name>");
out.println("<sex>" + entity.getHrSex() + "</sex>");
out.println("<age>" + entity.getHrAge() + "</age>");
out.println("<birth>" + entity.getHrBirth() + "</birth>");
out.println("<salary>" + entity.getHrSalary() + "</salary>");
out.println("</emp>");
}
out.println("</emps>");
out.flush();
out.close();
}
从servlet中可以看出得到了当前页信息，并且得到了当前页所需要的：
nowPage(当前页),countPage(总页数),总记录数(countSize)，并转换为了xml数据
第五步：读取xml文件中的属性并分页
当我们实现分页的时候必须要创建首页，下一页，上一页，末页，在创建的时候因为在window加载的时候就查询，并且在每一次创建要重复（每一个上下页之后都应该有），所以把它提取到一个方法里面，传几个需要的参数即可：方法为：
//分页的实现
var pagesHtmlNode = document.getElementById("pages");
var rootNodes = xmlDoc.documentElement;
function pagesNode(pagesHtmlNode, rootNode) {
///获取当前页
var nowPage = rootNode.getAttribute("nowPage");
//获取总页数
var countPage = rootNode.getAttribute("countPage");
//获取总记录数
var countSize = rootNode.getAttribute("countSize");
var MsgNode = document.createTextNode("当前是:" + nowPage + "页，总页数为："
+ countPage + ",总共:" + countSize + "条记录 ");
//清空节点
clearNodes(pagesHtmlNode);
var firstPage = document.createElement("a");
firstPage.setAttribute("href", "#");
firstPage.appendChild(document.createTextNode("首页"));
firstPage.onclick = function() {
nowPage = 1;
//查询 当前页信息
getPageInfo(nowPage);
}
pagesHtmlNode.appendChild(firstPage);
var backPage = document.createElement("a");
backPage.setAttribute("href", "#");
backPage.appendChild(document.createTextNode("上一页"));
backPage.onclick = function() {
nowPage = eval(nowPage + "-" + 1);
if (nowPage <= 1) {
nowPage = 1;
}
//查询 当前页信息
getPageInfo(nowPage);
}
pagesHtmlNode.appendChild(backPage);
var nextPage = document.createElement("a");
nextPage.setAttribute("href", "#");
nextPage.appendChild(document.createTextNode("下一页"));
nextPage.onclick = function() {
//eval使加号变成+
nowPage = eval(nowPage + "+" + 1);
if (nowPage >= countPage) {
nowPage = countPage;
}
//查询 当前页信息
getPageInfo(nowPage);
}
pagesHtmlNode.appendChild(nextPage);
var lastPage = document.createElement("a");
lastPage.setAttribute("href", "#");
lastPage.appendChild(document.createTextNode("末页"));
lastPage.onclick = function() {
nowPage = countPage;
//查询 当前页信息
getPageInfo(nowPage);
}
pagesHtmlNode.appendChild(lastPage);
pagesHtmlNode.appendChild(MsgNode);
}
在上下页之后要查询出所指定的当前有对应的信息，也封装到一个方法中，用来方便调用
//分页代码
function getPageInfo(nowPage) {
/*//修改chksHtmlNode的默认值
var chksHtmlNode = document.getElementById("chk");
chksHtmlNode.checked = null;*/
//修改chksHtmlNode 为 默认值
var chksHtmlNode = document.getElementById("chk");
chksHtmlNode.checked = null;
var pagesHtmlNode = document.getElementById("pages");
var empsHtmlNodes = document.getElementById("emps");
//第一步：初始化xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
clearNodes(empsHtmlNodes);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//获取xmlDocuemnt
var xmlDoc = xmlHttp.responseXML;
//获取跟标签
var rootNodes = xmlDoc.documentElement;
var emps = xmlDoc.getElementsByTagName("emp");
for ( var i = 0; i < emps.length; i++) {
var empsNode = emps[i];
//设置id在td中
var trNode = document.createElement("tr");
var tdNode1 = document.createElement("td");
tdNode1.appendChild(document.createTextNode(emps[i]
.getAttribute("id")));
trNode.appendChild(tdNode1);
var empElemtNode = empsNode.childNodes;
for ( var j = 0; j < empElemtNode.length; j++) {
if (empElemtNode[j].nodeType == 1) {
//获取元素节点下面的text value
var textValue = empElemtNode[j].firstChild.nodeValue;
//创建动态增加的属性的td
var tdNode2 = document.createElement("td");
//把获取到的值放到td2
tdNode2.appendChild(document
.createTextNode(textValue));
trNode.appendChild(tdNode2);
}
}
var delchk = document.createElement("input");
delchk.setAttribute("type", "checkbox");
delchk.setAttribute("name", "delchk");
delchk.setAttribute("value", emps[i].getAttribute("id"));
trNode.appendChild(delchk);
empsHtmlNodes.appendChild(trNode);
}
//调用分页创建分页相关的node节点对象
pagesNode(pagesHtmlNode, rootNode);
}
}
}
xmlHttp.open("GET", "./employeeServlet.do?nowPage=" + nowPage
+ "&timeStamp=" + new Date().getTime(), true);
xmlHttp.send(null);
}
注：在写时候千万要注意别写错代码了，受不了，错了一个，找了半天
删除的操作
删除的时候可以在右上角写上复选框，当点击的时候可以全选和全不选，在向表格中插入数据的时候插入复选框，代码为：
var delchk = document.createElement("input");
delchk.setAttribute("type", "checkbox");
delchk.setAttribute("name", "delchk");
delchk.setAttribute("value", emps[i].getAttribute("id"));
trNode.appendChild(delchk);
empsHtmlNodes.appendChild(trNode);
当点击chk获取的节点的时候，实现全选和全不选
//实现全选和反选的效果
var chksHtmlNode = document.getElementById("chk");
//注册事件
chksHtmlNode.onclick = function() {
var delchksNode = document.getElementsByName("delchk");
if (chksHtmlNode.checked) {
for ( var i = 0; i < delchksNode.length; i++) {
delchksNode[i].checked = "checked";
}
} else {
for ( var i = 0; i < delchksNode.length; i++) {
delchksNode[i].checked = null;
}
}
}
当点击删除按钮的时候要请求servlet层，通过ajax请求，这里提到了批量删除，用字符串拼接，来发送：
//实现删除
var delHtmlBtn = document.getElementById("delBtn");
//点击删除的时候 发送ajax请求
delHtmlBtn.onclick = function() {
var ids = "";
var delchksNode = document.getElementsByName("delchk");
for ( var i = 0; i < delchksNode.length; i++) {
if (delchksNode[i].checked) {
ids += delchksNode[i].value + ",";
}
}
//用ajax来发送请求
//第一步：初始化xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
clearNodes(empsHtmlNodes);
xmlHttp.onreadystatechange = function() {
//alert("ff");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//获取xmlDocuemnt
var xmlDoc = xmlHttp.responseXML;
//获取跟标签
var rootNodes = xmlDoc.documentElement;
var emps = xmlDoc.getElementsByTagName("emp");
for ( var i = 0; i < emps.length; i++) {
var empsNode = emps[i];
//设置id在td中
var trNode = document.createElement("tr");
var tdNode1 = document.createElement("td");
tdNode1.appendChild(document.createTextNode(emps[i]
.getAttribute("id")));
trNode.appendChild(tdNode1);
//alert(emps[i].getAttribute("id"));
var empElemtNode = empsNode.childNodes;
for ( var j = 0; j < empElemtNode.length; j++) {
if (empElemtNode[j].nodeType == 1) {
//获取元素节点下面的text value
var textValue = empElemtNode[j].firstChild.nodeValue;
//alert(textValue);
//创建动态增加的属性的td
var tdNode2 = document.createElement("td");
//把获取到的值放到td2
tdNode2.appendChild(document
.createTextNode(textValue));
trNode.appendChild(tdNode2);
}
}
empsHtmlNodes.appendChild(trNode);
}
//调用分页创建分页相关的node节点对象
pagesNode(pagesHtmlNode, rootNode);
}
}
}
xmlHttp.open("GET", "./delEmployeeServlet.do?ids=" + ids
+ "&timeStamp=" + new Date().getTime(), true);
xmlHttp.send(null);
}
}
获取的servelt为：
private EmployeeService employeeService = new EmployeeServiceImpl();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String ids = request.getParameter("ids");
System.out.println(ids+"=============");
String value[] = ids.split(",");
for(int i = 0;i<value.length;i++){
Employee entity = employeeService.findById(Integer.parseInt(value[i]));
employeeService.remove(entity);
}
request.getRequestDispatcher("/employeeServlet.do").forward(request, response);
}
整体的jsp的代码为:
<%@ page language="java" import="java.util.*,cn.csdn.hr.HibernateUtil.*"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'employeeList.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<div align="center">
<h1>
员工信息
</h1>
<br />
<input type="button" value="查询员工" id="btnEmp" />
<br />
<br />
<br />
<div id="list">
<table id="empList" border="1px">
<thead>
<tr>
<th>
序号
</th>
<th>
姓名
</th>
<th>
性别
</th>
<th>
年龄
</th>
<th>
出生日期
</th>
<th>
薪资
</th>
<th>
<input type="checkbox" id="chk" />
<input type="button" value="删除所选项 " id="delBtn" />
</th>
</tr>
</thead>
<tbody id="emps"></tbody>
</table>
</div>
<div id="pages">
</div>
</div>
</body>
</html>
<!--ajax异步请求 从传过来的 解析成xml文件并在该页面上显示-->
<scripttype="text/javascript">
//页面加载并调用匿名函数
window.onload = function() {
//实现删除
var delHtmlBtn = document.getElementById("delBtn");
//点击删除的时候 发送ajax请求
delHtmlBtn.onclick = function() {
var ids = "";
var delchksNode = document.getElementsByName("delchk");
for ( var i = 0; i < delchksNode.length; i++) {
if (delchksNode[i].checked) {
ids += delchksNode[i].value + ",";
}
}
//用ajax来发送请求
//第一步：初始化xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
clearNodes(empsHtmlNodes);
xmlHttp.onreadystatechange = function() {
//alert("ff");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//获取xmlDocuemnt
var xmlDoc = xmlHttp.responseXML;
//获取跟标签
var rootNodes = xmlDoc.documentElement;
var emps = xmlDoc.getElementsByTagName("emp");
for ( var i = 0; i < emps.length; i++) {
var empsNode = emps[i];
//设置id在td中
var trNode = document.createElement("tr");
var tdNode1 = document.createElement("td");
tdNode1.appendChild(document.createTextNode(emps[i]
.getAttribute("id")));
trNode.appendChild(tdNode1);
//alert(emps[i].getAttribute("id"));
var empElemtNode = empsNode.childNodes;
for ( var j = 0; j < empElemtNode.length; j++) {
if (empElemtNode[j].nodeType == 1) {
//获取元素节点下面的text value
var textValue = empElemtNode[j].firstChild.nodeValue;
//alert(textValue);
//创建动态增加的属性的td
var tdNode2 = document.createElement("td");
//把获取到的值放到td2
tdNode2.appendChild(document
.createTextNode(textValue));
trNode.appendChild(tdNode2);
}
}
empsHtmlNodes.appendChild(trNode);
}
//调用分页创建分页相关的node节点对象
pagesNode(pagesHtmlNode, rootNode);
}
}
}
xmlHttp.open("GET", "./delEmployeeServlet.do?ids=" + ids
+ "&timeStamp=" + new Date().getTime(), true);
xmlHttp.send(null);
}
//实现全选和反选的效果
var chksHtmlNode = document.getElementById("chk");
//注册事件
chksHtmlNode.onclick = function() {
var delchksNode = document.getElementsByName("delchk");
if (chksHtmlNode.checked) {
for ( var i = 0; i < delchksNode.length; i++) {
delchksNode[i].checked = "checked";
}
} else {
for ( var i = 0; i < delchksNode.length; i++) {
delchksNode[i].checked = null;
}
}
}
var pagesHtmlNode = document.getElementById("pages");
var empsHtmlNodes = document.getElementById("emps");
//第一步：初始化xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
//alert(xmlHttp);
var btnEmpNode = document.getElementById("btnEmp");
btnEmpNode.onclick = function() {
clearNodes(empsHtmlNodes);
xmlHttp.onreadystatechange = function() {
//alert("ff");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//alert("================");
//获取xmlDocuemnt
var xmlDoc = xmlHttp.responseXML;
//alert(xmlDoc);
//获取跟标签
var rootNode = xmlDoc.documentElement;
var emps = xmlDoc.getElementsByTagName("emp");
for ( var i = 0; i < emps.length; i++) {
var empsNode = emps[i];
//设置id在td中
var trNode = document.createElement("tr");
var tdNode1 = document.createElement("td");
tdNode1.appendChild(document.createTextNode(emps[i]
.getAttribute("id")));
trNode.appendChild(tdNode1);
var empElemtNode = empsNode.childNodes;
for ( var j = 0; j < empElemtNode.length; j++) {
if (empElemtNode[j].nodeType == 1) {
//创建动态增加的属性的td
var tdNode2 = document.createElement("td");
//获取元素节点下面的text value
var textValue = empElemtNode[j].firstChild.nodeValue;
//alert(textValue);
//把获取到的值放到td2
tdNode2.appendChild(document
.createTextNode(textValue));
trNode.appendChild(tdNode2);
}
}
var delchk = document.createElement("input");
delchk.setAttribute("type", "checkbox");
delchk.setAttribute("name", "delchk");
delchk
.setAttribute("value", emps[i]
.getAttribute("id"));
trNode.appendChild(delchk);
empsHtmlNodes.appendChild(trNode);
}
//调用分页的实现
pagesNode(pagesHtmlNode, rootNode);
}
}
}
xmlHttp.open("GET", "./employeeServlet.do?timeStamp="
+ new Date().getTime(), true);
xmlHttp.send(null);
}
}
//分页的实现
function pagesNode(pagesHtmlNode, rootNode) {
///获取当前页
var nowPage = rootNode.getAttribute("nowPage");
//获取总页数
var countPage = rootNode.getAttribute("countPage");
//获取总记录数
var countSize = rootNode.getAttribute("countSize");
var MsgNode = document.createTextNode("当前是:" + nowPage + "页，总页数为："
+ countPage + ",总共:" + countSize + "条记录 ");
//清空节点
clearNodes(pagesHtmlNode);
var firstPage = document.createElement("a");
firstPage.setAttribute("href", "#");
firstPage.appendChild(document.createTextNode("首页"));
firstPage.onclick = function() {
nowPage = 1;
//查询 当前页信息
getPageInfo(nowPage);
}
pagesHtmlNode.appendChild(firstPage);
var backPage = document.createElement("a");
backPage.setAttribute("href", "#");
backPage.appendChild(document.createTextNode("上一页"));
backPage.onclick = function() {
nowPage = eval(nowPage + "-" + 1);
if (nowPage <= 1) {
nowPage = 1;
}
//查询 当前页信息
getPageInfo(nowPage);
}
pagesHtmlNode.appendChild(backPage);
var nextPage = document.createElement("a");
nextPage.setAttribute("href", "#");
nextPage.appendChild(document.createTextNode("下一页"));
nextPage.onclick = function() {
//eval使加号变成+
nowPage = eval(nowPage + "+" + 1);
if (nowPage >= countPage) {
nowPage = countPage;
}
//查询 当前页信息
getPageInfo(nowPage);
}
pagesHtmlNode.appendChild(nextPage);
var lastPage = document.createElement("a");
lastPage.setAttribute("href", "#");
lastPage.appendChild(document.createTextNode("末页"));
lastPage.onclick = function() {
nowPage = countPage;
//查询 当前页信息
getPageInfo(nowPage);
}
pagesHtmlNode.appendChild(lastPage);
pagesHtmlNode.appendChild(MsgNode);
}
//清空
function clearNodes(node) {
var lens = node.childNodes.length;
for ( var i = 0; i < lens; i++) {
node.removeChild(node.childNodes[0]);
}
}
//创建xmlHttpRequest对象
function createXMLHttpRequest() {
var xmlHttp;
try {
//在firefox opera等非浏览器中运行的
xmlHttp = new XMLHttpRequest();
} catch (ex) {
try {
//在IE中运行 运行的是第二个版本
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
} catch (e) {
// 在IE中运行第一个版本
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//分页代码
function getPageInfo(nowPage) {
/*//修改chksHtmlNode的默认值
var chksHtmlNode = document.getElementById("chk");
chksHtmlNode.checked = null;*/
//修改chksHtmlNode 为 默认值
var chksHtmlNode = document.getElementById("chk");
chksHtmlNode.checked = null;
var pagesHtmlNode = document.getElementById("pages");
var empsHtmlNodes = document.getElementById("emps");
//第一步：初始化xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
clearNodes(empsHtmlNodes);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//获取xmlDocuemnt
var xmlDoc = xmlHttp.responseXML;
//获取跟标签
var rootNodes = xmlDoc.documentElement;
var emps = xmlDoc.getElementsByTagName("emp");
for ( var i = 0; i < emps.length; i++) {
var empsNode = emps[i];
//设置id在td中
var trNode = document.createElement("tr");
var tdNode1 = document.createElement("td");
tdNode1.appendChild(document.createTextNode(emps[i]
.getAttribute("id")));
trNode.appendChild(tdNode1);
var empElemtNode = empsNode.childNodes;
for ( var j = 0; j < empElemtNode.length; j++) {
if (empElemtNode[j].nodeType == 1) {
//获取元素节点下面的text value
var textValue = empElemtNode[j].firstChild.nodeValue;
//创建动态增加的属性的td
var tdNode2 = document.createElement("td");
//把获取到的值放到td2
tdNode2.appendChild(document
.createTextNode(textValue));
trNode.appendChild(tdNode2);
}
}
var delchk = document.createElement("input");
delchk.setAttribute("type", "checkbox");
delchk.setAttribute("name", "delchk");
delchk.setAttribute("value", emps[i].getAttribute("id"));
trNode.appendChild(delchk);
empsHtmlNodes.appendChild(trNode);
}
//调用分页创建分页相关的node节点对象
pagesNode(pagesHtmlNode, rootNode);
}
}
}
xmlHttp.open("GET", "./employeeServlet.do?nowPage=" + nowPage
+ "&timeStamp=" + new Date().getTime(), true);
xmlHttp.send(null);
}
</script>
总结：其实抓住了分页的根本就可以写出来，中间出现的问题必须要解决，其中全选和反选也是一个知识点…