AJAX是一種用于在后臺獲取數據并在頁面上展示的前端技術。通過AJAX，我們可以在不刷新整個頁面的情況下，異步地向服務器請求數據。本文將重點介紹如何使用AJAX從后臺獲取數據，并通過舉例來說明其用法和優勢。

一種常見的使用AJAX從后臺獲取數據的場景是使用搜索引擎自動補全功能。當用戶在搜索框中輸入關鍵字時，頁面會通過AJAX向后臺發送請求，后臺則返回與關鍵字匹配的建議詞給前端，以在搜索框下方顯示搜索建議。這個過程實現了實時搜索的效果，提升了用戶體驗。

$(document).ready(function(){
$('#search-input').keyup(function(){
var keyword = $(this).val();
$.ajax({
method: 'GET',
url: '/api/autocomplete',
data: { keyword: keyword },
success: function(response){
$('#suggestion-list').empty();
response.suggestions.forEach(function(suggestion){
$('#suggestion-list').append('
' + suggestion + '
');
});
}
});
});
});

在上述代碼中，當搜索框中的內容有變化時，keyup事件觸發，獲取輸入的關鍵字。然后，通過$.ajax函數發送GET請求到后臺的/api/autocomplete路徑，并傳遞關鍵字作為請求參數。在成功回調函數中，先清空之前的搜索建議列表，然后通過遍歷后臺返回的建議詞，將每個詞添加到搜索建議列表中。這樣，當用戶在搜索框中輸入關鍵字時，頁面會實時獲取后臺返回的建議詞并展示。

另一個常見的應用是在社交媒體網站上，當用戶點擊“加載更多”按鈕時，頁面會通過AJAX從后臺獲取更多的動態信息。這樣，用戶無需刷新整個頁面，就可以無限滾動地瀏覽動態內容。

var loadedItems = 0;
function loadMoreItems() {
$.ajax({
method: 'GET',
url: '/api/posts',
data: { offset: loadedItems, limit: 10 },
success: function(response){
response.posts.forEach(function(post){
$('#post-list').append('
' + post.title + '
');
});
loadedItems += response.posts.length;
if (loadedItems >= response.totalCount) {
$('#load-more-btn').hide();
}
}
});
}
$(document).ready(function(){
loadMoreItems();
$('#load-more-btn').click(function(){
loadMoreItems();
});
});

在上述代碼中，首次加載頁面時，通過loadMoreItems函數從后臺獲取前10個動態信息，并將其添加到頁面中。隨后，每當用戶點擊“加載更多”按鈕時，loadMoreItems函數會再次發送AJAX請求，從后臺獲取接下來的10個動態信息，然后將其添加到頁面中。當獲取到的動態信息數量達到后臺返回的totalCount時，隱藏“加載更多”按鈕，表示所有動態信息都已加載完畢。

總結起來，AJAX是一個強大的工具，可以幫助我們在不刷新整個頁面的情況下從后臺獲取數據。通過舉例，我們看到了AJAX從后臺獲取數據的常見應用場景，并學習了如何使用AJAX發送請求、處理響應和更新頁面內容。這些例子僅僅是AJAX的冰山一角，相信在實際的開發中，我們會有更多機會運用到AJAX這個技術。