纯ajax+asp.net+sqlserver多方式分页

分页,WEB程序中最常见的应用。现在很多网站也采了AJAX分页的方法。真的会提高分页速度嘛？我看，不一定，但给用户更好的视觉感，这是肯定的。。本想找在网上找个源码好好学习一下，这样也可以少走一些弯路。无耐找了一上午也没有找合意的。。。大部分是使用了第三方控件。 要么就是一些讲原理的．．唉．．还自己动手吧．．自己动手，丰衣足食．呵呵．．．从找到的资料中总结了一下，AJAX分页大概有三种实现方式有(1)直接绑定Gridview，(2)输出xml，(3)输出JSON，首先我也采用GridView绑定，直接输出，这样做客户端ＪＳ代码也不要做太多事情，获取输出取直接加载到DIV标签中就是呢。这样做简单是简单，但在练习中遇到一个问题那就是总页码怎么传递过去，再者返回的东西太多，不如返回XML,JSON简洁。这样是否会影响传输速度呢？我也凝惑，还需要高人指点。XML与JSON两种格式，我采用了JSON。JSON比XML更简洁，传输速度更快。对于这样不复杂的数据JSON完全够用呢。

JSON:简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是 JavaScript 很容易解释它，而且 JSON 可以表示比名称/值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。
JSON参考文章：http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/

效果图

 1、创建显示页面PageShowAjax.aspx
  主要函数：
  createXMLHttpRequest()
  创建XMLHttpRequest对象

  GotoPage(actiontmp)
  actiontmp分页动作
  GotoPage()获取页码，异步调用CreatePageAjax。CreatePageAjax根据页码，查询数据表，返回JSON格式字符串。

  function CreateTable()
  CreateData()获取CreatePageAjax 返回的数据，CreateTable解析返回的JSON字符串，生成表格

  function CreateData()
  获取CreatePageAjax返回的JSON字符串，调用CreateTable() 生成表格 。并加载到DIV标签中。

详细代码如下:

