通过AJAX异步减少网络内容传输，而JSON则可以把传输内容缩减到纯数据；然后利用jQuery内置的AJAX功能直接获得JSON格式的数据；在客户端直接绑定到数据控件里面，从而达到最优。
1.设计htm页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test2</title> <script language="javascript" type="text/javascript" src="https://www.jb51.net/js/jquery-latest.pack.js"></script> <script language="javascript" type="text/javascript" src="https://www.jb51.net/js/PageDate.js"></script> </head> <body> <div> <div> <br /> <input type="button" value=" << " /><input type="button" value=" < " /><input type="button" value=" > " /><input type="button" value=" >> " /> <span></span> <ul> <li> <span> 订单ID </span>/ <span> 客户ID </span> <span> 雇员ID </span>/ <span> 订购日期 </span>/ <span> 发货日期 </span>/ <span> 货主名称 </span>/ <span> 货主地址 </span>/ <span> 货主城市 </span>/ <span> 更多信息 </span> </li> </ul> </div> <div> LOADING.... </div> <input type="hidden" /> </div> </body> </html> ////注：ID属性比较重要，用于数据绑定。
2.使用jQuery编写AJAX请求文件
var pageIndex = 1 var pageCount = 0; $(function(){ GetPageCount();//取得分页总数 pageCount = parseInt($("#pagecount").val());//分页总数放到变量pageCount里 $("#load").hide();//隐藏loading提示 $("#template").hide();//隐藏模板 ChangeState(0,1);//设置翻页按钮的初始状态 bind();//绑定第一页的数据 //第一页按钮click事件 $("#first").click(function(){ pageIndex = 1; ChangeState(0,1); bind(); }); //上一页按钮click事件 $("#previous").click(function(){ pageIndex -= 1; ChangeState(-1,1); if(pageIndex <= 1) { pageIndex = 1; ChangeState(0,-1); } bind(); }); //下一页按钮click事件 $("#next").click(function(){ pageIndex += 1; ChangeState(1,-1); if(pageIndex>=pageCount) { pageIndex = pageCount; ChangeState(-1,0); } bind(pageIndex); }); //最后一页按钮click事件 $("#last").click(function(){ pageIndex = pageCount; ChangeState(1,0); bind(pageIndex); }); }); //AJAX方法取得数据并显示到页面上 function bind() { $("[@id=ready]").remove(); $("#load").show(); $.ajax({ type: "get",//使用get方法访问后台 dataType: "json",//返回json格式的数据 url: "Handler.ashx",//要访问的后台地址 data: "pageIndex=" + pageIndex,//要发送的数据 complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示 success: function(msg){//msg为返回的数据，在这里做数据绑定 var data = msg.table; $.each(data, function(i, n){ var row = $("#template").clone(); row.find("#OrderID").text(n.OrderID); row.find("#CustomerID").text(n.CustomerID); row.find("#EmployeeID").text(n.EmployeeID); row.find("#OrderDate").text(ChangeDate(n.OrderDate)); if(n.RequiredDate !== undefined) row.find("#ShippedDate").text(ChangeDate(n.RequiredDate)); row.find("#ShippedName").text(n.ShipName); row.find("#ShippedAddress").text(n.ShipAddress); row.find("#ShippedCity").text(n.ShipCity); row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.OrderID + "&pageindex="+pageIndex+"> More</a>"); row.attr("id","ready");//改变绑定好数据的行的id row.appendTo("#datas");//添加到模板的容器中 }); $("[@id=ready]").show(); SetPageInfo(); } }); } function ChangeDate(date) { return date.replace("-","https://www.jb51.net/").replace("-","https://www.jb51.net/"); } //设置第几页/共几页的信息 function SetPageInfo() { $("#pageinfo").html(pageIndex + "https://www.jb51.net/" + pageCount); } //AJAX方法取得分页总数 function GetPageCount() { $.ajax({ type: "get", dataType: "text", url: "Handler.ashx", data: "getPageCount=1", async: false, success: function(msg){ $("#pagecount").val(msg); } }); } //改变翻页按钮状态 function ChangeState(state1,state2) { if(state1 == 1) { document.getElementById("first").disabled = ""; document.getElementById("previous").disabled = ""; } else if(state1 == 0) { document.getElementById("first").disabled = "disabled"; document.getElementById("previous").disabled = "disabled"; } if(state2 == 1) { document.getElementById("next").disabled = ""; document.getElementById("last").disabled = ""; } else if(state2 == 0) { document.getElementById("next").disabled = "disabled"; document.getElementById("last").disabled = "disabled"; } }
3.利用JSON三方控件在服务器端获取JSON格式数据