AJAX（Asynchronous JavaScript and XML）是一種可以通過后臺與服務器進行數據交互而無需刷新整個頁面的技術。通常情況下，我們使用AJAX來請求服務器的數據，然后將數據顯示在網頁上。然而，并非所有情況下我們都需要連接數據庫來獲取數據，有時候我們只需要通過AJAX請求一些靜態文件、API接口、本地存儲或者其他數據源，就可以在網頁上展示數據。本文將介紹如何使用AJAX不連接數據庫來獲取數據，并通過舉例說明其使用場景和優勢。

考慮一個簡單的示例，假設我們正在開發一個電子商務網站，并在首頁上展示一些商品信息。這些商品信息不需要實時從數據庫中獲取，而是通過一個JSON文件提供。為了實現這個功能，我們可以使用AJAX來加載JSON文件，然后在網頁上展示商品信息。下面是一個簡單的示例代碼：

const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const products = JSON.parse(this.responseText);
let html = '';
products.forEach(product =>{
html += '<div class="product">';
html += `<img src="${product.image}" alt="${product.name}">`;
html += `<h3>${product.name}</h3>`;
html += `<p>${product.description}</p>`;
html += '</div>';
});
document.getElementById('product-list').innerHTML = html;
}
};
xmlhttp.open("GET", "products.json", true);
xmlhttp.send();

上面的代碼通過AJAX請求了一個名為"products.json"的JSON文件，并將獲取到的商品信息展示在ID為"product-list"的元素中。這樣我們就成功地使用AJAX獲取了不連接數據庫的數據，并在網頁上展示出來。

除了靜態文件，我們還可以使用AJAX請求API接口來獲取數據。例如，我們正在開發一個天氣預報應用，我們可以通過AJAX請求一個天氣預報的API接口，并將獲取到的天氣信息展示在網頁上。以下是一個使用AJAX請求天氣API的示例代碼：

const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const weatherData = JSON.parse(this.responseText);
const weather = weatherData.weather[0];
const temperature = weatherData.main.temp;
const city = weatherData.name;
const html = `<h2>${city}</h2>
<h3>Weather: ${weather.main}</h3>
<h3>Temperature: ${temperature}°C</h3>`;
document.getElementById("weather-info").innerHTML = html;
}
};
xmlhttp.open("GET", "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=city_name", true);
xmlhttp.send();

在這個示例中，我們使用AJAX請求了一個名為"https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=city_name"的API接口，并將獲取到的城市名稱、天氣狀況和溫度信息展示在網頁上。

除了靜態文件和API接口，我們還可以使用AJAX和本地存儲進行數據交互。例如，我們正在開發一個待辦事項應用，用戶可以新增、刪除和修改待辦事項，并且這些待辦事項信息需要在各個頁面中保持一致。為了實現這個功能，我們可以使用AJAX將待辦事項信息存儲在本地瀏覽器的localStorage中，然后在各個頁面中讀取和展示這些信息。以下是一個簡單的使用AJAX和本地存儲的示例代碼：

function addTodo() {
const todo = document.getElementById("todo-input").value;
const todos = localStorage.getItem("todos") ? JSON.parse(localStorage.getItem("todos")) : [];
todos.push(todo);
localStorage.setItem("todos", JSON.stringify(todos));
displayTodos();
}
function displayTodos() {
const todos = localStorage.getItem("todos") ? JSON.parse(localStorage.getItem("todos")) : [];
let html = '';
todos.forEach(todo =>{
html += '<div class="todo">';
html += `<p>${todo}</p>`;
html += '</div>';
});
document.getElementById("todo-list").innerHTML = html;
}
displayTodos();

在這個示例中，我們使用AJAX將待辦事項存儲在localStorage中，并在網頁中展示待辦事項列表。當用戶新增、刪除或修改待辦事項時，我們使用AJAX更新localStorage中的數據，并重新展示待辦事項列表。

總結來說，AJAX不僅可以通過連接數據庫來獲取數據，還可以通過各種其他數據源來獲取數據。通過使用AJAX請求靜態文件、API接口、本地存儲或其他數據源，我們可以實現更多功能和提升用戶體驗。在開發過程中，根據實際需求選擇合適的數據源，并合理利用AJAX技術，將只需要的數據展示在網頁上。