PHP Ajax留言板

本案例代码已经提供下载，点击这里！

AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。


在本文的例子中，为了让初学者对ajax的实现原理有一个更加深刻的认识，没有使用jquery等框架，整个异步请求都是通过编写javascript来完成。

本例共包括3个文件，分别为：
config.php 连接数据库
message.php 用户访问的留言界面，当用户发送留言时，将留言结果以异步请求的方式发送到message_ajax.php。
message_ajax.php  处理来自message.php中的异步请求并返回结果

下面我按实际编写的步骤来说明：
创建数据库和表 为了让问题不至于变得复杂，这里我是在test数据库中创建了一个表t_message。SQL语句如下：

create table t_message(id int auto_increment primary key,email varchar(100),content text);

编写用户留言界面
留言界面非常简洁，就是一个表单，在message.php中添加以下html代码如下：

<div style="width:800px;margin:0 auto;">	<form action="#" >	 <fieldset>    <legend>Leave Message Here</legend>    <table>		<tr>			<td>Email:</td>			<td><input name="email"  id="email" type="email" /></td>		</tr>		<tr>			<td>Content:</td>			<td><textarea name="content" id="content" cols="80" rows="6" ></textarea></td>		</tr>		<tr>			<td></td>			<td><input name="button1" type="button" value="Post" onclick="doRequestUsingPOST()" /></td>		</tr>	</table>  </fieldset> </form></div>

异步请求
使用XMLHttpRequest对象发送请求的基本步骤如下： 创建一个XMLHttpRequest的引用 告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要设置onreadystatechange属性 指定请求的属性。open() 将请求发送给服务器。send() xmlHttp.responseText将响应提供为一个串

创建一个XMLHttpRequest的引用

 var xmlHttp;  function createXMLHttpRequest(){    if(window.ActiveXObject)      {         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");      }      else if(window.XMLHttpRequest)      {        xmlHttp = new XMLHttpRequest();      }else{        alert("浏览器不支持XMLHttpRequest对象");      }  }

创建查询字符串

function createQueryString(){    var email = document.getElementById("email").value;    var content = document.getElementById("content").value;    var queryString = "email="+ email + "&content="+ content ;    //alert(queryString);    return queryString;  }

以POST方式发送异步请求

function doRequestUsingPOST(){    createXMLHttpRequest();    var url = "message_ajax.php?timeStamp=" + new Date().getTime();    var queryString = createQueryString();    xmlHttp.open("POST",url,true);    xmlHttp.onreadystatechange = handleStateChange;    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");    xmlHttp.send(queryString);  }

处理状态变更，解析message_ajax.php返回的结果

function handleStateChange(){     if(xmlHttp.readyState == 4){        if(xmlHttp.status == 200){           parseResult();           //alert("OK");        }     }  }  function parseResult(){    var responseDiv = document.getElementById("newmessage");    if(responseDiv.hasChildNodes()){      responseDiv.removeChild(responseDiv.childNodes[0]);    }    var responseText = xmlHttp.responseText;//document.createTextNode(xmlHttp.responseText);    responseDiv.innerHTML = responseText;    //responseDiv.appendChild(responseText);  }

服务端处理异步请求
然后我们看下服务端message_ajax.php是怎样处理请求的

<?php        include_once("config.php");    	$email = strip_tags($_POST['email']);    	$content = strip_tags($_POST['content']);    	$sql1 = "insert into t_message values(NULL, '"  . $email . "' ,'".$content."')";        mysql_query($sql1);      $sql = "SELECT * FROM `t_message` order by id desc LIMIT 10";      $result = mysql_query($sql);      $responseText = "<table>";      while($message = mysql_fetch_array($result)){      	$onemessage = "				<tr>					<th style='background-color:gray;'>Email:</th>					<td>".$message['email']."</td>				</tr>				<tr style='border-bottom:1px gray dashed;'>					<th style='background-color:gray;'>Content:</th>					<td>".$message['content']."</td>				</tr>";				$responseText = $responseText.$onemessage;			}			$responseText = $responseText."</table>";			echo $responseText;?>

从上面代码可以看到，服务端首先需要接收客户端发送过来的请求，在本例中发送的参数就是email和content。
然后，服务端将这些数据保存到数据库中，并查询出数据库中最近的10条留言信息，构造成HTML字符串，并echo。
于是客户端便可接收到，实现无刷新显示最近的10条留言(当然需要留言超过10条的时候)。

如果你有神马问题，请留言讨论！