http://www.jzxue.com/wangzhankaifa/java ... -1030

　最近在看《征服Ajax》这本书，里面的例子后台都是用.net的，但是我自己不懂.net，就php会一点，所以决定把看过的例子后台用php重新写好了。。这个是里面的第一个例子，第12章 服务器端编程里的例子，比较简单。

　　1.系统描述

　　现在假设要进行翻页的是一个留言版的所有留言，结果中仅显示标题，并提供按标题进行关键字查询的功能。数据库是page_turning，留言表info，有四个字段，id，title，content，date。

　　现在要实现的功能包括：

　　a：使用ajax异步获取某页数据，从而实现无刷新显示。

　　b：提供查询功能，并能够对查询结果同样有分页效果。

　　2.客户端设计

　　a:页面结构

　　界面由两个部分构成，一个是查询用的表单，一个是用于显示结果的表格结构，如图：

　　这段代码中，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);
}[/code]

　　这段代码里，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函数

　　 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;
}[/code]