快捷導(dǎo)航

Smarty結(jié)合Ajax實(shí)現(xiàn)無刷新留言本實(shí)例

更新時(shí)間：2007年01月02日 00:00:00 作者：

看了標(biāo)題你也許要說，留言本，很基本的東東?。≌l不會(huì)啊，還要用Smarty，這不找累嗎？別急，我要表達(dá)的是一種編程的思想和結(jié)構(gòu)，而不是證明我做的東西多有意義，通過它相信對(duì)初學(xué)者學(xué)習(xí)Smarty和ajax有些啟發(fā)。原本用ajax做的，可惜始終調(diào)試不成功，只好用手寫JS來弄了，不過不要緊，還是有一定價(jià)值的。站點(diǎn)結(jié)構(gòu)大家下了源代碼自己看，代碼不長(zhǎng)，應(yīng)該不會(huì)看煩^_^，聽我慢慢道來。
   現(xiàn)在都PHP5了OO（面向?qū)ο螅┖芰餍辛硕?，這里也不錯(cuò)過，首先來看下我們用OO來實(shí)現(xiàn)數(shù)據(jù)庫(kù)操作和連接：
[php]
<?php
/**************************

  頁(yè)面：dbclass.php
  作者：輝老大
  功能：定義數(shù)據(jù)庫(kù)操作類
**************************/
<?php
/**************************

  頁(yè)面：dbclass.php
  作者：輝老大
  功能：定義數(shù)據(jù)庫(kù)操作類
**************************/
class db{
       //創(chuàng)建構(gòu)造函數(shù)，作用：數(shù)據(jù)庫(kù)連接并選擇相應(yīng)數(shù)據(jù)庫(kù)
       public function __construct(){
     require('config.inc.php');
           mysql_connect($dbhost,$dbuser,$dbpassword) or die("error!");
     mysql_query("SET NAMES 'GBK'");
           mysql_select_db($dbname);
       }
    //執(zhí)行SQL語句函數(shù)
    public function query($sql){
        return mysql_query($sql);
    }
    //取得結(jié)果集數(shù)組函數(shù)
    public function loop_query($result){
        return mysql_fetch_array($result);
    }
    //創(chuàng)建析構(gòu)函數(shù)，作用：關(guān)閉數(shù)據(jù)庫(kù)連接
    public function __destruct(){
     return mysql_close();
    }
   }
?>
這個(gè)類有什么特點(diǎn)呢？首先介紹下__construct()是構(gòu)造函數(shù)，啥是構(gòu)造函數(shù)？通俗點(diǎn)講就是類被實(shí)例化后就自動(dòng)執(zhí)行的函數(shù)，__destruct()是啥？是析構(gòu)函數(shù)，它的作用就是在沒有任何方法指向這個(gè)對(duì)象時(shí)，便自動(dòng)銷毀對(duì)象，里面一般包含一些收尾的操作，比如關(guān)閉文件，關(guān)閉數(shù)據(jù)庫(kù)連接之類的方法，看到這你是不是明白一些了？沒錯(cuò)！在類實(shí)例化的時(shí)候自動(dòng)執(zhí)行帶有數(shù)據(jù)庫(kù)連接方法的構(gòu)造函數(shù)，在實(shí)例銷毀的時(shí)候執(zhí)行關(guān)閉數(shù)據(jù)庫(kù)連接的析構(gòu)函數(shù)，對(duì)于一些基本數(shù)據(jù)操作我們只要new一個(gè)$db對(duì)象，然后$db->query()...是不是很方便，當(dāng)然，這只是一個(gè)簡(jiǎn)單的例子，你還可以繼續(xù)擴(kuò)展。來看看 config.inc.php里面是什么：
很容易對(duì)不對(duì)，感興趣就接著看吧^_^，來看下模板文件：

