//声明异步请求对象
/////////////////////////////////////////////////////////////////
var xmlhttp;
/////////////////////////////////////////////////////////////////
//填充DataGrid,这个函数有3个参数。
//第一个是包含DataGrid的DIV的ID
//第二个是查询数据的sql语句
//第三个是要获取第几页数据
/////////////////////////////////////////////////////////////////
var ph;
var fillGrid_Str_SQL="";
var currentPageIndex ;
function fillGrid(myPH,str_Sql,pageIndex){
ph = window.document.getElementById(myPH);
fillGrid_Str_SQL = str_Sql;
currentPageIndex = pageIndex;
var url = "http://localhost/GenricAjaxWS/GenricAjaxWS" +
".asmx/getGrid?sqlStr="+str_Sql+
"&pageIndex="+pageIndex;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=fillGrid_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
//code for IE
else if (window.ActiveXObject)
{
try
{
xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
if(xmlhttp)
{
try
{
xmlhttp.onreadystatechange=fillGrid_Change;
xmlhttp.open("GET",url,false);
xmlhttp.send();
}
catch(e){}
}
}
}
function fillGrid_Change()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
//var rows=xmlhttp.responseXML.
// selectNodes(".//TahaSchema//TahaTable");
var row = xmlhttp.responseXML.selectNodes(".//");
ph.innerHTML = row[1].text;
}
}
function goToPage(pageIndex){
fillGrid(ph.id,fillGrid_Str_SQL,pageIndex)
}
function goToNextPage(){
try{
fillGrid(ph.id,fillGrid_Str_SQL,
parseInt(currentPageIndex)+1);
return false;
}
catch(e){
return true;
}
}
function goToPrevPage(){
fillGrid(ph.id,fillGrid_Str_SQL,
parseInt(currentPageIndex)-1)
}
最后就是显示数据的html页面，实例代码如下：
AjaxGrid.html：
<html>
<head>
<title>AjaxGrid</title>
<script language="javascript"
type="text/javascript" src="ajaxFuncs.js"></script>
</head>
<body onload="fillGrid(myPH,select * from sales,1)">
<form id="Form1" method="post" runat="server">
<div id="myPH" ></div>
</form>
</body>
</html>
到此利用Ajax实现DataGrid无刷新分页就完成了。
