使用Ajax技術可以實現無需頁面刷新的數據提交和顯示，極大地提升用戶體驗。本文將探討如何使用Ajax提交數據到另一個頁面，并通過刷新頁面展示新數據。通過舉例和詳細解釋，讀者將了解如何使用Ajax實現這一功能。
在Web開發中，數據的提交和顯示是常見的需求。傳統的方式是用戶填寫表單后，頁面刷新并將數據提交到服務器，然后服務器返回一個新的頁面來顯示提交的數據。這種方式會導致頁面重新加載，給用戶帶來不必要的等待時間。而使用Ajax，頁面可以在不刷新的情況下進行數據提交和刷新，大大提高了用戶體驗。
下面舉一個簡單的例子來說明。假設我們正在開發一個留言板應用，用戶可以在輸入框中輸入留言，點擊“提交”按鈕后，頁面應該更新并顯示用戶剛剛提交的留言。
假設我們有一個HTML文件，包含一個輸入框和一個提交按鈕，如下所示：

html
<p>請輸入您的留言：</p>
<input type="text" id="message">
<button onclick="submitMessage()">提交</button>

在JavaScript部分，我們需要編寫一個函數，用于提交留言并更新頁面。我們可以使用Ajax來實現這個功能。首先，我們需要創建一個XMLHttpRequest對象，并指定一個回調函數來處理服務器返回的數據。然后，我們使用open()方法指定請求的類型（POST或GET）和地址。最后，我們使用send()方法發送請求。

javascript
<script>
function submitMessage() {
var message = document.getElementById("message").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 成功接收到服務器返回的數據
document.body.innerHTML = xhr.responseText;
} else {
// 發生錯誤
alert("發生錯誤：" + xhr.status);
}
}
};
xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("message=" + message);
}
</script>

在這個例子中，我們使用POST請求將留言提交到服務器上的submit.php頁面。在發送請求之前，我們使用setRequestHeader()方法設置請求頭，告訴服務器我們正在發送表單數據。然后，我們使用send()方法將留言數據發送到服務器。
當我們點擊“提交”按鈕時，JavaScript代碼將被執行并發送請求。服務器接收到請求后會處理留言，并將處理結果返回。在我們的回調函數中，我們通過檢查readyState和status屬性來判斷是否收到了響應，然后使用responseText屬性獲取服務器返回的數據。最后，我們將頁面的內容更新為服務器返回的數據。
通過這個簡單的例子，我們可以看到，使用Ajax提交數據到另一個頁面并實時刷新的過程是相對簡單的。只需要創建一個XMLHttpRequest對象，設置回調函數，發送請求，并處理服務器返回的數據。這種方式不僅可以提高用戶體驗，還可以減少頁面的加載時間，提升網站的性能。
總結起來，使用Ajax技術可以實現無需頁面刷新的數據提交和顯示。通過上述的例子和解釋，讀者可以更好地理解如何使用Ajax將數據提交到另一個頁面，并在頁面刷新時展示新數據。希望本文對于讀者理解和應用Ajax技術有所幫助。