<?php
/*************************

   頁(yè)面：config.inc.php
   作者：輝老大
   功能：數(shù)據(jù)庫(kù)參數(shù)變量設(shè)定
   $dbhost:主機(jī)名
   $dbuser:連接帳戶
   $dbpassword:連接密碼
   $dbname:數(shù)據(jù)庫(kù)名
*************************/
   $dbhost     = "localhost";
   $dbuser     = "root";
   $dbpassword = "7529639";
   $dbname     = "testdb";
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title><{$title}></title>
<style type="text/css">

</style>
<script language="javascript" src="./inc/ajax.js"></script>
</head>
<body>
<div align="right" id="check"></div>
<div id="result"><{*這里顯示留言內(nèi)容*}>
<{section name=loop loop=$bookinfo}><{*循環(huán)顯示留言*}>
用戶名：<{$bookinfo[loop].username}> 內(nèi)容：<{$bookinfo[loop].comment}><p>
<{/section}>
</div>
<form method="post" name="book" id="book">
  <table width="760" border="1" cellpadding="0" cellspacing="0">
<tr>
   <td width="80" height="30" align="center">用戶名：</td>
   <td height="30"> <input name="username" type="text" class="username" id="username"></td>
</tr>
<tr>
   <td width="80" height="120" align="center">留言內(nèi)容：</td>
   <td height="120"> <textarea name="comment" class="comment" id="comment"></textarea></td>
</tr>
  </table>
  <input type="button" name="button" value="發(fā)布" onClick="send('result');">
  </form>
</body>
</html>

模板中的內(nèi)容在<{}>中的一會(huì)會(huì)被PHP替換掉，這就實(shí)現(xiàn)了美工和程序員的分工，不錯(cuò)吧有關(guān)Smarty的內(nèi)容還請(qǐng)參考手冊(cè)，這里就不便多說。來看下頁(yè)面是怎么輸出模板的吧：

<?php
  /*****************************************
   Title :Smarty結(jié)合Ajax留言板實(shí)例
   Author:leehui1983(輝老大)
   Page Name:index.php
   Finish Date  :2006-12-17
  *****************************************/

  require('./libs/Smarty.class.php');//包含smarty類庫(kù)
  require('./inc/dbclass.php');//包含數(shù)據(jù)庫(kù)操作類

  $db = new db();//生成數(shù)據(jù)庫(kù)操作實(shí)例
  $smarty = new Smarty();//實(shí)例化smarty對(duì)象
  $smarty->template_dir = "./templates";//設(shè)置模板目錄
  $smarty->compile_dir  = "./templates_c"; //設(shè)置編譯目錄
  $smarty->caching      = false; //設(shè)置緩存方式
  /*****************************************************
  左右邊界符，默認(rèn)為{}，但實(shí)際應(yīng)用當(dāng)中容易與JavaScript
  相沖突，所以建議設(shè)成<{}>或其它。
  *****************************************************/
  $smarty->left_delimiter  = "<{";
  $smarty->right_delimiter = "}>";
  $smarty->assign('title','smarty結(jié)合ajax制作簡(jiǎn)單留言板');//替換模板內(nèi)容
  //設(shè)置初始頁(yè)面由Smarty顯示的留言內(nèi)容
  $rt=$db->query("select * from bookinfo order by id desc");
  while($rs=$db->loop_query($rt)){
   $array[]=array("username"=>$rs['username'],"comment"=>$rs['comment']);
  }
  $smarty->assign("bookinfo",$array);
  unset ($array);//銷毀數(shù)組變量
  $smarty->display("index.tpl");//編譯并顯示位于./templates下的index.tpl模板
