ajax:简单分页实践篇

两个.aspx文件，一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据，后一个用来对分页进行处理。js文件夹下面还有一个testJs.js的文件，它就是ajax操作的核心部分。不错，code is cheap。看代码：

/*testJs.js*/
// 此函数等价于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }

// 创建 XMLHttpRequest对象，以发送ajax请求 
function createXMLHTTP() {
    var xmlHttp = false;
    var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
                         "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
                         "Microsoft.XMLHTTP"];
    for (var i = 0; i < arrSignatures.length; i++) {
        try {
            xmlHttp = new ActiveXObject(arrSignatures[i]);
            return xmlHttp;
        }
        catch (oError) {
            xmlHttp = false; //ignore
        }
    }
    // throw new Error("MSXML is not installed on your system."); 
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
}

//window.onload = showPages(1, 10, 100);

//cP目前页码, tP总页数 ,tN总记录数   
function showPages(cP, tP, tN) {
    //处理页码大于总页数   
    if (cP >= tP) {
        cP = tP;
    }
    //处理页码小于1   
    if (cP < 1) {
        cP = 1;
    }
    var trPg = $("trPager");
    var newCellOne = trPg.insertCell(0);
    newCellOne.width = "20%";
    var newCellTwo = trPg.insertCell(1);
    newCellTwo.width = "15%";
    newCellTwo.id = "pgSummary";
    var newCellThree = trPg.insertCell(2);
    newCellThree.width = "45%";
    newCellThree.id = "pgNumContext";
    var newCellFour = trPg.insertCell(3)
    newCellFour.width = "20%";

    newCellTwo.innerHTML = "共<span id='totalNum'>" + tN + "</span>项 第<span id='cuPgNumber' style='color:red'>" + cP + "</span>/<span id='sumPgNumber' >" + tP + "</span>页";
    var pageHtml = " <a  href='#' onclick='gotoPage(1)'>首页</a>";
    pageHtml += "<a id='prevPg'  href='#' onclick='goToNextPrev(-1)'> 上页 </a>";
    for (var i = 1; i < tP + 1; i++) {
        var numColor = "";
        if (i == 1) numColor = "red";
        pageHtml += "<a id='numPg" + i + "' style='color:" + numColor + "' href='#' onclick='gotoPage(" + i + ")'>" + i + " </a>";
    }
    pageHtml += "<a id='nextPg'  href='#' onclick='goToNextPrev(1)'> 下页</a>";
    pageHtml += "<a  href='#' onclick='gotoPage(" + tP + ")'> 尾页</a>";
    pageHtml += "&nbsp;<input name='pgNumber' type='text' id='pgNumber' size='3' onKeyPress='return handleEnterOnPgNumber();'>&nbsp;" +
            "<input name='goto' type='button' id='goto' value='go' onClick='forward()'>";
    newCellThree.innerHTML = pageHtml;
}

//构造页面跳转的js函数，函数中需要判断输入的页号是否是合法的数值   
function forward() {
    if (!(/^([-]){0,1}([0-9]){1,}$/.test($("pgNumber").value))) {
        //输入的值不合法   
        alert("请输入合法的页号！");
        $("pgNumber").focus();
        $("pgNumber").select();
    }
    else
        gotoPage($("pgNumber").value);
}

//处理在跳转页面上按下回车的情况   
function handleEnterOnPgNumber() {
    if (event.keyCode == 13) {
        forward();
        return false;
    }
    return true;
}

function gotoPage(oNum) {  // 页数不能为0或者为负数 (首页，尾页)
    if (oNum > 0) {
        var totalNumber = parseInt($("totalNum").innerText); //总记录数
        var curPgNumber = parseInt($("cuPgNumber").innerText);
        var totalPgNumber = parseInt($("sumPgNumber").innerText); // 总页数
        if (parseInt(oNum) <= totalPgNumber) {
            chgPages(oNum, totalPgNumber, totalNumber);
            for (var k = 1; k < totalPgNumber + 1; k++) {
                $("numPg" + k).style.color = "";
            }
            $("numPg" + oNum).style.color = "red";
            getPagerInfo(oNum);
        }
        else {
            alert("请输入合法的页号！");
            $("pgNumber").focus();
            $("pgNumber").select();
            return;
        }
    }
}

function goToNextPrev(oNum) {
    var addNum = parseInt(oNum);
    var totalNumber = parseInt($("totalNum").innerText); //总记录数
    var curPgNumber = parseInt($("cuPgNumber").innerText);
    var totalPgNumber = parseInt($("sumPgNumber").innerText); // 总页数

    //如果当前页是第一页，点击前一页不用刷新 //如果当前页是最后一页，点击下一页不用刷新
    if ((curPgNumber + addNum) > 0 && (curPgNumber + addNum) <= totalPgNumber) {
        chgPages(parseInt(curPgNumber + addNum), totalPgNumber, totalNumber);
        for (var k = 1; k < totalPgNumber + 1; k++) {
            $("numPg" + k).style.color = "";
        }
        $("numPg" + parseInt(curPgNumber + addNum)).style.color = "red";
        getPagerInfo(parseInt(curPgNumber + addNum));
    }
}

function chgPages(cuPg, toPg, tNum) {
    // $("totalNum").innerHTML = tNum;
    $("cuPgNumber").innerHTML = cuPg;
    //$("sumPgNumber").innerHTML = toPg;
}

function getPagerInfo(oNum) { // 处理请求，更新内容
    var xmlReq = createXMLHTTP();
    xmlReq.open("post", "/AjaxOperations.aspx?pgNumber=" + oNum, true);
    xmlReq.onreadystatechange = function() {
        if (xmlReq.readyState == 4) {
            if (xmlReq.status == 200) {
                //xmlReq.responseText为输出的那段字符串
                $("tbTest").innerHTML = xmlReq.responseText;
            }
            else {

                $("tbTest").innerHTML = "　　获取数据中，请稍等．．．";
                //alert("Connect the server failed!");

            }
        }
    }
    xmlReq.send(null);
}

Default.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebTest2008.Default" %>

<!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 runat="server">

 <script src="js/testJs.js" type="text/javascript"></script>

 <style type="text/css">
  A:link
  {
   color: #003399;
   text-decoration: none;
  }
  A:visited
  {
   color: #003366;
   text-decoration: none;
  }
  A:hover
  {
   color: #ff0000;
   text-decoration: underline;
  }
  A:active
  {
   color: #00ff00;
   text-decoration: none;
  }
 </style>
 <title></title>
</head>
<body onload="showPages(1, 10, 100)">
 <form id="form1" runat="server">
 <div>
  <div style="text-align: center" id="tbTest">
   第1页</div>
  <table cellspacing="0" style=" 100%; height: 30px" border="0" align="center">
   <tr id="trPager">
   </tr>
  </table>
 </div>
 </form>
</body>
</html>

Default.aspx.cs：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebTest2008
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

AjaxOperations.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxOperations.aspx.cs" Inherits="WebTest2008.AjaxOperations" %>

AjaxOperations.aspx.cs：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebTest2008
{
    public partial class AjaxOperations : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(Request["pgNumber"]))
            {
                //int pgNum = Convert.ToInt32(Request["pgNumber"]);

                Response.Write("第" + Request["pgNumber"] + "页");

            }
        }
    }
}

Ok了，在我的机器上（vs2008）测试通过，简单的ajax分页效果就实现了。
下一篇继续ajax实战。洗洗睡了。