AJAX（Asynchronous JavaScript and XML）是一種在網頁中向服務器發送和接收數據的技術，它可以在不刷新整個網頁的情況下更新部分網頁內容。在很多情況下，我們需要通過表單提交數據給服務器，并獲取服務器返回的結果。本文將介紹如何利用AJAX生成一個通過表單提交數據的網頁，并展示服務器返回的結果。

假設我們有一個簡單的登錄頁面，要求用戶輸入用戶名和密碼，然后點擊“登錄”按鈕提交數據給服務器。服務器會驗證用戶的身份，并返回驗證結果給客戶端。我們可以使用AJAX來實現這個功能。

首先，我們需要創建一個HTML表單來獲取用戶輸入的用戶名和密碼：

<form id="loginForm" method="POST" action="login.php">
<label for="username">用戶名：</label>
<input type="text" name="username" id="username" required><br>
<label for="password">密碼：</label>
<input type="password" name="password" id="password" required><br>
<input type="submit" value="登錄">
</form>

上述代碼創建了一個包含兩個輸入字段（用戶名和密碼）和一個提交按鈕的表單。表單的提交目標是“login.php”，該頁面會處理用戶提交的數據并返回驗證結果。

接下來，我們使用JavaScript代碼來處理表單的提交事件，并使用AJAX發送請求給服務器：

<script>
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單提交的默認行為
var form = document.getElementById("loginForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 處理服務器返回的結果
// ...
}
};
xhr.send(formData);
});
</script>

上述代碼首先阻止了表單的默認提交行為，然后獲取了表單中的數據，并將其打包成一個FormData對象。接著，使用XMLHttpRequest對象創建了一個POST請求，并設置了請求的目標地址。在請求的狀態發生變化時，會觸發一個回調函數來處理服務器返回的結果。

最后，我們需要在處理服務器返回結果的代碼中展示結果給用戶，可以使用一個div元素來顯示服務器返回的消息：

<div id="message"></div>

var response = xhr.responseText;
document.getElementById("message").innerHTML = response;

上述代碼將服務器返回的結果賦值給response變量，然后將其設置為div元素的innerHTML屬性，從而將結果顯示給用戶。

通過上述的代碼，我們成功地使用AJAX生成了一個通過表單提交數據的網頁，并展示了服務器返回的結果。

總的來說，AJAX是一種強大的技術，可以實現網頁的動態更新和數據交互。通過使用AJAX，我們可以在不刷新整個網頁的情況下，向服務器發送和接收數據。這在處理表單提交和展示服務器返回結果的場景中非常有用。