一个简单的AJAX+PHP+Mysql的应用

33条回复

最近开始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>