?>
頁(yè)面實(shí)例的注釋還是比較多的，大家參考下Smarty手冊(cè)這個(gè)是So easy的！！呵呵～～～～
接下來到了介紹ajax的時(shí)候，這里我們用一個(gè)基本的開發(fā)框架來實(shí)現(xiàn)，關(guān)于ajax的知識(shí)建議大家看看網(wǎng)上非常流行的電子教程ajax開發(fā)簡(jiǎn)略
var http_request=false;
  function send_request(url){//初始化，指定處理函數(shù)，發(fā)送請(qǐng)求的函數(shù)
http_request=false;
//開始初始化XMLHttpRequest對(duì)象
if(window.XMLHttpRequest){//Mozilla瀏覽器
  http_request=new XMLHttpRequest();
  if(http_request.overrideMimeType){//設(shè)置MIME類別
http_request.overrideMimeType("text/xml");
  }
}
else if(window.ActiveXObject){//IE瀏覽器
  try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
  }catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
  }
}
if(!http_request){//異常，創(chuàng)建對(duì)象實(shí)例失敗
  window.alert("創(chuàng)建XMLHttp對(duì)象失??！");
  return false;
}
http_request.onreadystatechange=processrequest;
//確定發(fā)送請(qǐng)求方式，URL，及是否同步執(zhí)行下段代碼
http_request.open("GET",url,true);
http_request.send(null);
  }
  //處理返回信息的函數(shù)
  function processrequest(){
if(http_request.readyState==4){//判斷對(duì)象狀態(tài)
   if(http_request.status==200){//信息已成功返回，開始處理信息
document.getElementById(reobj).innerHTML=http_request.responseText;
  }
  else{//頁(yè)面不正常
alert("您所請(qǐng)求的頁(yè)面不正常！");
  }
}
  }
  function send(obj){
var f=document.book;
var username=f.username.value;
var comment=f.comment.value;
if(username==""||comment==""){
document.getElementById(obj).innerHTML="<font color=red>請(qǐng)?zhí)顚懲暾?lt;/font>";
return false;
}
else{
send_request('checkbookinfo.php?username='+username+'&comment='+comment);
reobj=obj;
}
  }

這樣我們點(diǎn)“發(fā)布”按鈕，數(shù)據(jù)就會(huì)交由服務(wù)器異步處理，通過JS來組織異步更新，在發(fā)過留言后你馬上就能看見你的留言而不是傳統(tǒng)的等待頁(yè)面跳轉(zhuǎn)，那么數(shù)據(jù)傳到哪里處理呢？看這里：
<?php

  /*****************************************
   Title :Smarty結(jié)合Ajax留言板實(shí)例
   Author:leehui1983(輝老大)
   Page Name:checkbookinfo.php
   Finish Date  :2006-12-17
  *****************************************/
  header("Content-type: text/html;charset=GBK");//輸出編碼,避免中文亂碼
  include('./inc/dbclass.php');//包含數(shù)據(jù)庫(kù)操作類
  $db=new db();//生成數(shù)據(jù)庫(kù)操作實(shí)例
  $sql="insert into bookinfo values(0,'".$comment."','".$username."')";
  $db->query($sql);
  $querysql="select * from bookinfo order by id desc";
  $result=$db->query($querysql);
  while($rows=$db->loop_query($result)){//打印留言列表，用于實(shí)時(shí)更新
  //$arr.="用戶名：{$rows['username']} 內(nèi)容：{$rows['comment']}<p>";
  echo '用戶名：'.$rows['username'].' 內(nèi)容：'.$rows['comment'].'<p>';
  }
  //echo $arr;

?>

嗯，先插入數(shù)據(jù)，在將更新后的數(shù)據(jù)通過JS組織顯示，AJAX看來真的不錯(cuò)哦！大體就介紹完了，不知道大家想過沒有，加個(gè) iframe可以改成什么?對(duì)！無刷新聊天室，發(fā)揮你的能力，實(shí)現(xiàn)一個(gè)看看。這個(gè)例子用到了OO，AJAX，SMARTY，東西還是蠻多滴，希望大家喜歡，我已經(jīng)決定將此文向PHP雜志投稿，大家若是轉(zhuǎn)載，還希望注明版權(quán)，謝謝！最后來個(gè)效果圖～～～～