一個簡單的Ajax分頁示例

　　前段時間做項目過程中,碰到一個問題．有一個頁面需要做級聯式的送出，例如：輸入查詢條件，送出表單A.得到表單B,然後在根據表單B中check的勾選項，送出後得到清單C,在同一頁面顯示，問題是：在表單B送出之後，或者點選清單C分頁查詢時傳回的頁面都需要保留表單B中的狀态，這裡的處理的确會讓人很頭痛，于是最後決定在表單B的送出中使用Ajax，這樣一來便無須擔憂保留狀态的問題了．　

　　現将具體實作做成一個小示例發上來，希望能對初學者有所幫助，因為我本身也是個初學者，在網絡也上得到了其他人的不少幫助．：P

ok,具體實作的流程如下：

　　１.由前端頁面發送Ajax請求至伺服器端．

　　　[code]

　　　　　　　　　function QueryList(no){

var url="getXML.do";

var pars="pageNo="+no;

var ajax=new Ajax.Request(url,{

method:'get',

parameters:pars,

onComplete:showResponse

});

　　[/code]

　　　[code]

//回調

function showResponse(request){

var parser=new MyXmlParser();

parser.load(request);

var dataList=parser.itemList;

var pageList=parser.pageList;

showTable(dataList,pageList);

}

[/code]

　　　這裡用到的是prototype-1.4.0.js中的Ajax對象．

　　２.伺服器端處理程式到資料庫查詢資料并生成xml檔傳回．

　　[code]

　　　　StringBuffer resultXML = new StringBuffer();

int pageNo = new Integer(request.getParameter("pageNo")).intValue();

try {

resultXML.append("<?xml version='1.0' encoding='gb2312'?>");

resultXML.append("<ajax-response>\n");

resultXML.append("<root>\n");

Pagination page = new Pagination(request, 100);

List list = this.getTestList(page.getStart(), page.getPageSize());

for (int i = 0; i < list.size(); i++) {

TestBean bean = (TestBean) list.get(i);

resultXML.append("<data>\n");

resultXML

.append("\t<id>" + bean.getId().toString() + "</id>\n");

resultXML.append("\t<name>" + bean.getName() + "</name>\n");

resultXML.append("\t<sex>" + bean.getSex() + "</sex>\n");

resultXML.append("\t<age>" + bean.getAge().toString()

+ "</age>\n");

resultXML.append("</data>\n");

}

resultXML.append("<pagination>\n");

resultXML.append("\t<total>" + page.getTotal() + "</total>\n");

resultXML.append("\t<start>" + page.getStart() + "</start>\n");

resultXML.append("\t<end>" + page.getEnd() + "</end>\n");

resultXML.append("\t<pageno>" + page.getPageNo() + "</pageno>\n");

resultXML.append("</pagination>\n");

resultXML.append("</root>\n");

resultXML.append("</ajax-response>");

} catch (Exception e) {

e.printStackTrace();

}

writeResponse(request, response, resultXML.toString());

　　[/code]

３.在Ajax響應方法中對xml解析并生成表格顯示到頁面．

[code]

　　//顯示資料

function showTable(dataList,pageList){

try{

//清單部分

var bodyPanel=$("bodyPanel");

var tab = document.createElement("table");

tab.className="datagrid";

tab.id="myTable";

bodyPanel.replaceChild(tab,bodyPanel.firstChild)

var headerrow = tab.insertRow(0);

createNode(headerrow,'th','header','id');

createNode(headerrow,'th','header','姓名');

createNode(headerrow,'th','header','職業');

createNode(headerrow,'th','header','工資');

for(var i=0;i<dataList.length;i++){

var row=tab.insertRow(i+1);

row.className="rows";

for(var j=0;j<4;j++){

var col=row.insertCell(j);

col.innerHTML=dataList[i][j];

}

}

//分頁部分

var total=parseInt(pageList[0][0]);

var start=parseInt(pageList[0][1]);

var end=parseInt(pageList[0][2]);

var current=parseInt(pageList[0][3]);

var c1_HTML='顯示 '+(1+start)+' 到 '+end+' 筆，共 '+total+' 筆';

var c2_HTML='';

if(start>0){

var prvNo=current-1;

c2_HTML+='<a href="javascript:QueryList('+prvNo+')" target="_blank" rel="external nofollow" >[上一頁] </a>';

}else{

c2_HTML+='[上一頁] ';

}

var totalPage=parseInt(total/10);

if(total%10!=0){

totalPage++;

};

for(var i=1; i <=totalPage; i++){

if(i == 2 && current-6 > 1){

c2_HTML+='...';

i = current- 6;

} else if(i == current + 6 && current +6<totalPage){

c2_HTML+='...';

i = totalPage - 1;

} else{

if(current==i){

c2_HTML+='['+current+'] ';

}else{

c2_HTML+='<a href="javascript:QueryList('+i+')" target="_blank" rel="external nofollow" >'+i+'</a>'+' ';

}

}

}

if(current<totalPage){

var nextNo=current+1;

c2_HTML+='<a href="javascript:QueryList('+nextNo+')" target="_blank" rel="external nofollow" >[下一頁]</a>';

}else{

c2_HTML+='[下一頁]';

}

var pagintion = document.createElement("table");

pagintion.className="footer";

var rightDiv=document.createElement('div');

rightDiv.setAttribute("align","right");

var row=pagintion.insertRow(0);

var col_1=row.insertCell(0);

var col_2=row.insertCell(1);

col_1.innerHTML=c1_HTML;

rightDiv.innerHTML=c2_HTML;

col_2.appendChild(rightDiv);

var footPanel=$("footPanel");

footPanel.replaceChild(pagintion,footPanel.firstChild);

}catch(e){

alert("error");

}

highlightTableRows("myTable");

}//end showTable

　　[/code]

其中還有用到的分頁對象Pagination ，及頁面的xml解析對象MyXmlParser這裡就不貼code出來了．附件中有Demo.war包和project檔案．感興趣的朋友可以下載下傳來看看．

測試環境如下：

JDK:1.5

開發工具：Eclipse3.1

部署伺服器：Tomcat5.5