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

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代码如下：

Leave Message Here Email:

Content:

异步请求

使用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是怎样处理请求的

"; while($message = mysql_fetch_array($result)){ $onemessage = "

Email:".$message['email']."

Content:".$message['content']."";$responseText = $responseText.$onemessage;}$responseText = $responseText."";echo $responseText;?>

从上面代码可以看到，服务端首先需要接收客户端发送过来的请求，在本例中发送的参数就是email和content。

然后，服务端将这些数据保存到数据库中，并查询出数据库中最近的10条留言信息，构造成HTML字符串，并echo。

于是客户端便可接收到，实现无刷新显示最近的10条留言(当然需要留言超过10条的时候)。

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

本文原创发布php中文网，转载请注明出处，感谢您的尊重！