使用Ajax獲取當前頁面內容

在網頁開發中，很多時候我們需要通過Ajax技術來獲取當前頁面的內容。Ajax（Asynchronous JavaScript and XML，異步的JavaScript和XML）是一種用于創建快速動態網頁的技術。它允許在不刷新整個頁面的情況下，異步地從服務器上獲取數據，然后將數據插入到頁面中。

舉個例子，假設我們有一個網頁顯示熱門新聞，新聞列表由一個有序列表（ul）組成，每個列表項（li）包含新聞的標題和內容。在頁面加載完成之后，我們可以使用Ajax技術從服務器獲取最新的新聞列表，并將其動態地插入到網頁中。這樣，用戶就可以在不刷新整個頁面的情況下，獲取最新的新聞內容。

// 使用Ajax獲取新聞列表
function getNewsList() {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 指定請求方式和URL
xhr.open('GET', '/news', true);
// 設置回調函數，當請求完成時調用
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 請求成功，獲取響應數據
var newsList = JSON.parse(xhr.responseText);
// 更新網頁內容
var ul = document.querySelector('ul');
ul.innerHTML = '';
for (var i = 0; i < newsList.length; i++) {
var li = document.createElement('li');
li.innerHTML = '<h3>' + newsList[i].title + '</h3>' + '<p>' + newsList[i].content + '</p>';
ul.appendChild(li);
}
} else {
// 請求失敗，輸出錯誤信息
console.error('請求錯誤');
}
}
};
// 發送請求
xhr.send();
}
// 頁面加載完成后獲取新聞列表
window.onload = function() {
getNewsList();
}

上述代碼中，我們通過XMLHttpRequest對象創建了一個GET請求，將其發送到服務器上的/news路徑。當請求的狀態改變時（onreadystatechange事件觸發），我們通過判斷readyState和status的值，來確定請求的狀態。如果請求成功（readyState為4，status為200），我們解析服務器的響應數據，并更新頁面顯示的新聞列表。

除了獲取新聞列表，我們還可以使用Ajax獲取其他頁面的內容。例如，我們可以使用Ajax技術從服務器獲取用戶信息，并將其顯示在當前頁面上。這樣，我們可以實現一些動態交互的功能，如用戶登錄、搜索功能等。

Ajax技術的出現，使得網頁更加靈活和交互性更強。通過異步地獲取頁面數據，我們可以避免整個頁面的刷新，提高用戶體驗。同時，使用Ajax獲取當前頁面的內容也為我們提供了更多的開發可能性，使得前端開發更加強大和高效。