Ajax實現頁面無重新整理發表評論 for Php

大家都有在網站發表評論的經曆，傳統的發表過程無非是：發表－>提交頁面表單－>等待重新整理頁面，這樣在網路比較擁擠的時候，往往需要漫長的等待，今天介紹用PHP+Ajax實現頁面無重新整理發表評論，希望對初學ajax的PHPer有所協助。    那麼首先，我們需要一個基本的ajax開發架構，檔案ajax.js就包含了這個架構，代碼如下 var  http_request = false ;
    function  send_request(url){ // 初始化，指定處理函數，發送請求的函數
     http_request = false ;
// 開始初始化XMLHttpRequest對象
if (window . XMLHttpRequest){ // Mozilla瀏覽器
   http_request = new  XMLHttpRequest();
    if (http_request . overrideMimeType){ // 設定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){ // 異常，建立對象執行個體失敗
   window . alert( " 建立XMLHttp對象失敗。 " );
    return   false ;
}
http_request . onreadystatechange = processrequest;
// 確定發送請求方式，URL，及是否同步執行下段代碼
     http_request . open( " GET " , url , true );
http_request . send( null );
   }
    // 處理返回資訊的函數
     function  processrequest(){
     if (http_request . readyState == 4 ){ // 判斷對象狀態
       if (http_request . status == 200 ){ // 資訊已成功返回，開始處理資訊
    document . getElementById(reobj) . innerHTML = http_request . responseText;
   }
    else { // 頁面不正常
    alert( " 您所請求的頁面不正常。 " );
   }
    }
   }
     function  checkfourm(obj){
      var  f = document . fourm;
      var  newfourm = f . newfourm . value;
      var  username = f . username . value;
      var  id = f . id . value;
      if (username == "" ){
            document . getElementById(obj) . innerHTML = " <img src=images/false.gif> <font color=red>您必須先登入。</font> " ;
       return   false ;
     }
      else   if (newfourm == "" ){
      document . getElementById(obj) . innerHTML = " <img src=images/false.gif> <font color=red>您還沒填寫評論內容。</font> " ;
       return   false ;
     }
      else {
      document . getElementById(obj) . innerHTML = " 正在發送資料... " ;
      send_request( ' sendnewfourm.php?username= ' + username + ' &newfourm= ' + newfourm + ' &id= ' + id);
      reobj = obj;
     }
    }  有一點ajax基礎的通過注釋，應該都可以看懂這段代碼，我們可以看出，當我們開始發表評論的時候，在一個特定位置先顯示：正在發送資料...。接著調用回呼函數處理資料。那麼請看伺服器端的代碼：

  <? php
    header ( ' Content-Type:text/html;charset=GB2312 ' ); // 避免輸出中文亂碼，linux下不需要
    $username = trim ( $_GET [ ' username ' ]);
    $newfourm = trim ( $_GET [ ' newfourm ' ]);
    $id = $_GET [ ' id ' ];
    $time = date ( " Y-m-d " );
   
    include ( ' inc/config.inc.php ' );
    include ( ' inc/dbclass.php ' );
    $db = new  db; // 從資料庫操作類產生執行個體
    $db -> mysql ( $dbhost , $dbuser , $dbpassword , $dbname ); // 調用串連參數函數
    $db -> createcon(); // 調用建立串連函數 
  
    $addsql = " insert into cr_fourm values(0,'$newfourm','$username','$time',$id) " ;
    $db -> query( $addsql );
    echo " <img src=images/pass.gif> <font color=red>評論已成功發表。</font> " ;
    // echo $addsql;
    $db -> close(); // 關閉資料庫連接
?>

由於jsvascript採用UTF8編碼，在windows下採用ajax回送伺服器的返回資訊就會出現亂碼，因此在win下應用開頭第一句是非常必要的。中間那段兩個包含檔案是資料庫操作類和資料庫配置資訊，我個人習慣將基本的資料庫操作寫成一個類，方便調用。到這裡相信大家已經基本明白這個程式的工作原理了，在給出頁面的HTML代碼： < table width = " 100% "  border = " 0 "  cellspacing = " 0 "  cellpadding = " 0 " >
        < tr >
          < td align = " center " ><? php  echo   $rows_p [p_info]; ?></ td >
        </ tr >
        < tr >
          < td align = " center " >< br >< br >< iframe frameborder = " 0 "  scrolling = " auto "  src = " showfourm.php?picid=<?=$id;?> "  style = HEIGHT : 250px;VISIBILITY : inherit;WIDTH : 98 % ;Z - INDEX : 2   ></ iframe >
</ td >
        </ tr >
        < tr >
          < td align = " center " >< br >< br >
    < div align = " center "  id = " result " ></ div >
    < form name = " fourm " >
    < table width = " 100% "  border = " 0 "  cellspacing = " 0 "  cellpadding = " 0 " >
            < tr >
              < td height = " 25 " >  快速發表評論 < span  class = " STYLE1 " > （必須先登陸）使用者名稱：
                  < input name = " username "  type = " text "  value = " <?=$username?> "  readonly >
              </ span ></ td >
            </