在現代的網頁開發中，為了提升用戶體驗，實現頁面無刷新更新數據的功能已經成為了一種常見需求。Ajax技術（Asynchronous JavaScript and XML）正是為這種需求而生。通過使用Ajax，可以實現異步請求，并在服務器返回數據后，動態刷新頁面的部分內容，而不需要刷新整個頁面。

舉個例子來說明，假設有一個網頁上顯示了一張照片，并附帶一個點贊按鈕。點擊點贊按鈕后，我們希望不刷新整個頁面的情況下，顯示點贊數的增加。這時就可以使用Ajax來實現。當用戶點擊點贊按鈕時，Ajax會向服務器發送一個異步請求，服務器端會更新數據庫中的點贊數量，并將新的點贊數返回給瀏覽器。瀏覽器再通過JavaScript代碼將返回的數據動態刷新到頁面上，這樣就實現了點贊數的動態刷新。

<script>
function likePhoto() {
// 發送異步請求
var xhr = new XMLHttpRequest();
xhr.open("POST", "like.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 從服務器返回的數據中獲取新的點贊數量
var newLikes = xhr.responseText;
// 更新頁面上的點贊數
document.getElementById("likesCount").innerText = newLikes;
}
}
xhr.send("photoId=123456");
}
</script>
<button onclick="likePhoto()">點贊</button>
<span id="likesCount">100</span>

在上面的例子中，我們使用了XMLHttpRequest對象來發送異步請求。通過open方法指定請求的方法（POST）、URL（like.php）和是否異步（true）。通過setRequestHeader方法設置請求頭，告訴服務器請求體的格式為表單編碼。在onreadystatechange事件處理函數中，當請求完成并且返回狀態碼為200時，我們獲取服務器返回的新的點贊數量，并將其更新到頁面上。

Ajax不僅可以用于異步獲取數據，還可以用于異步提交數據。比如，在一個論壇網站中，用戶可以發表評論。我們希望用戶在提交評論之后，可以立即看到自己的評論出現在評論列表中，而不需要刷新整個頁面。這時也可以使用Ajax。用戶點擊提交評論按鈕后，Ajax會將評論內容異步提交到服務器端，服務器將評論保存到數據庫后，返回一個新的評論，瀏覽器再通過JavaScript代碼將新的評論插入到評論列表中，實現評論的動態刷新。

下面是一個示例代碼：

<script>
function submitComment() {
// 獲取用戶輸入的評論內容
var comment = document.getElementById("commentInput").value;
// 發送異步請求
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitComment.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 從服務器返回的數據中獲取新的評論內容
var newComment = xhr.responseText;
// 創建新的評論元素并插入到評論列表中
var commentList = document.getElementById("commentList");
var newCommentElement = document.createElement("li");
newCommentElement.innerText = newComment;
commentList.appendChild(newCommentElement);
}
}
xhr.send("comment=" + encodeURIComponent(comment));
}
</script>
<textarea id="commentInput"></textarea>
<button onclick="submitComment()">提交評論</button>
<ul id="commentList">
<li>舊評論1</li>
<li>舊評論2</li>
</ul>

在上面的代碼中，我們首先獲取用戶輸入的評論內容，然后使用XMLHttpRequest對象發送異步請求。在請求完成后，我們獲取服務器返回的新的評論內容，并使用JavaScript動態創建一個新的評論元素，并將其插入到評論列表中。

通過使用Ajax技術，可以實現頁面的動態刷新，提升用戶體驗。它不僅能夠異步獲取數據，還可以異步提交數據。無論是點贊數的更新，還是評論的提交，都可以通過Ajax來實現，并且頁面無需刷新，用戶可以立即看到更新后的內容。