在網(wǎng)頁開發(fā)中，我們經(jīng)常需要獲取用戶在頁面上輸入的內(nèi)容。有時候我們需要實時獲取輸入框的內(nèi)容，例如實時搜索功能、即時聊天等。傳統(tǒng)的方法是在輸入框中添加事件監(jiān)聽器，當用戶輸入時觸發(fā)相應的回調(diào)函數(shù)。然而，這種方法不利于頁面性能優(yōu)化，因為每次觸發(fā)事件都會發(fā)送請求到服務器。解決這個問題的一個好辦法是使用Ajax來獲取頁面輸入。通過使用Ajax，我們可以在不刷新整個頁面的情況下，實時獲取用戶輸入的內(nèi)容，從而提高頁面性能和用戶體驗。
例如，假設我們有一個搜索框，用戶在輸入框中輸入關鍵字后，頁面會實時顯示匹配的結(jié)果。使用Ajax獲取頁面輸入的內(nèi)容可以達到更好的效果。當用戶在輸入框中輸入文字時，我們可以發(fā)送Ajax請求到服務器，服務器根據(jù)用戶輸入的關鍵字，返回匹配的結(jié)果并更新頁面。這樣用戶就可以方便地找到他們需要的信息，而不需要刷新整個頁面來獲取搜索結(jié)果。
下面是一個使用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事件監(jiān)聽用戶在輸入框中的輸入。當用戶輸入文字時，search()函數(shù)會被觸發(fā)。在search()函數(shù)中，我們首先獲取輸入框中的文字，然后創(chuàng)建一個XMLHttpRequest對象。接下來，我們設置xhr.onreadystatechange函數(shù)，該函數(shù)用于監(jiān)聽Ajax請求的狀態(tài)變化。當xhr.readyState的值為XMLHttpRequest.DONE時，說明請求已完成。在這個狀態(tài)下，我們可以通過xhr.status來判斷請求是否成功，如果成功則可以獲取服務器返回的結(jié)果。
在updateResults()函數(shù)中，我們首先獲取用于顯示搜索結(jié)果的ul元素，然后清空其內(nèi)容。接下來，我們遍歷服務器返回的結(jié)果，為每個結(jié)果創(chuàng)建一個li元素，并將其添加到ul元素中。這樣，搜索結(jié)果就會實時顯示在頁面上。
通過使用Ajax獲取頁面輸入，我們可以大大提高用戶體驗和頁面性能。無論是實時搜索、即時聊天還是其他需要實時獲取用戶輸入內(nèi)容的場景，Ajax都是一個強大的工具。通過合理地使用Ajax，我們可以讓用戶更加方便地獲取所需信息，并提升網(wǎng)頁的易用性和吸引力。