AJAX（Asynchronous JavaScript and XML）是一種使用JavaScript和XML來實現(xiàn)網(wǎng)頁無刷新功能的技術(shù)。通過使用AJAX，可以在不重載整個網(wǎng)頁的情況下更新部分頁面內(nèi)容，提供更好的用戶體驗。下面將通過舉例和代碼示例，詳細介紹如何使用AJAX實現(xiàn)頁面無刷新功能。

假設(shè)我們有一個網(wǎng)頁上顯示了一張照片，并且還有一個按鈕可以用于更換照片。使用傳統(tǒng)的方法，當點擊按鈕時，整個網(wǎng)頁會重新加載，照片和其他內(nèi)容會刷新，這會造成不必要的延遲。現(xiàn)在我們嘗試使用AJAX來實現(xiàn)無刷新更換照片的功能。

HTML代碼：
<div id="photo">
<img src="photo1.jpg">
</div>
<button onclick="changePhoto()">更換照片</button>
JavaScript代碼：
function changePhoto(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("photo").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "change_photo.php", true);
xhr.send();
}

上述代碼中，我們首先創(chuàng)建了一個XMLHttpRequest對象，用于發(fā)起AJAX請求。在changePhoto函數(shù)中，我們指定了當AJAX請求狀態(tài)發(fā)生改變時的回調(diào)函數(shù)。如果AJAX請求成功完成（readyState為4，status為200），則將服務(wù)器返回的照片所在的HTML代碼更新到id為"photo"的div中。

接下來我們需要創(chuàng)建一個服務(wù)器端的change_photo.php文件，用于處理AJAX請求并返回新的照片的HTML代碼。在這個例子中，我們簡單地假設(shè)change_photo.php會返回一個新的img標簽，其中的src屬性為另一張照片的URL。

PHP代碼（change_photo.php）：
<?php
$newPhoto = "photo2.jpg";
echo "<img src='$newPhoto'>";
?>

當點擊"更換照片"按鈕時，AJAX請求會被發(fā)送到服務(wù)器端的change_photo.php文件中。該文件會處理請求，并將新照片的HTML代碼作為響應(yīng)返回。然后，JavaScript代碼會將新的照片HTML代碼更新到網(wǎng)頁中，并顯示新的照片。

通過這個例子，我們可以看到使用AJAX可以實現(xiàn)無刷新功能。在實際應(yīng)用中，AJAX還可以用于加載動態(tài)數(shù)據(jù)、提交表單、實現(xiàn)聊天功能等。它為網(wǎng)頁的交互性和用戶體驗提供了很大的提升。