本案例代碼已經提供下載，點擊這里！

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中文網，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的php 留言板项目 ajax,PHP Ajax留言板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。