根據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>
總結：其實抓住了分頁的根本就可以寫出來，中間出現的問題必須要解決，其中全選和反選也是一個知識點…