AJAX（Asynchronous JavaScript and XML）是一種用于創建更快、更流暢的用戶體驗的技術。在網頁開發中，AJAX可以實現與服務器異步通信，這使得我們可以不必刷新整個頁面，就能夠從服務器獲取數據并更新特定的部分。本文將重點討論如何使用AJAX從服務器獲取圖片上傳的功能，并通過舉例來說明其使用方法。

在實際開發中，我們經常需要讓用戶上傳圖片，并將這些圖片存儲到服務器上。使用AJAX可以讓我們實現在頁面上直接上傳圖片，并在上傳完成后顯示該圖片。以下是一個示例的前端HTML代碼：

<input type="file" id="image" name="image" accept="image/*">
<button onclick="uploadImage()">上傳</button>
<div id="preview"></div>

上述代碼中，我們首先通過<input type="file">標簽創建了一個文件上傳的輸入框，它的id屬性為"image"。然后我們使用一個按鈕，通過onclick事件調用uploadImage()函數，用于將選中的圖片進行上傳。最后，我們在頁面上使用<div>標簽創建了一個預覽區域，用于顯示上傳的圖片。

下面是JavaScript代碼的實現：

function uploadImage() {
var fileInput = document.getElementById("image");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("image", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload-image", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var imageUrl = xhr.responseText;
var preview = document.getElementById("preview");
var img = document.createElement("img");
img.src = imageUrl;
preview.appendChild(img);
}
};
xhr.send(formData);
}

在uploadImage()函數中，我們首先通過document.getElementById()獲取到文件輸入框的引用，然后通過files屬性獲取到用戶選中的文件。接著，我們創建一個FormData對象，用于將文件包裝成表單數據。這樣可以確保文件能夠正確地發送給服務器。

接下來，我們創建一個XMLHttpRequest對象，并調用open()方法指定請求的方法（這里是POST）和URL。然后，我們使用onreadystatechange事件監聽狀態的變化，當readyState為4且status為200時表示請求成功。在成功回調函數中，我們通過responseText獲取到從服務器返回的圖片URL，然后動態創建一個<img>標簽，并將其src屬性設置為獲取到的URL。最后，我們將這個<img>標簽添加到預覽區域中。

通過上述代碼，我們可以實現一個簡單的圖片上傳功能，并通過AJAX從服務器獲取圖片的URL然后顯示在頁面上。這樣用戶就可以在不刷新整個頁面的情況下，實時地看到他們所上傳的圖片。

總結起來，使用AJAX從服務器獲取圖片上傳是一種提高用戶體驗的有效手段。它可以讓用戶在上傳圖片時不必刷新整個頁面，并且實時地顯示上傳的圖片。通過結合AJAX和服務器端的處理，我們可以輕松地實現這一功能。