Ajax翻页效果--《征服Ajax》的例子--php版
最近在看《征服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 infowhere 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)'>$item</td><td class='modifyDate' >$item</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;
}
页:
[1]