Ajax無刷新分頁
技術重點主要是XML文檔的讀寫操做。由於前臺頁面與後臺數據分頁是使用XML文檔進行交互的。本實例將主要介紹DOM技術如何生成XML文檔。javascript
代碼以下：java
try {
// 建立XML文檔構建工廠
DocumentBuilderFactory builderFactory = DocumentBuilderFactory.newInstance();
// 建立XML文檔構建對象
DocumentBuilder documentBuilder = builderFactory.newDocumentBuilder();
doc = documentBuilder.newDocument(); // 建立文檔對象
} catch (ParserConfigurationException ex) {
Logger.getLogger(AjaxFenyeService.class.getName()).log(Level.SEVERE, null, ex);
}
Element createElement(String tagName)
tagName：節點的名稱。
appendChild(Node newChild)
newChild：Node接口的實現對象，Element類實現了Node接口，因此Element類的實例對象能夠直接做爲該方法的參數。
Element root = doc.createElement("products"); // 建立XML的根節點
doc.appendChild(root); // 添加根節點到xml文檔
PageArgs pageArgs = dao.getPageArgs(); // 獲取數據分頁參數
pageArgs.setPageCount(page); // 設置當前分頁頁碼
Element pageArg = doc.createElement("pageArg"); // 建立分頁信息節點
root.appendChild(pageArg); // 添加分頁信息到根節點
Element pageNumElement = doc.createElement("pageNum");// 添加當前頁碼參數
pageArg.appendChild(pageNumElement);
public DOMSource(Node node)
node：該參數是DOM節點對象，它做爲輸入源。
public abstract void transform(Source xmlSource,
Result outputTarget)
xmlSource：DOM數據源
outputTarget：保存XML文檔的輸出流
// 建立XML轉換器
Transformer tf = TransformerFactory.newInstance().newTransformer();
OutputStream out = resp.getOutputStream(); // 獲取應答輸出流
DOMSource ds = new DOMSource(doc); // 建立XML數據源
StreamResult stream = new StreamResult(out);
tf.setOutputProperty(OutputKeys.INDENT, "yes"); // 縮進XML文檔格式
tf.transform(ds, stream); // 把數據輸出到瀏覽器
out.close();node
*******編寫index.jsp首頁文件，在首頁文件中添加<label>標籤，設置該標籤的id屬性爲「productList」，它用於保存分頁數據。關鍵代碼以下：
<body onload="requestPage(1)">
<h1>明日科技部分圖書介紹列表</h1>
<label id="productList"></label>
</body>sql
********在頁面中編寫JavaScript腳本，建立requestPage()方法，該方法用於建立請求對象，向服務器發送獲取分頁數據的請求，同時設置服務器返回的數據由readPage()方法處理。關鍵代碼以下。
<script type="text/javascript">
var xmlHttp;
function requestPage(page){
//初始化對象併發出XMLHttpRequest請求
if (window.XMLHttpRequest) { // Mozilla或其餘除IE之外的瀏覽器
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE瀏覽器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!xmlHttp) {
alert("不能建立XMLHTTP實例!");
return false;
}
xmlHttp.onreadystatechange = readPage; // readPage()方法處理服務器響應
xmlHttp.open("GET", "fenyeService?page="+page,true); // 發送請求對象
xmlHttp.send(null);
}數據庫
*******編寫腳本的readPage()方法，服務器返回的分頁數據是XML文檔格式，該方法在服務器正確返回分頁數據時解析XML文檔將指定頁面數據和分頁參數信息添加到頁面的<label>標籤中，這樣就只更新<label>標籤中的數據，而不用從新加載整個頁面。關鍵代碼以下
function readPage(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var doc=xmlHttp.responseXML; // 接收XML文檔對象
var pageNum = doc.getElementsByTagName("pageNum")[0].firstChild.data; // 獲取當前頁碼參數
var maxPage= doc.getElementsByTagName("maxPage")[0].firstChild.data; // 獲取最大頁碼參數
var prePage = doc.getElementsByTagName("prePage")[0].firstChild.data; // 獲取上一頁的頁碼參數
var nextPage = doc.getElementsByTagName("nextPage")[0].firstChild.data; // 獲取下一頁頁碼參數
var products = doc.getElementsByTagName("product"); // 獲取全部分頁數據
var innerHTML = ""; // 定義插入<label>標籤的數據
if((products!=null)&&(products.length!=0)) {
innerHTML+="<table border=1 width='600'>"; // 插入表頭信息
innerHTML+="<tr align='center'><th>ISBN</th><th>書名</th>";
innerHTML+="<th>做者</th><th>出版社</th>";
innerHTML+="<th>單價</th><th>出版日期</th></tr>";
for(var i=0;i<products.length;i++) { // 遍歷XML文檔的全部圖書
var product = products[i];
var isbn = product.childNodes[0].firstChild.data;
var bookName = product.childNodes[1].firstChild.data;
var writer = product.childNodes[2].firstChild.data;
var publishing = product.childNodes[3].firstChild.data;
var price = product.childNodes[4].firstChild.data;
var date = product.childNodes[5].firstChild.data;
innerHTML += "<tr>";
innerHTML += "<td>"+isbn+"</td>"; // 把圖書信息插入表格
innerHTML += "<td>"+bookName+"</td>";
innerHTML += "<td>"+writer+"</td>";
innerHTML += "<td>"+publishing+"</td>";
innerHTML += "<td>"+price+"</td>";
innerHTML += "<td>"+date+"</td>";
innerHTML += "</tr>";
}
innerHTML+="<tr><td align='center' colspan='6'>"; // 添加分頁超連接
innerHTML += "<a href=\"javascript:void(0)\" onClick=\"requestPage(1)\">第一頁</a>";
innerHTML += "<a href=\"javascript:void(0)\" onClick=\"requestPage("+prePage+")\">上一頁</a>";
innerHTML += pageNum+"/"+maxPage;
innerHTML += "<a href=\"javascript:void(0)\" onClick=\"requestPage("+nextPage+")\">下一頁</a>";
innerHTML +="<a href=\"javascript:void(0)\" onClick=\"requestPage("+maxPage+")\">尾頁</a>";
innerHTML+="</td></tr>\n";
innerHTML+="</table>\n";
}else {
innerHTML += "暫時沒有任何數據";
}
document.getElementById("productList").innerHTML = innerHTML;
} else {
alert('您請求的頁面發現錯誤');
}
}
}瀏覽器
********編寫AjaxFenyeService類，它是處理分頁請求的Servlet控制器，該類重寫Servlet的doGet()方法，處理分頁請求，該方法首先建立XML文檔對象，從數據庫讀取分頁參數信息並添加到XML文檔對象的根節點中。關鍵代碼以下
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
// 建立XML文檔構建工廠
DocumentBuilderFactory builderFactory = DocumentBuilderFactory.newInstance();
// 建立XML文檔構建對象
DocumentBuilder documentBuilder = builderFactory.newDocumentBuilder();
doc = documentBuilder.newDocument(); // 建立文檔對象
} catch (ParserConfigurationException ex) {
Logger.getLogger(AjaxFenyeService.class.getName()).log(Level.SEVERE, null, ex);
}
List books = null; // 建立數據集合
resp.setContentType("application/xml"); // 設置應答類型爲XML
// 獲取請求對象的分頁參數
int page = ServletRequestUtils.getIntParameter(req, "page", 1);
Element root = doc.createElement("products"); // 建立XML的根節點
doc.appendChild(root); // 添加根節點到xml文檔
PageArgs pageArgs = dao.getPageArgs(); // 獲取數據分頁參數
pageArgs.setPageCount(page); // 設置當前分頁頁碼
Element pageArg = doc.createElement("pageArg"); // 建立分頁信息節點
root.appendChild(pageArg); // 添加分頁信息到根節點
Element pageNumElement = doc.createElement("pageNum"); // 添加當前頁碼參數
pageArg.appendChild(pageNumElement);
Text pageNumValue = doc.createTextNode(pageArgs.getPageNum() + "");
pageNumElement.appendChild(pageNumValue);
// 添加最大頁碼參數
Element maxPageElement = doc.createElement("maxPage");
pageArg.appendChild(maxPageElement);
Text maxPageValue = doc.createTextNode(pageArgs.getMaxPage() + "");
maxPageElement.appendChild(maxPageValue);
// 添加下一頁的頁碼參數
Element nextPageElement = doc.createElement("nextPage");
pageArg.appendChild(nextPageElement);
Text nextPageValue = doc.createTextNode(pageArgs.getNextPage() + "");
nextPageElement.appendChild(nextPageValue);
// 添加上一頁的頁碼參數
Element prePageElement = doc.createElement("prePage");
pageArg.appendChild(prePageElement);
Text prePageValue = doc.createTextNode(pageArgs.getPrePage() + "");
prePageElement.appendChild(prePageValue);
try { // 添加圖書節點
books = dao.getProducts(page);
for (Object pro : books) {
FenyeBean fenyeBean = (FenyeBean) pro;
Element product = doc.createElement("product");
root.appendChild(product);
Element isbnNode = doc.createElement("ISBN"); // 建立ISBN節點
product.appendChild(isbnNode);
Text isbnValue = doc.createTextNode(fenyeBean.getIsbn());
isbnNode.appendChild(isbnValue);
Element nameNode = doc.createElement("BookName"); // 建立bookname節點
product.appendChild(nameNode);
Text nameValue = doc.createTextNode(fenyeBean.getBookName());
nameNode.appendChild(nameValue);
Element writerNode = doc.createElement("Writer"); // 建立Writer節點
product.appendChild(writerNode);
Text writerValue = doc.createTextNode(fenyeBean.getWriter());
writerNode.appendChild(writerValue);
Element pbNode = doc.createElement("Publishing"); // 建立publishing節點
product.appendChild(pbNode);
Text pbValue = doc.createTextNode(fenyeBean.getPublishing());
pbNode.appendChild(pbValue);
Element priceNode = doc.createElement("Price"); // 建立Price節點
product.appendChild(priceNode);
Text priceValue = doc.createTextNode(fenyeBean.getPrice()+"");
priceNode.appendChild(priceValue);
Element dateNode = doc.createElement("Date"); // 建立Date節點
product.appendChild(dateNode);
Text dateValue = doc.createTextNode(fenyeBean.getDate().toLocaleString());
dateNode.appendChild(dateValue);
}
// 建立XML轉換器
Transformer tf = TransformerFactory.newInstance().newTransformer();
OutputStream out = resp.getOutputStream(); // 獲取應答輸出流
DOMSource ds = new DOMSource(doc); // 建立XML數據源
StreamResult stream = new StreamResult(out);
tf.setOutputProperty(OutputKeys.INDENT, "yes"); // 縮進XML文檔格式
tf.transform(ds, stream); // 把數據輸出到瀏覽器
out.close();
} catch (Exception ex) {
ex.printStackTrace();
}
}
public class PageArgs {
private int pageNum; // 當前頁碼
private int pageSize; // 頁面大小
private long maxPage; // 最大頁數
private int prePage; // 上一頁的頁碼
private int nextPage; // 下一頁的頁碼
public void setPageCount(int pageNum) {
this.pageNum = pageNum;
prePage=pageNum-1<=1?1:pageNum-1; // 設置上一頁的頁碼
// 設置下一頁的頁碼
nextPage=(int) (pageNum + 1 >= maxPage ? maxPage : pageNum + 1);
}
……省略部分代碼
}
public PageArgs getPageArgs() {
PageArgs pag = null; // 聲明分頁參數對象
Statement stmt = null;
ResultSet rs = null;
Connection conn = getConn(); // 鏈接數據庫
try {
// 聲明查詢總數據量的SQL語句
String sql = "SELECT count(*) FROM tb_hibernatefenye";
stmt = conn.createStatement();
rs = stmt.executeQuery(sql); // 執行SQL查詢
if (rs.next()) {
int count = rs.getInt(1); // 獲取查詢結果
pag = new PageArgs(); // 初始化分頁參數對象
pag.setPageSize(pageSize); // 設置分頁大小
pag.setMaxPage((count + pageSize - 1) / pageSize); // 設置最大頁碼
pag.setPageCount(count); // 設置當前頁碼
}
} catch (SQLException ex) {
Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
} finally {
close(rs, stmt, conn);
}
return pag;
}
public List getProducts(final int page) throws Exception {
if (pageSize == 0) {
throw new Exception("產品分頁的頁面大小不能爲0");
}
List list = new ArrayList(); // 建立保存分頁數據的集合對象
PreparedStatement stmt = null;
ResultSet rs = null;
Connection conn = getConn(); // 鏈接數據庫
try {
// 定義分頁查詢的SQL語句
String sql = "SELECT * FROM tb_Databasetoexcel limit ?,?";
stmt = conn.prepareStatement(sql);
stmt.setInt(1, (page-1)*pageSize); // 設置SQL查詢參數
stmt.setInt(2, pageSize); // 設置SQL查詢參數
rs = stmt.executeQuery(); // 獲取查詢結果
while (rs.next()) { // 遍歷查詢結果集
FenyeBean fenyeBean = new FenyeBean(); // 建立分頁對象
fenyeBean.setIsbn(rs.getString("isbn")); // 初始化分頁對象
fenyeBean.setBookName(rs.getString("bookName"));
fenyeBean.setPublishing(rs.getString("publishing"));
fenyeBean.setWriter(rs.getString("writer"));
fenyeBean.setPrice(rs.getFloat("price"));
fenyeBean.setDate(rs.getDate("date"));
list.add(fenyeBean); // 添加分頁數據對象到List集合
}
} catch (SQLException ex) {
Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
} finally {
close(rs, stmt, conn);
}
return list;
}服務器
- 1. ajax無刷新分頁類
- 2. ajax無刷新分頁效果
- 3. Ajax 實現無刷新分頁
- 4. ASP.NET Ajax 實現無刷新分頁
- 5. Spring+MyBatis+Ajax 實現無刷新分頁
- 6. smarty+php+ajax 簡單無刷新分頁
- 7. AJAX 下拉無刷新分頁加載
- 8. jQuery+Ajax+PHP無刷新分頁
- 9. Ajax無刷新（一）
- 10. pushState+Ajax實現無刷更新頁面
- 更多相關文章...
- • ionic 下拉刷新 - ionic 教程
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • PHP Ajax 跨域問題最佳解決方案
- • Git五分鐘教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。