<! 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 >
     < style  type ="text/css" >
         body  {  line-height : 20px ;  font-size : 12px ;  background : #ffffff ; color : #069 ; }
         a:link { padding 2px 0px 0px 2px;line-height : 18px ; color : #069 ; text-decoration : none ; }
         a:visited { padding 2px 0px 0px 2px;line-height : 18px ; color : #069 ; text-decoration : none ; bgckground : #CCC }
         a:hover { padding 2px 0px 0px 2px;line-height : 18px ; color : #069 ; text-decoration : none ; background : #FFFF99 ; }
         table {
          border : 1px   solid   #000000 ;
          background : #f8f8ff ;
           hrong : expression(this.cellSpacing=1) ;  
          
          }
       
         
         .tr_head {
         background : #ffffe0 ;

          }
         .tr_one {
         background : #fffafa ;
          }
         .tr_two {
         background : #f8f8ff ;
          }
          tr {
           background : #ffffff ;
           bencalie : expression(this.οnmοuseοver=function(){this.style.background='#FFFF99' ; this.style.cursor='pointer' } );
           bencalie1:expression(this.οnmοuseοut=function() { this.style.background='#ffffff' } )
           }   
          
     </ style >
< script  type ="text/javascript"  src ="JS/json.js" ></ script >
< script  language =javascript  type ="text/javascript" >
//  <!CDATA[
var  PageCurrenNO;
var  PageCount;
var  actiontmp;
var  ShowID;
var  xmlHttp;
var  ShowTalbe;
var  Rowset;
var  MaxPageNO;
var  n;

// 创建对象
function  createXMLHttpRequest()
{

     var  isRight  =   true ;
     try { xmlHttp  =   new  XMLHttpRequest(); }
     catch (trymicrosoft)
    {
         try {xmlHttp  =   new  ActiveXobject( " Msxml2.XMLHTTP " );}
         catch (othermicrosoft)
        {
             try {xmlHttp  =   new  ActiveXobject( " Microsoft.XMLHTTP " );}
             catch (failed)
            {
                isRight  =   false ;
            }
        }
    }
     if ( ! isRight)
      alert( " XML对象创建失败 " );
}

// 分页
function  GotoPage(actiontmp)
{
    PageCurrenNO  =  document.getElementById( " PageCurren " ).innerText;
    MaxPageNO  =  document.getElementById( " PageCount " ).innerText;              

     if (PageCurrenNO == ""   ||  PageCurrenNO == null )
    {
        PageCurrenNO  =   1 ;
    }
     if (PageCurrenNO == 1 && actiontmp == " pre " )
    {
       alert( " 以经是第一页 " );
        return ;
    }
     if (PageCurrenNO == MaxPageNO && actiontmp == " next " )
    {
       alert( " 以经是最后一页 " );
        return ;
    }
     if (actiontmp == " go " )
    {
        n  =  document.getElementById( " govalue " ).value;
         if (n > MaxPageNO)
        {
          alert( " 不能超过最大页 " );
           return ;
        }
         var  reg   =   / ( ^ [ 1 - 9 ]{ 1 }[ 0 - 9 ]{ 0 ,}$) / ;
         if ( ! reg.test(n))
        {
           alert( " 输入数字不是有效页码请重新输入 " );
            return ;        
        } 
    }
    
    ShowID  =  document.getElementById( " M1_0 " );
    ShowID.innerHTML = " 正在载入...... " ;
     // 创建xmlHttp对象
    createXMLHttpRequest()
     // 第一页
     if (actiontmp == " a " )
    {
         n  = 1 ;
        document.getElementById( " PageCurren " ).innerText = " 1 " ;
        url  =   " CreatePageAjax.aspx?PageNo=1 " ;
        xmlHttp.open( " GET " ,url, true );
        xmlHttp.onreadystatechange  =  CreateData;
        xmlHttp.send( null );
    }
     // 最后一页
     if (actiontmp == " z " )
    {
        n  =  MaxPageNO;
        url  =   " CreatePageAjax.aspx?PageNo= " + MaxPageNO;
        xmlHttp.open( " GET " ,url, true );
        xmlHttp.onreadystatechange  =  CreateData;
        xmlHttp.send( null );
    }
     // 上一页
     if (actiontmp == " pre " )
    {
        n  =  parseInt(PageCurrenNO) - parseInt( 1 );
        url  =   " CreatePageAjax.aspx?PageNo= " + n;
        xmlHttp.open( " GET " ,url, true );
        xmlHttp.onreadystatechange  =  CreateData;
        xmlHttp.send( null );       
    }
     // 下一页
     if (actiontmp == " next " )
    {
        n  =   parseInt(PageCurrenNO) + parseInt( 1 );
        url  =   " CreatePageAjax.aspx?PageNo= " + n;
        xmlHttp.open( " GET " ,url, true );
        xmlHttp.onreadystatechange  =  CreateData;
        xmlHttp.send( null );  
    }
     // 下拉框选择跳转
     if (actiontmp == " pagechange " )
    {
         var  thisobj  =  document.getElementById( " svalue " );
        n  =  thisobj.options(thisobj.selectedIndex).value;
        url  =   " CreatePageAjax.aspx?PageNo= " + n;
        xmlHttp.open( " GET " ,url, true );
        xmlHttp.onreadystatechange = CreateData;
        xmlHttp.send( null );
    }
     // 输入数字跳转
     if (actiontmp == " go " )
    {
        n  =  document.getElementById( " govalue " ).value;
         var  reg   =   / ( ^ [ 1 - 9 ]{ 1 }[ 0 - 9 ]{ 0 ,}$) / ;
         if (reg.test(n))
        {
           url  =   " CreatePageAjax.aspx?PageNo= " + n;
           xmlHttp.open( " GET " ,url, true );
           xmlHttp.onreadystatechange  =  CreateData;
           xmlHttp.send( null );         
        }
         else
        {
           alert( " 输入数字不是有效页码请重新输入 " );
            return ;        
        } 
    }
     // 生成下拉列表
    CreateSelect();
     // 改变所有控件当前页码值
    ChangePageVaue();
 }

// 创健数据
  function  CreateData()
 {
     if (xmlHttp.readyState == " 4 " )
       if (xmlHttp.status == " 200 " )
      {
         // ShowID.innerHTML=
        
        Rowset  =  xmlHttp.responseText;
         // 转换成JSON格式
        Rowset  =  Rowset.parseJSON();
         // 创退表格
        CreateTable();
        ShowID.innerHTML = ShowTalbe;
       }
        else
       {
            ShowID.innerHTML = " 数据读取错误 " + xmlHttp.status;
       }       
  }
   // 创建表格
   function  CreateTable()
  {
      // 获取最大页
      document.getElementById( " PageCount " ).innerText  =  Rowset.PageInfo[ 0 ].PageCount;
      MaxPageNO  =  Rowset.PageInfo[ 0 ].PageCount;
      // 获取当前页
      document.getElementById( " PageCurren " ).innerText  =   Rowset.PageInfo[ 0 ].PageNo;
      // 获取显示记录条数
      var  m  =  parseInt(Rowset.PageInfo[ 0 ].ShowRows);
     ShowTalbe  =   " <table> " ;
      var  ID;
      var  FirstName;
      var  LastName;
      var  Country;
      var  Note;
      var  ClasName;
     ClasName  =   " tr_head "
     ShowTalbe  =  ShowTalbe  + " <tr class=' " + ClasName + " '><td>ID</td><td>FirstName</td><td>LastName</td><td>LastName</td><td>Country</td><td>Note</td></tr> " ;
      for ( var  i = 0 ;i < m;i ++ )
     {
        ID         =  Rowset.RecordList[i].ID;
        FirstName  =  Rowset.RecordList[i].FirstName;
        LastName   =  Rowset.RecordList[i].LastName;
        Country    =  Rowset.RecordList[i].Country;
        Note       =  Rowset.RecordList[i].Note;

        ShowTalbe  =  ShowTalbe  + " <tr ><td> " + ID + " </td><td> " + FirstName + " </td><td> " + LastName + " </td><td> " + LastName + " </td><td> " + Country + " </td><td> " + Note + " </td></tr> " ;
     }
     ShowTalbe  =  ShowTalbe + " </table> " ;
 }
  // 生成页码下拉列表
  function  CreateSelect()
 {
     var  valuetmp  =  document.getElementById( " selectarea " ).innerText;
     if (valuetmp == null || valuetmp == "" )
    {
         var  str  =   " <select id="svalue" οnchange="GotoPage('pagechange');"> "
         for ( var  j = 1 ;j < 50 ;j ++ )
       {
          str  =  str + " <option value=' " + j + " '> " + j + " </option> " ;
       }
       str  =  str  +   " </select> "     
      document.getElementById( " selectarea " ).innerHTML  =   str;
       // alert(str);
         // function add(){
         // var s=document.getElementById("lbxAccepter");
         // var n=hid.value;
         // hid.value=parseInt(n)+1;
        // var op=new Option(n,n);
        // s.add(op);
    }
 }
  // 改变所有控件当前页码值
  function  ChangePageVaue()
 {
     document.getElementById( " govalue " ).value = n;
      if (n < 50 )
     {  
         var  thisobj  =  document.getElementById( " svalue " ); 
         var  mm  =  parseInt(n) - 1 ;
        thisobj.options[mm].selected  =   true ;
     }
 } 
//  ]]>
</ script >

</ head >
< body  onload ="GotoPage('a')" >
< div  id ="M1_0" ></ div >
共 < span  id ="PageCount" ></ span > 页 &nbsp;
第 < span  id ="PageCurren" ></ span > 页 &nbsp;
< span >< a  href ="javascript:GotoPage('a');" > 首页 </ a ></ span > &nbsp;
< span >< a  href ="javascript:GotoPage('pre');" > 上一页 </ a ></ span > &nbsp;
< span >< a  href ="javascript:GotoPage('next');" > 下一页 </ a ></ span > &nbsp;
< span >< a  href ="javascript:GotoPage('z');" > 末页 </ a ></ span > &nbsp;
< span  id ="selectarea" ></ span > &nbsp;
< span >
    < input  id ="govalue"  type =text  maxlength ="6"   size ="5"  value ="1" />
    < input  type =button  value ="go"  onclick ="GotoPage('go')" />
</ span >
</ body >
</ html >

CreatePageAjax.aspx只有两句

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " CreatePageAjax.aspx.cs "  Inherits = " CreatePageAjax "   %>
<% @ OutputCache Duration = " 60 "  VaryByParam = " PageNo "   %>

CreatePageAjax.aspx.cs
根据获取到的页码，查询相关数据。并转换成JSON类型字符串输出。

//  (c) Copyright XXXXXXX Corporation.
//  多方式AJAX分页
//  See 
//  Email:alphacn@126.com
//  MSN  :cyulicn@hotmail.com
//  2007.9.25 Alpha 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

using  System.Data.SqlClient;
using  System.Text;
using  System.Xml;

///   <summary>
///  根据页码读取本页内容
///   </summary>
public   partial   class  CreatePageAjax : System.Web.UI.Page
{
     // 当前页码
     private   int  PageNo;
     // 当前页临时量
     private   string  PageNoTemp;
     // 总页数
     private   int  PageCount;
     // 总记录数
     private   int  ShowNumbers;
     // 每页显示的条数
     private   int  ShowRows = 20 ;
     // 查询SQL语句
     private   string  SqlStr;
     // 开始条数
     private   int  StartRows;
     // 总页数缓存变量
     object  o;
    
     ///   <summary>
     ///  
     ///   </summary>
     ///   <param name="sender"></param>
     ///   <param name="e"></param>
     protected   void  Page_Load( object  sender, EventArgs e)
    {
         // 获取当然页码
        PageNoTemp  =  Request.QueryString[ " PageNo " ];
         // PageNoTemp为空默认为第一页
         if  (PageNoTemp  ==   null   ||  PageNoTemp  ==   "" )
        {
            PageNo  =   1 ;
        }
         else
        {
            PageNo  =   int .Parse(PageNoTemp);
        }
         // 总页数缓存变量
        o  =  ViewState[ " PageCount " ];

         using (SqlConnection Conn  =   new  SqlConnection( " server=.;database=PubData;uid=sa;pwd=123456 " ))
        {
             // 打开数据库链接
            Conn.Open();
             // o为空表示该用户第一次访问，需要统计总页数
             if  (o  ==   null )
            {
                SqlStr  =   " select count(ID) from TestTable " ;
                SqlCommand cmd3  =   new  SqlCommand(SqlStr, Conn);
                SqlDataReader  dr  =  cmd3.ExecuteReader();
                dr.Read();
                ShowNumbers  =   int .Parse(dr[ 0 ].ToString());
                 if (ShowNumbers  %  ShowRows > 0 )
                {
                    PageCount  =  (ShowNumbers  /  ShowRows)  +   1 ;
                }
                 else
                {
                    PageCount  =   ShowNumbers  /  ShowRows;
                }
                ViewState[ " PageCount " ]  =  PageCount;
                dr.Close();
            }
             // 从ViewState["PageCount"]中获取总页数
            PageCount  =   int .Parse(ViewState[ " PageCount " ].ToString());
             // 计算开始条数
            StartRows  =  ( this .PageNo  -   1 )  *   this .ShowRows;

            SqlStr  =   " select top  "   +  ShowRows  +   "  *  from  TestTable where ID not in(select top  "   +  StartRows  +   "  ID  from  TestTable order by ID desc) " ;
             // 使用GridView传输
             // SqlDataAdapter Da = new SqlDataAdapter(SqlStr, Conn);
             // DataSet Ds = new DataSet();
             // Da.Fill(Ds, "DsTest");
             // GridView1.DataSource = Ds.Tables["DsTest"].DefaultView;
             // GridView1.DataBind();
            SqlCommand cmd  =   new  SqlCommand(SqlStr, Conn);
             // 用XML转输
             //  System.Xml.XmlReader reader = cmd.ExecuteXmlReader();
            SqlDataReader reader  =  cmd.ExecuteReader();
            System.Text.StringBuilder sb  =   new  StringBuilder();
             int  n  =   0 ;
             // 将记录信息生成JSON格式
            sb.Append( " {"RecordList":[ " );
             while  (reader.Read())
            {
                sb.Append( " { " );
                sb.Append( "  "ID":" " + reader[ 0 ] + " ", " );
                sb.Append( "  "FirstName":" "   +  reader[ 1 ]  +   " ", " );
                sb.Append( "  "LastName":" "   +  reader[ 2 ]  +   " ", " );
                sb.Append( "  "Country":" "   +  reader[ 3 ]  +   " ", " );
                sb.Append( "  "Note":" "   +  reader[ 4 ]  +   " " " );
                sb.Append( " }, " );
                n  =  n  +   1 ;
            }
            sb.Append( " ], " );
            sb.Append( " "PageInfo":[{"PageCount":" "   +  ViewState[ " PageCount " ]  +   " ","PageNo":" "   +  PageNo  +   " ","ShowRows":" "   +  n.ToString()  +   " "}] " );
            sb.Append( " } " );
            reader.Close();
             // 输出JSON变量
            Response.Write(sb.ToString());
             // Response.End();
        }
    }
}