Ajax是一種在網頁上無需刷新整個頁面的技術，通過使用Ajax，我們可以實現在不刷新頁面的情況下獲取頁面上的值。在這篇文章中，我們將學習如何使用Ajax來獲取頁面上的值，并且我們會通過一些具體的示例來加深理解。

在之前的Web開發中，當我們需要從頁面上獲取某個元素的值時，通常是在后臺完成請求處理后再將結果返回給前端。這將導致整個頁面的刷新，影響用戶體驗。有了Ajax，我們可以在后臺進行數據處理的同時，只更新頁面上我們真正關心的部分，從而提高用戶體驗。

下面我們以一個簡單的用戶登錄界面為例，來說明如何使用Ajax來獲取頁面上的值。假設我們的登錄界面上有一個輸入框用于輸入用戶名，并且有一個按鈕用于觸發登錄操作。我們希望在用戶點擊登錄按鈕后，獲取輸入框中的用戶名，并發送Ajax請求將其發送到后臺進行驗證。

<input type="text" id="username" name="username" />
<button onclick="login()">登錄</button>
<script>
function login() {
var username = document.getElementById("username").value;
// 發送Ajax請求
// ...
}
</script>

在上面的示例代碼中，我們首先通過JavaScript獲取了輸入框中的值，然后在login函數中，我們可以使用這個值來進行自定義的處理。比如，我們可以在這里發送Ajax請求來將用戶名發送到后臺進行驗證。

使用Ajax發送請求一般需要借助于XMLHttpRequest對象。我們可以在login函數中創建一個XMLHttpRequest對象，并將用戶名作為參數傳遞給后臺。下面是一個簡單的示例：

function login() {
var username = document.getElementById("username").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/login", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 在這里處理后臺返回的數據
// ...
}
};
xhr.send("username=" + encodeURIComponent(username));
}

在上面的代碼中，首先我們創建了一個XMLHttpRequest對象xhr，并使用open方法指定了請求的方法、URL和是否使用異步方式發送請求。然后，我們通過setRequestHeader方法設置了請求頭信息，告訴服務器我們將發送的數據類型為表單數據。接下來，我們在send方法中發送了一個編碼后的參數“username=xxx”，將用戶名作為參數發送到服務器。

當服務器接收到請求并完成處理后，我們可以通過xhr的onreadystatechange事件來獲取服務器返回的數據。在示例代碼中，我們通過使用JSON.parse方法將返回的JSON字符串解析為JavaScript對象，并在這里處理后臺返回的數據。

通過上面的示例，我們可以看到如何使用Ajax來獲取頁面上的值，并發送到后臺進行處理。Ajax技術能夠提供更好的用戶體驗，同時也減少了對服務器的負載。在實際的Web開發中，我們可以根據具體的需求，靈活運用Ajax來實現更加復雜的功能。