AJAX(Asynchronous JavaScript and XML) 是一種用于創建交互式網頁應用程序的技術。它使得網頁能夠在不刷新整個頁面的情況下通過異步請求從服務器加載數據,然后將數據插入到網頁中的指定位置。
通過使用 AJAX 技術,我們可以實現一些很有趣的功能。比如,我們可以通過點擊一個按鈕來加載一個
元素,而不是加載一個新的頁面。這種方式使得我們可以更快地加載數據,提升用戶體驗。
下面是一個簡單的示例,可以通過 AJAX 加載一個
元素:
function loadDiv() {
var xhr = new XMLHttpRequest(); // 創建 XMLHttpRequest 對象
xhr.open("GET", "div.html", true); // 設置請求方法,文件路徑和異步標志
xhr.onreadystatechange = function() { // 監聽請求狀態變化
if (xhr.readyState === 4 && xhr.status === 200) { // 請求完成且成功返回
document.getElementById("myDiv").innerHTML = xhr.responseText; // 將返回的 HTML 設置為的內容
}
};
xhr.send(); // 發送請求
}在上面的代碼中,我們首先創建了一個 XMLHttpRequest 對象,并使用 open() 方法設置了請求的方法 (GET)、文件路徑 (div.html) 和異步標志 (true)。然后我們通過監聽 onreadystatechange 事件來獲取請求的狀態。當狀態為 4(表示請求已完成)且狀態碼為 200(表示請求成功)時,我們將服務器返回的 HTML 設置為
元素的內容。然后我們可以在頁面上放置一個按鈕,通過點擊按鈕來觸發 loadDiv() 方法,從而通過 AJAX 加載
元素。