AJAX(Asynchronous JavaScript and XML)是一種用于在瀏覽器和服務器之間進行異步數據交互的技術。通過使用AJAX,我們可以在不刷新整個頁面的情況下,動態地獲取數據并將其插入到頁面中。本文將介紹如何使用AJAX從服務器獲取數據,并將數據存入數組中。
假設我們有一個網站,其中包含一個簡單的聯系人列表。我們希望在頁面加載時,通過AJAX從服務器獲取聯系人數據,并將其存儲在一個數組中。這樣,我們可以方便地在頁面其他部分使用這些數據。
let contacts = []; // 創建一個空數組,用于存儲聯系人數據
// 使用AJAX從服務器獲取聯系人數據
function getContacts() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/contacts', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let response = JSON.parse(xhr.responseText);
contacts = response.contacts;
}
};
xhr.send();
}
// 在頁面加載完成時調用getContacts函數
window.onload = function() {
getContacts();
// 現在,contacts數組已經包含了從服務器獲取的聯系人數據
console.log(contacts);
};
在上面的例子中,我們首先創建一個空數組contacts,用于存儲聯系人數據。然后,我們使用XMLHttpRequest對象創建一個AJAX請求,該請求會發送到服務器的指定地址。當服務器返回響應時,我們將響應數據解析為JSON格式,并將聯系人數據存儲在contacts數組中。
在頁面加載完成后,我們調用getContacts函數獲取聯系人數據,并在控制臺上打印出數組的內容。現在,我們可以在頁面的其他部分使用contacts數組中的數據了。
總結起來,通過使用AJAX從服務器獲取數據并將其存儲在數組中,我們可以在頁面加載時動態地獲取最新的數據,并在頁面其他部分使用這些數據。這為我們提供了更靈活和實時的數據展示方式。