在網頁開發中，我們經常需要獲取用戶在頁面上輸入的內容。有時候我們需要實時獲取輸入框的內容，例如實時搜索功能、即時聊天等。傳統的方法是在輸入框中添加事件監聽器，當用戶輸入時觸發相應的回調函數。然而，這種方法不利于頁面性能優化，因為每次觸發事件都會發送請求到服務器。解決這個問題的一個好辦法是使用Ajax來獲取頁面輸入。通過使用Ajax，我們可以在不刷新整個頁面的情況下，實時獲取用戶輸入的內容，從而提高頁面性能和用戶體驗。
例如，假設我們有一個搜索框，用戶在輸入框中輸入關鍵字后，頁面會實時顯示匹配的結果。使用Ajax獲取頁面輸入的內容可以達到更好的效果。當用戶在輸入框中輸入文字時，我們可以發送Ajax請求到服務器，服務器根據用戶輸入的關鍵字，返回匹配的結果并更新頁面。這樣用戶就可以方便地找到他們需要的信息，而不需要刷新整個頁面來獲取搜索結果。
下面是一個使用Ajax獲取頁面輸入的示例代碼：

<input type="text" id="searchInput" placeholder="請輸入關鍵字" oninput="search()">
<ul id="searchResults"></ul>
<script>
function search() {
var keyword = document.getElementById("searchInput").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var results = JSON.parse(xhr.responseText);
updateResults(results);
} else {
console.error("請求失敗");
}
}
};
xhr.open("GET", "/search?keyword=" + encodeURIComponent(keyword), true);
xhr.send();
}
function updateResults(results) {
var ul = document.getElementById("searchResults");
ul.innerHTML = "";
for (var i = 0; i < results.length; i++) {
var li = document.createElement("li");
li.textContent = results[i];
ul.appendChild(li);
}
}
</script>

在上面的代碼中，我們使用oninput事件監聽用戶在輸入框中的輸入。當用戶輸入文字時，search()函數會被觸發。在search()函數中，我們首先獲取輸入框中的文字，然后創建一個XMLHttpRequest對象。接下來，我們設置xhr.onreadystatechange函數，該函數用于監聽Ajax請求的狀態變化。當xhr.readyState的值為XMLHttpRequest.DONE時，說明請求已完成。在這個狀態下，我們可以通過xhr.status來判斷請求是否成功，如果成功則可以獲取服務器返回的結果。
在updateResults()函數中，我們首先獲取用于顯示搜索結果的ul元素，然后清空其內容。接下來，我們遍歷服務器返回的結果，為每個結果創建一個li元素，并將其添加到ul元素中。這樣，搜索結果就會實時顯示在頁面上。
通過使用Ajax獲取頁面輸入，我們可以大大提高用戶體驗和頁面性能。無論是實時搜索、即時聊天還是其他需要實時獲取用戶輸入內容的場景，Ajax都是一個強大的工具。通過合理地使用Ajax，我們可以讓用戶更加方便地獲取所需信息，并提升網頁的易用性和吸引力。