本案例代码已经提供下载，点击这里！
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对象状态的改变，为此要设置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条的时候)。
