AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下與服務器進行交互的技術。通過AJAX，我們可以向服務器發送請求，并在后臺獲取數據，然后在不刷新頁面的情況下更新頁面內容。

AJAX常用于讀取數據和圖片。在這篇文章中，我們將重點討論AJAX如何讀取數據和圖片。

在AJAX中，我們使用XMLHttpRequest對象來發送HTTP請求。我們可以通過發送GET或POST請求來讀取數據和圖片。

首先，我們來看一個讀取數據的例子：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
// 在這里處理數據
}
};
xmlhttp.open("GET", "data.json", true);
xmlhttp.send();

在這個例子中，我們創建了一個XMLHttpRequest對象，并指定了一個回調函數。當請求狀態發生變化時，回調函數會被調用。當請求狀態為4（已完成）且狀態碼為200（成功）時，我們可以通過this.responseText獲取服務器返回的數據，并通過JSON.parse解析為JavaScript對象。然后我們可以在回調函數中處理數據。

下面我們來看一個讀取圖片的例子：

var xmlhttp = new XMLHttpRequest();
xmlhttp.responseType = 'blob';
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var reader = new FileReader();
reader.onloadend = function() {
var image = document.createElement('img');
image.src = reader.result;
document.body.appendChild(image);
}
reader.readAsDataURL(this.response);
}
};
xmlhttp.open("GET", "image.jpg", true);
xmlhttp.send();

在這個例子中，我們同樣創建了一個XMLHttpRequest對象，并指定了一個回調函數。不同的是，我們設置了responseType為'blob'，表示返回的是二進制數據。當請求狀態為4（已完成）且狀態碼為200（成功）時，我們創建了一個FileReader對象并通過onloadend事件處理讀取到的數據。通過reader.result獲取圖片數據的base64編碼，然后創建一個img元素并將編碼作為src屬性值，最后將圖片添加到頁面中。

總結來說，通過AJAX我們可以輕松地讀取數據和圖片。無論是讀取文本數據還是讀取圖片，AJAX都可以幫助我們實現。上面的例子只是為了幫助理解AJAX的讀取數據和圖片的過程，實際應用中可能會有更多的處理和優化。