最近开始PHP语言及Ajax的学习，做个小小的练习记录下来，类似于学习其他语言的”Hello World！“。
1、任务描述
学习XMLHttpRequest对象，通过XMLHttpRequest对象向服务器发出请求，通过服务器端脚本（PHP）获取返回的MySQL中的数据。
2、结构描述
服务器端
请求处理页（SimpleResponse.php)、解析页(parser.php)、模版页(template\template1.html)、数据处理页(sql.php)，请求处理页根据选择的模版使用解析页提供的功能对数据进行处理，返回需要的数据。
客户端
测试页(SimpleResponse.html)
3、部分程序代码
3.1 sql.php
<?
/* 帐号密码等设定 请使用自己的数据库处理代码*/
$host = "localhost";
$user = "root";
$pass = "";
$database = "test";
function sql_query($query) {
global $host,$user,$pass,$database;
$conn=@mysql_connect( $host, $user, $pass );
$result=@mysql_db_query( $database, $query, $conn);
@mysql_data_seek($result,0);
while($row=@mysql_fetch_row($result)) {
$output[] = $row;
}
@mysql_free_result($result);
@mysql_close($conn);
return $output;
}
......
3.2 parser.php
<?
/*************************************
功能说明：解析网页模板，并替换标记输出
$filename 文件名及位置
$parser_array 格式为 $array['key']=value
***********************************/
function flag_parser($filename,$parser_array) {
$handle = fopen ($filename, "r");
$buffer = fread ($handle, filesize ($filename));
fclose ($handle);
while(list($key,$value)=each($parser_array)) {
$buffer = str_replace($key,$value,$buffer);
}
return $buffer;
}
?>
3.3 template\template1.html
<table width="100%" border="0" cellpadding="0" cellspacing="2" bgcolor="#FFEAFF">
<tr>
<td width="10%" bgcolor="#CCCCCC">{ID}</td>
<td width="30%" bgcolor="#CCCCCC">{Title}</td>
<td width="40%" bgcolor="#CCCCCC">{Des}</td>
<td width="20%" bgcolor="#CCCCCC">{Date}</td>
</tr>
</table>
3.4 simpleResponse.php
<?
$page = "template/template1.html";
include(‘sql.php’);
include(‘parser.php’);
$sql = "SELECT * FROM `ajaxdatas`";
$data = sql_query($sql);
for($i=0;$i<count($data);$i++)
{
$array['{ID}'] = $data[$i][0];
$array['{Title}'] = $data[$i][1];
$array['{Des}'] = $data[$i][2];
$array['{Date}'] = $data[$i][3];
$result .= flag_parser($page,$array);
}
echo $result;
?>
3.5 测试页(SimpleResponse.html)
<?xml version="1.0" encoding="gb2312"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Simple XMLHttpRequest</title>
<script language="JavaScript" type="text/JavaScript">
var xmlHttp;
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function startRequest()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("POST","SimpleResponse.php",true);
xmlHttp.send(null);
}
function handleStateChange()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
document.getElementById("results").innerHTML = xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="2" bgcolor="#FF9900">
<tr>
<td bgcolor="#FFFFFF">
<div id="results">Click Button Get Datas </div></td>
</tr>
<tr>
<td bgcolor="#99FF00">
<form action="#">
<div align="center">
<input type="button" value="Get MySQL Datas" onclick="startRequest();" />
</div>
</form></td>
</tr>
</table>
</body>
</html>
