在現代的網頁開發中，經常需要動態地獲取當前頁面的數據，而不需要刷新整個頁面。這時候，我們會使用Ajax（Asynchronous JavaScript and XML）技術來實現。Ajax通過在后臺與服務器進行少量數據交換，使得網頁能夠實時地更新數據，提供更好的用戶體驗。本文將介紹如何使用Ajax獲取當前頁面的數據，并通過舉例來說明其應用場景。

首先，我們需要在HTML頁面中引入jQuery庫，因為jQuery提供了非常簡單的方式來使用Ajax。可以使用以下代碼將jQuery庫引入HTML頁面：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

一種常見的應用場景是在表單中實時獲取用戶輸入的數據。比如，我們在一個注冊頁面中，要求用戶輸入用戶名和密碼。當用戶輸入完成后，我們希望能夠實時地檢查用戶名是否已經被占用。這時候，可以使用Ajax來獲取當前頁面的數據。

<form id="registerForm">
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
<div id="usernameStatus"></div>
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
</form>

我們可以使用以下代碼來監聽用戶名輸入框的輸入事件，并發送Ajax請求：

$(document).ready(function() {
$('#username').on('input', function() {
var username = $(this).val();
$.ajax({
url: 'check_username.php',
method: 'POST',
data: {
username: username
},
success: function(response) {
if (response === 'taken') {
$('#usernameStatus').text('用戶名已被占用');
} else {
$('#usernameStatus').text('用戶名可用');
}
}
});
});
});

在上述代碼中，首先使用$(document).ready()函數來確保頁面加載完成后執行JavaScript代碼。然后，使用$('#username').on()函數來監聽用戶名輸入框的輸入事件。每次用戶輸入內容時，獲取輸入框的值，并發送Ajax請求給服務器。

服務器收到請求后，檢查用戶名是否已被占用，并將結果返回給前端。前端通過success回調函數來處理服務器的響應。如果服務器返回的response等于'taken'，則表示用戶名已被占用，我們可以將提示信息顯示在頁面上；否則，表示用戶名可用。

除了實時獲取用戶輸入的數據外，Ajax還可以用于實時更新頁面上的數據。假設我們有一個博客網站，每當有用戶評論了一篇文章，我們希望能夠實時地顯示最新的評論，而不需要刷新整個頁面。

<div id="comments">
<!-- 最新的評論將會被追加到這里 -->
</div>

我們可以使用以下代碼來定時地獲取最新評論的數據，并更新頁面：

$(document).ready(function() {
setInterval(function() {
$.ajax({
url: 'get_latest_comments.php',
method: 'GET',
success: function(response) {
$('#comments').html(response);
}
});
}, 5000); // 每隔5秒鐘獲取一次最新評論
});

在上述代碼中，使用setInterval函數來定時地每隔5秒鐘發送一次Ajax請求，獲取最新的評論數據。服務器將最新的評論數據返回給前端，前端通過success回調函數將返回的數據更新到頁面的id為'comments'的div中。這樣，只要有新的評論被提交，頁面上就會實時地顯示最新的評論。

通過以上的示例，我們可以看到使用Ajax獲取當前頁面的數據在現代網頁開發中的重要性。它能夠提供更好的用戶體驗，實時地更新頁面數據，而不需要刷新整個頁面。無論是實時獲取用戶輸入的數據，還是實時更新頁面上的數據，Ajax都是一個非常有用的技術。