AJAX（Asynchronous JavaScript and XML）是一種在網頁開發中常用的技術，通過使用AJAX可以實現網頁的局部刷新，提高用戶體驗。本文將介紹如何使用AJAX加載本地圖片并實現顯示功能。通過這種方法，我們可以用代碼動態地從本地圖片庫中獲取所需的圖片，而不需要手動地將圖片插入到HTML代碼中。這種技術在圖片網站、相冊展示以及個人博客等地方非常有用。

在本例中，我們假設有一個本地圖片庫，其中包含了多張圖片。我們的目標是在用戶輸入某個特定關鍵詞之后，通過AJAX請求從圖片庫中獲取相關的圖片，并將其顯示在網頁上。為了簡化問題，我們只展示出含有特定關鍵詞的第一張圖片。以下是實現該功能的代碼示例：

function displayImage(keyword) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var image = document.getElementById("image");
image.src = this.responseText;
}
};
xmlhttp.open("GET", "getImage.php?keyword=" + keyword, true);
xmlhttp.send();
}

在上述代碼中，我們首先創建了一個XMLHttpRequest對象，用于發送AJAX請求。然后我們定義了一個匿名函數來處理AJAX請求的響應。當AJAX請求的狀態（readyState）為4，且響應的HTTP狀態碼（status）為200時，表示請求成功，我們將獲取到的圖片鏈接賦值給id為"image"的標簽的src屬性，從而實現圖片的加載。最后，我們使用open()和send()方法發送GET請求，并傳遞所需要的關鍵詞參數。

為了在網頁上顯示圖片，我們需要在HTML代碼中添加如下的標簽：

<img id="image" src="" alt="image">

在用戶輸入關鍵詞之后，我們可以調用displayImage()函數，并傳入相應的關鍵詞作為參數。例如，如果用戶輸入"cat"，我們可以這樣調用函數：

displayImage("cat");

在服務器端，我們需要編寫一個名為getImage.php的文件來處理AJAX請求，并返回相應的圖片鏈接。以下是一個簡化版的getImage.php文件示例：

<?php
$keyword = $_GET["keyword"];
$images = array(
"cat" =>"http://example.com/images/cat.jpg",
"dog" =>"http://example.com/images/dog.jpg",
"flower" =>"http://example.com/images/flower.jpg"
);
if (array_key_exists($keyword, $images)) {
echo $images[$keyword];
}
?>

在上述代碼中，我們定義了一個包含不同關鍵詞和對應圖片鏈接的數組。當AJAX請求中傳遞的關鍵詞在數組中存在時，我們返回相應關鍵詞所對應的圖片鏈接。例如，如果關鍵詞為"cat"，則返回"http://example.com/images/cat.jpg"。

通過上述代碼，我們可以在用戶輸入關鍵詞后，通過AJAX請求從本地圖片庫中獲取相應的圖片鏈接，并將其顯示在網頁上。這種動態加載圖片的方法使得圖片展示更加靈活，并且可以隨時更新網頁上的圖片內容。AJAX技術在現代網頁開發中扮演著重要的角色，我們可以靈活運用AJAX來實現各種功能。