$.ajax是jQuery中的一個方法，可以用來發送HTTP請求并獲取服務器返回的數據。通過$.ajax可以方便地獲取服務器上的圖片，實現圖片的動態加載和顯示。本文將通過幾個例子，介紹如何使用$.ajax來獲取服務器圖片，并展示在網頁上。 首先，我們來看一個簡單的例子。假設服務器上有一張圖片，我們希望將其顯示在網頁上。首先，我們需要在網頁中定義一個用來顯示圖片的div，例如：

<div id="imageContainer"></div>

然后，我們使用$.ajax來獲取服務器上的圖片，并將其顯示在網頁上。代碼如下：

$.ajax({
url: "http://example.com/image.jpg", // 圖片的URL
method: "GET", // 請求方法
dataType: "binary", // 返回的數據類型為二進制
success: function(data) {
var imageUrl = URL.createObjectURL(data); // 將二進制數據轉換為URL
$("#imageContainer").html(""); // 在div中顯示圖片
},
error: function() {
console.log("Failed to load image.");
}
});

在這段代碼中，我們首先指定了圖片的URL，然后使用GET方法發送請求，請求的數據類型為二進制。當請求成功時，我們將獲取到的二進制數據轉換為URL，并將其作為圖片的src屬性，顯示在網頁上。 除了直接顯示圖片，我們還可以對圖片進行一些處理。例如，我們可以在獲取到圖片之后，使用canvas來對其進行縮放、裁剪等操作。下面是一個示例代碼：

$.ajax({
url: "http://example.com/image.jpg", // 圖片的URL
method: "GET", // 請求方法
dataType: "binary", // 返回的數據類型為二進制
success: function(data) {
var imageUrl = URL.createObjectURL(data); // 將二進制數據轉換為URL
var canvas = document.createElement("canvas"); // 創建canvas元素
var context = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
// 對圖片進行縮放和裁剪
context.drawImage(image, 0, 0, image.width, image.height, 0, 0, 100, 100);
var newImageUrl = canvas.toDataURL(); // 將canvas轉換為圖片URL
$("#imageContainer").html(""); // 在div中顯示處理后的圖片
};
image.src = imageUrl;
},
error: function() {
console.log("Failed to load image.");
}
});

在這段代碼中，我們首先創建了一個canvas元素，然后使用getImageData方法獲取到圖片的像素數據，對其進行縮放和裁剪，然后使用toDataURL方法將canvas轉換為URL，并將其作為圖片的src屬性，顯示在網頁上。 通過上述的例子，我們可以看到，使用$.ajax獲取服務器圖片非常簡單，只需要指定圖片的URL、請求方法和返回數據類型，并通過回調函數處理獲取到的數據即可。同時，我們還可以對獲取到的圖片進行一些處理，如縮放、裁剪等，以滿足不同的需求。