Ajax翻页效果--《征服Ajax》的例子--php版

renduoa

　　最近在看《征服Ajax》这本书，里面的例子后台都是用.net的，但是我自己不懂.net，就php会一点，所以决定把看过的例子后台用php重新写好了。。这个是里面的第一个例子，第12章 服务器端编程里的例子，比较简单。
　　1.系统描述
　　现在假设要进行翻页的是一个留言版的所有留言，结果中仅显示标题，并提供按标题进行关键字查询的功能。数据库是page_turning，留言表info，有四个字段，id，title，content，date。
　　现在要实现的功能包括：                  
　　a：使用ajax异步获取某页数据，从而实现无刷新显示。
　　b：提供查询功能，并能够对查询结果同样有分页效果。  
　　
　　2.客户端设计
　　a:页面结构
　　界面由两个部分构成，一个是查询用的表单，一个是用于显示结果的表格结构，如图：   
　　


         


Code
<form name='form1'>
  <label for='title'>标题关键字:</label>
  <input type='text' id='title' name='title'/>
  <input type='button' value='查询' onclick='getPage(1)'/>
  <span id='tip'>正在加载中.</span>
</form>
<div id='content'>
</div>　　这段代码中，form1用于让用户输入关键字进行查询，表单中<span>标记用于提示用户正在和服务器通信，查询按钮的单击事件被设置为"getPage(1)",即获取第一页的数据。
　　b：设计Ajax逻辑
　　Ajax逻辑的目的在于向服务器端发起异步请求，并将请求的结果显示于页面，由服务器端直接生成表格形式的留言列表，在客户端仅需要将其直接加入到内容容器(<div id='content'>);   
　　代码:
　　

Code
  var content = document.getElementById('content');
  var tip = document.getElementById('tip');
  function getPage(page)
  {
   
      var key = document.forms.form1.title.value;
      if(key != '')
      {
          tip.style.display = 'inline';
                  //将请求发送到后台，connection函数的作用是发送ajax请求，show函数作为回调函数，内容以text的方式返回
          connection('show.php?&page='+page+'&key='+key,show,'Text');
      }
      else alert('You should enter a key before searching');
  }

  function show(text)
  {
      content.innerHTML = '';
      tip.style.display = 'none';
      content.innerHTML = text;

  }

  function showContent(id)
  {
      window.open("showContent.php?&id="+id);
  }

　　
　　这段代码里，getPage(page)函数，把key和需要的第几页传递到后台去查询，查询结束后返回，在show函数里处理，即show函数里把传回来的结果显示在div中。
　　showContent(id)函数，根据留言的id，显示留言的内容。  
　　3.服务器端设计
　　页面是show.php,它接受从客户端传过来的key，page参数，根据关键字和需要显示的页码，来决定要显示的留言信息。如果显示的不是第一页，在最下面的显示页码的一栏里没有第一页这一项，否则有，如果显示的不是最后一页，在最下面的显示页码的一栏里没有下一页这一项。
　　具体内容：
　　



Code
<?php
$pageSize = 10;
$key = $_GET['key'];        //关键字
$page = $_GET['page'];        //第几页

include 'http://www.cnblogs.com/../conn_forphp/conn.php';  //连接数据库的文件
mysql_select_db("page_turning") or die("Could not select database");

$query = "select * from info where title like '%$key%'";
$result = mysql_query($query) or die("Query failed : " . mysql_error());

$counts = mysql_num_rows($result);        //一共搜索到多少条记录

$pageNum = floor($counts/$pageSize)+1;  //一共有多少页

$strHTML = '';    //要插入的html语句
$strHTML .= "<table></tbody>";
if($counts >= 0)
{
    $numInfront = $pageSize * ($page-1);
    $query1 = "select * from info  where title like '%$key%' limit $numInfront,$pageSize";
    $result1 = mysql_query($query1) or die("Query failed:".mysql_error());
    $counts1 = mysql_num_rows($result1);
    $strHTML .= "<tr><td class='title'>标题</td><td class='modifyDate'>修改时间</td></tr>";
    while($item = mysql_fetch_row($result1))
    {
        $strHTML .= "<tr><td class='title' onclick='javascript:showContent($item[0])'>$item[1]</td><td class='modifyDate' >$item[3]</td></tr>";
        
    }
   
    $strHTML .= "</tbody></table>";

    $strHTML .= '<br>';
   
    if($page != 1)
    {
        $strHTML .= "<a href='javascript:getPage(1)' title = '第1页'>第一页</a>";
    }
    for($i=1; $i<=$pageNum; $i++)
    {
        $strHTML .= "<a href='javascript:getPage(".$i.")' title = '第$i页'>[$i]</a>";

    }
    if($page != $pageNum)
    {
        $strHTML .= "<a href='javascript:getPage(".($page+1).")' title = 第'$page+1'页>下一页</a>";
    }
    echo $strHTML;

}
mysql_close();
?>
　　
　　下面是封装好的connection函数
　　

Code
        function createXmlHttpRequest(url)
        {
            var xmlHttp;
            try
            {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e)
            {
                try
                {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(E)
                {
                    xmlHttp = false;
                }
            }
            
            if(!xmlHttp && typeof XMLHttpRequest != "undefined")
            {
                xmlHttp = new XMLHttpRequest();
            }
            return xmlHttp;
        }

        function connection(url,fun,style)
        {
            //alert(fun);
            var xmlHttp = createXmlHttpRequest();
            var xmlDoc;
            xmlHttp.onreadystatechange = function()
            {
                if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    if(style == "Text")
                    {
                        xmlDoc = xmlHttp.responseText;
                    }
                    else if(style == "XML")
                    {
                        xmlDoc = xmlHttp.responseXML;
                    }

                    var fun1 = fun;
                    fun1(xmlDoc);
                    }
                }
            };
            xmlHttp.open("GET", url, true);
            xmlHttp.send(null);
            //alert(this.xmlDoc);
            //return xmlDoc;
        }