AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。通過AJAX，可以在不刷新整個頁面的情況下，實現異步向服務器發送請求并獲取響應。在網頁開發中，經常會遇到需要獲取圖片的原始尺寸的需求。本文將介紹如何使用AJAX來獲取圖片的原始尺寸，并結合舉例進行詳細說明。

在進行圖片處理時，往往需要獲取圖片的原始尺寸，以便對其進行適當的調整或展示。傳統的方法是使用JavaScript的Image對象來獲取圖片的width和height屬性，但這種方法只能在圖片完全加載后才能獲取到正確的尺寸值。如果圖片較大或網絡較慢，會出現等待時間過長的問題。而使用AJAX可以在圖片加載之前就獲取到其原始尺寸，提高用戶體驗。

首先，我們需要一個包含圖片路徑的URL。例如，假設有一個網頁需要顯示一張名為“example.jpg”的圖片，我們可以使用以下代碼來獲取該圖片的原始尺寸：

var imageUrl = "example.jpg";
var xhr = new XMLHttpRequest();
xhr.open('HEAD', imageUrl, true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status == 200){
var imageSize = xhr.getResponseHeader('Content-Length');
console.log("Image size: " + imageSize + " bytes");
}
}
}
xhr.send();

在上述代碼中，我們使用XMLHttpRequest對象創建一個HEAD請求，指定圖片的URL。然后，設置onreadystatechange回調函數來處理服務器的響應。當readyState為4時，表示請求已完成。如果服務器返回狀態碼200，表示請求成功，可以通過getResponseHeader方法獲取到圖片的原始尺寸。

需要注意的是，通過AJAX獲取到的圖片尺寸是以字節為單位的，因此需要根據實際需求進行轉換。比如，可以將字節數轉換為KB或MB，以便更直觀地展示給用戶。

除了獲取單個圖片的尺寸，我們還可以使用AJAX獲取多個圖片的尺寸。例如，假設一個網頁需要顯示多張圖片，并根據圖片尺寸設置不同的展示樣式。我們可以通過迭代獲取每張圖片的原始尺寸，然后根據尺寸值進行相應的處理。

var imageUrls = ["example1.jpg", "example2.jpg", "example3.jpg"];
imageUrls.forEach(function(imageUrl){
var xhr = new XMLHttpRequest();
xhr.open('HEAD', imageUrl, true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status == 200){
var imageSize = xhr.getResponseHeader('Content-Length');
console.log("Image size: " + imageSize + " bytes");
// 根據圖片尺寸設置樣式
// ...
}
}
}
xhr.send();
});

在上述代碼中，我們使用forEach方法迭代imageUrls數組，對每個URL進行AJAX請求，獲取圖片尺寸。然后可以根據尺寸值來設置相應的樣式，例如設置圖片的寬度和高度，或者設置圖片容器的寬度和高度等。

總之，通過AJAX獲取圖片的原始尺寸是一種提升網頁加載速度和用戶體驗的方法。可以在圖片加載之前就獲取到其尺寸，以便進行適當的調整和展示。在實際開發中，可以根據具體需求使用AJAX獲取單個或多個圖片的原始尺寸，并結合相應的處理邏輯來完成網頁的設計。