1 服务器端输出翻页数据的输出例子
<?xml version="1.0" encoding="GB2312" ?>
<list>
<head>
<currentpage value="1" />
<totalpage value="6" />
<rowsstart value="1" />
<rowsend value="2" />
<rowscount value="11" />
</head>
<data>
<row>
<feedbackid value="45" />
<userid value="1" />
<nickname value="Z8论坛" />
<content value="moto 手机 z8" />
<createtime value="2008-2-19 15:48:21" />
<deleteflag value="False" />
<commentersite value="http://moto.it168.com/forumdisplay.php?fid=188" />
</row>
<row>
<feedbackid value="44" />
<userid value="1" />
<nickname value="泉水" />
<content value="ajax有个小问题，比如在留言本这里输入含有html代码的内容，提示信息是乱码的..." />
<createtime value="2008-2-13 21:41:55" />
<deleteflag value="False" />
<commentersite value="" />
</row>
</data>
</list>
2 javascript类代码
//var xml_http_building_link = 请等待，正在建立连接...;
var xml_http_building_link =
;// 请等待，正在刷新...;
var xml_http_sending =;// 请等待，正在发送数据...;
//var xml_http_loading = 请等待，正在接受数据...;
var xml_http_loading =;// 请等待，正在刷新...;
var xml_http_load_failed = 通信失败，请刷新重新尝试;
var xml_http_data_in_processed =;// 通信成功，数据正在处理中...;
/*
var xml_http_building_link = Loading...;
var xml_http_sending = Loading...;
//var xml_http_loading = 请等待，正在接受数据...;
var xml_http_loading = Loading...;
var xml_http_load_failed = Error...;
var xml_http_data_in_processed = Loading...;
*/
function AjaxGrid(tn, gridDivId,pagingDivId,statusDivId)
{
var thisInstanse=this;
var statusId;
var xmlDoc;
var validXML;
var currentpage;
var totalpage;
var rowsstart;
var rowsend;
var rowscount;
var colcount;
var paging;
var pagesize;
var dataURL;
var gridHeaderHtml;
var gridFooterHtml;
var rowHeaderHtml;
var rowFooterHtml;
var lastRenderHtml;
var pagingURL="";
//
var xmlHttp;
//
var pagingCallBack;
var colsDefine=new Array();
var badCheckArray=new Array();
var pagingType=1;
this.resetStatus=function()
{
statusId=document.getElementById(statusDivId);
/*
if(statusId==null)
{
var divElement = document.createElement("DIV");
divElement.className = "xspace-ajaxmsg";
divElement.style.position = "fixed";
divElement.style.width = "400";
//divElement.style.align = "center";
divElement.style.right = "0";
divElement.style.top = "0";
divElement.style.background = "red";
divElement.style.color = "#FFFFFF";
divElement.style.lineHeight = "2em";
divElement.style.padding = "0 20px";
divElement.id = statusId;
document.body.appendChild(divElement);
statusId = divElement;
}*/
//xmlHttp=null;
xmlDoc=null;
validXML=false;
paging=false;
currentpage=1;
totalpage=0;
rowsstart=0;
rowsend=0;
rowscount=0;
//
colcount=0;
pagesize=3;
dataURL="";
gridHeaderHtml="";
gridFooterHtml="";
rowHeaderHtml="";
rowFooterHtml="";
//
colsDefine.length=0;
badCheckArray.length=0;
lastRenderHtml="";
//
pagingCallBack=null;
}
this.resetStatus();
this.setDataURL = function(url){
dataURL= url;
}
this.addPaging=function(pagingSize, callback )
{
pagingType=1;
paging=true;
pagesize=pagingSize;
if(callback!=null)
{
pagingCallBack = callback ;
}
}
this.addPaging2=function(pagingSize, callback )
{
pagingType=2;
paging=true;
pagesize=pagingSize;
if(callback!=null)
{
pagingCallBack = callback ;
}
}
this.addPagingGoURL=function(pagingSize,url, callback )
{
pagingType=3;
paging=true;
pagesize=pagingSize;
pagingURL=url;
if(callback!=null)
{
pagingCallBack = callback ;
}
}
this.addGridHeader=function(header){
gridHeaderHtml=header;
}
this.addGridFooter=function(footer){
gridFooterHtml=footer;
}
this.addRowHeader=function(header){
rowHeaderHtml=header;
}
this.addRowFooter=function(footer){
rowFooterHtml=footer;
}
function ColObject(){
var type;
var content;
}
this.addBadCheckCol=function( tagName )
{
badCheckArray[badCheckArray.length] = tagName ;
}
this.addCol=function( colContent )
{
var c=new ColObject();
c.type="str";
c.content=colContent;
colsDefine[colcount]=c;//colContent;
colcount++;
}
this.addcolByCallBack = function (fun)
{
var c=new ColObject();
c.type="fun";
c.content=fun;
colsDefine[colcount]=c;//fun;
//alert(colsDefine[colcount]);
colcount++;
}
this.addColHtmlModel=function( divID )
{
//alert("start addColHtmlModel:"+ divID);
var mHtml;
var div=document.getElementById(divID);
//alert("addColHtmlModel:divID="+div);
mHtml=div.innerHTML;
var c=new ColObject();
c.type="str";
c.content=mHtml;
colsDefine[colcount]=c;
colcount++;
//alert("addColHtmlModel() mHtml:"+mHtml);
}
this.addColHtmlModelByTextArea=function( TextAreaID )
{
//alert("start addColHtmlModel:"+ divID);
var mHtml;
var txt=document.getElementById(TextAreaID);
//alert("addColHtmlModel:divID="+div);
mHtml=txt.value;
var c=new ColObject();
c.type="str";
c.content=mHtml;
paramIndex="";
colsDefine[colcount]=c;
colcount++;
//alert("addColHtmlModelByTextArea() mHtml:"+mHtml);
}
this.createXMLHttp=function()
{
//if(xmlHttp==null)
{
if (window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
if(xmlHttp.overrideMimeType)
{
xmlHttp.overrideMimeType(text/xml);
}
}
else if (window.ActiveXObject)
{
//xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
var versions = [Microsoft.XMLHTTP, MSXML.XMLHTTP, Microsoft.XMLHTTP, Msxml2.XMLHTTP.7.0, Msxml2.XMLHTTP.6.0, Msxml2.XMLHTTP.5.0, Msxml2.XMLHTTP.4.0, MSXML2.XMLHTTP.3.0, MSXML2.XMLHTTP];
for(var i=0; i {
try
{
xmlHttp = new ActiveXObject(versions[i]);
if(xmlHttp)
{
return ;
}
}
catch(e)
{
alert("createXMLHttp:"+e.message);
}
}
}
}
}
this.loadXML = function(targetUrl)
{
this.createXMLHttp();
xmlHttp.onreadystatechange = this.processHandle;
try
{
//alert("start to open();");
if(window.XMLHttpRequest)
{
xmlHttp.open(GET, targetUrl);
xmlHttp.send(null);
//alert("window.XMLHttpRequest open();");
}
else
{
xmlHttp.open("GET", targetUrl, true);
xmlHttp.send();
//alert(" else open();");
}
}
catch(ex)
{
alert("loadXML:"+ex);
}
}
this.processHandle = function()
{
statusId.style.display = ;
if(xmlHttp.readyState == 1)
{
statusId.innerHTML = xml_http_building_link;
}
else if(xmlHttp.readyState == 2)
{
statusId.innerHTML = xml_http_sending;
}
else if(xmlHttp.readyState == 3)
{
statusId.innerHTML = xml_http_loading;
}
else if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
validXML=true;
statusId.style.display = none;
//alert(xmlHttp.responseXML);
xmlDoc=xmlHttp.responseXML;
//alert(thisInstanse.resultHandle);
thisInstanse.resultHandle();
}
else
{
statusId.innerHTML = xml_http_load_failed + " xmlHttp.status:"+xmlHttp.status;
}
}
/*
else
{
//statusId.innerHTML = xmlHttp.readyState;
alert(xmlHttp.readyState);
}*/
}
this.resultHandle=function()
{
//alert("start resultHandle()");
lastRenderHtml="";
var divRows=document.getElementById(gridDivId);
//alert("show() divRows:"+divRows);
if(divRows!=null)
{
this.renderAll();
//alert(pagingCallBack);
if(pagingCallBack!=null)
{
pagingCallBack();
}
statusId.style.display = "none";
xmlHttp=null;
}
else
{
alert(gridDivId+:null);
}
}
this.loadData=function(pageIndex)
{
validXML=false;
var randomRefresher1= Math.floor(Math.random()*10000) + 1 ;
var now=new Date();
var randomRefresher2= now.getSeconds();
var wenhao="";
if(dataURL.indexOf("?")<0)
wenhao="?";
var url=dataURL + wenhao + "&pagesize="+pagesize + "¤tpage="+pageIndex+"&AjaxGridrandom="+randomRefresher1+"_"+randomRefresher2;
//alert(url);
//window.open(url);
xmlDoc=null;
this.loadXML(url);
}
this.initHeadData=function ()
{
if(!validXML)return;
currentpage=Number(xmlDoc.getElementsByTagName("currentpage")[0].attributes[0].value);
totalpage=Number(xmlDoc.getElementsByTagName("totalpage")[0].attributes[0].value);
rowsstart=Number(xmlDoc.getElementsByTagName("rowsstart")[0].attributes[0].value);
rowsend=Number(xmlDoc.getElementsByTagName("rowsend")[0].attributes[0].value);
rowscount=Number(xmlDoc.getElementsByTagName("rowscount")[0].attributes[0].value);
}
this.createGridTRs=function()
{
if(!validXML)return ;
var trs;
trs="";
var dataRows = xmlDoc.getElementsByTagName("row");
//alert("dataRows.length:"+dataRows.length);
for(var r=0;r {
if(rowHeaderHtml!="")
trs+=rowHeaderHtml;
var oneRowData=dataRows[r];
//alert("oneRowData:"+ oneRowData + " " + r );
for(var i=0;i {
var formatContent="";
if(colsDefine[i].type=="str")
formatContent=colsDefine[i].content;
else if(colsDefine[i].type=="fun")
formatContent=colsDefine[i].content(oneRowData);
//alert("formatContent:"+ formatContent + " " + i );
var colElements=oneRowData.getElementsByTagName("*");
//alert("colElements.length : "+colElements.length);
for(var dataIndex=0;dataIndex {
var dataName=colElements[dataIndex].tagName;
//alert(dataName);
var dataValue=colElements[dataIndex].attributes[0].value;
//alert(dataValue);
for(var bci=0;bci {
if(dataName==badCheckArray[bci])
{
dataValue=AjaxGrid.badCheckProcess(dataValue);
}
}
//if(dataName=="visitorname")alert(dataValue);
formatContent=formatContent.replace( new RegExp("\\["+dataName+"\\]","gm"), dataValue);
}
formatContent=formatContent.replace( new RegExp("\\[AjaxGridIndex\\]","gm"), r+rowsstart);
trs+=formatContent;
//alert("formatContent after replace:"+ formatContent + " " + i );
}
if(rowFooterHtml!="")
trs+=rowFooterHtml;
else
trs+="";//"
";
trs+="\r\n";
}
if(dataRows.length<=0)
{
trs+="
No recoreds!
";
}
//alert(trs);
return trs;
}
this.doEnterGoPage=function(txtobj)
{
try
{
if(event.keyCode==13)
{
if(txtobj.value=="")return;
var index=txtobj.value / 1;
if(index<=0)index=1;
if(index>totalpage)index=totalpage;
this.value=index;
this.show(index);
}
//alert(event.keyCode); // 96 - 105
if( event.keyCode==8 || event.keyCode==46
|| (event.keyCode>=96 && event.keyCode<=105)
|| (event.keyCode>=48 && event.keyCode<=57) )
event.returnValue=true;
else
event.returnValue=false;
}
catch(ex)
{
}
}
this.createPaging=function()
{
if(!validXML)return ;
if(pagingType==3)
return this.createPaging3();
var imgstr;
imgstr="";
if(currentpage>1)
imgstr+="
";
else
imgstr+="
";
if(currentpage>1 )
imgstr+="";
else
imgstr+="
";
if(pagingType==1)
imgstr+=" Page "+currentpage+" / "+totalpage+" ";
else if(pagingType==2)
imgstr+=" page / "+totalpage+" ";
if( currentpage < totalpage )
imgstr+="";
else
imgstr+="
";
if(totalpage>1 && currentpage < totalpage )
imgstr+="";
else
imgstr+="
";
var pagingHtml= imgstr +" 记录数:("+rowsstart+"-"+rowsend+")/"+rowscount;
return pagingHtml;
}
this.createPaging3=function()
{
if(!validXML)return ;
var imgstr;
imgstr="";
if(currentpage>1)
imgstr+="";
else
imgstr+="";
if(currentpage>1 )
imgstr+="";
else
imgstr+="";
imgstr+=" Page "+currentpage+" / "+totalpage+" ";
if( currentpage < totalpage )
imgstr+="";
else
imgstr+="";
if(totalpage>1 && currentpage < totalpage )
imgstr+="";
else
imgstr+="";
var pagingHtml= imgstr +" 记录数:("+rowsstart+"-"+rowsend+")/"+rowscount;
return pagingHtml;
}
this.getLastRenderHtml=function()
{
return lastRenderHtml;
}
this.renderAll=function()
{
if(!validXML)return ;
this.initHeadData();
//alert("gridHeaderHtml:" + gridHeaderHtml );
lastRenderHtml="";
if(gridHeaderHtml!="")
lastRenderHtml=gridHeaderHtml;
//alert("start createGridTRs()");
lastRenderHtml+=this.createGridTRs();
//alert("gridFooterHtml:" + gridFooterHtml );
if(gridFooterHtml!="")
lastRenderHtml+=gridFooterHtml;
//alert("lastRenderHtml:"+lastRenderHtml);
var divRows=document.getElementById(gridDivId);
divRows.innerHTML=lastRenderHtml;
if(paging)
{
var pagingHtml=this.createPaging();
var divPaging=document.getElementById(pagingDivId);
if(divPaging!=null)
divPaging.innerHTML=pagingHtml;
}
}
this.show=function(pageIndex)
{
if(pageIndex<=0)
pageIndex=1;
this.loadData(Number(pageIndex));
}
this.reloadCurrentpage=function()
{
if(currentpage<=0)
currentpage=1;
this.show(currentpage);
}
this.showLastPage=function()
{
this.show(totalpage+1);
}
}
AjaxGrid.badCheckProcess=function(str)
{
str=str.replace(new RegExp("<","gm"),"<");
str=str.replace(new RegExp(">","gm"),">");
return str;
}