Ajax是一種用于在不刷新整個網頁的情況下更新部分頁面內容的技術。它可以通過異步請求從服務器獲取數據并將其顯示在網頁上，而不會導致頁面的跳轉。這意味著在使用Ajax時，不需要直接跳轉到一個新的URL。通過這種方式，用戶可以獲得更好的用戶體驗，并且使網站看起來更加動態和流暢。

舉一個例子來說明這個問題。假設您正在使用一個在線商城的網站，并且您想查看一本書的詳細信息。在傳統的網頁設計中，當您點擊鏈接或按鈕時，網頁將會重新加載，并且您將被重定向到一個新的URL，以顯示所選書籍的詳細信息。然而，在使用Ajax的情況下，當您點擊鏈接時，網頁不會重新加載或跳轉到新的URL。相反，它將通過Ajax請求從服務器獲取書籍的詳細信息，并將其動態加載到當前頁面的特定位置，而不會干擾其他部分內容。因此，您可以在不離開當前頁面的情況下查看詳細信息。

<script>
function showBookDetails(bookId) {
// 使用Ajax請求獲取書籍詳細信息的URL
var url = '/api/book/' + bookId;
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 發送Ajax請求
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務器響應的書籍詳細信息
var bookDetails = JSON.parse(xhr.responseText);
// 將詳細信息顯示在頁面的特定位置
document.getElementById('book-details').innerHTML = bookDetails;
}
};
xhr.send();
}
</script>

上面的代碼演示了一個使用Ajax的示例。當用戶點擊某個書籍鏈接時，JavaScript函數showBookDetails()被調用，它會發送一個GET請求到服務器，并在收到響應后將書籍的詳細信息顯示在頁面上的一個特定位置，該位置使用id="book-details"定義。

除了動態加載內容，Ajax還可以用于提交表單數據而不需要頁面跳轉。例如，假設您正在使用一個博客網站，您想以評論的形式回應一篇文章。在使用傳統表單提交的情況下，當您點擊提交按鈕時，頁面將會刷新，您將被重定向到一個新的URL，并且您輸入的評論將會以新頁面的形式顯示。然而，通過使用Ajax，您可以在不離開當前頁面的情況下提交表單數據，并將評論動態添加到頁面的適當位置，而不會影響其他部分的內容。

<script>
function submitComment() {
// 獲取表單數據
var author = document.getElementById('author').value;
var comment = document.getElementById('comment').value;
var formData = {
author: author,
comment: comment
};
// 使用Ajax提交表單數據的URL
var url = '/api/comment';
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 發送Ajax請求
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務器響應的評論結果
var commentResult = JSON.parse(xhr.responseText);
// 將新評論動態添加到頁面的評論區域
var newComment = document.createElement('div');
newComment.innerHTML = '<p>' + commentResult.comment + '</p>';
document.getElementById('comments').appendChild(newComment);
// 重置表單
document.getElementById('author').value = '';
document.getElementById('comment').value = '';
}
};
xhr.send(JSON.stringify(formData));
}
</script>

上面的代碼演示了一個使用Ajax提交表單數據的示例。當用戶點擊提交按鈕時，JavaScript函數submitComment()被調用，它會獲取輸入的作者名和評論內容，并通過Ajax請求將數據發送到服務器。在成功接收響應后，服務器將返回新評論的結果，JavaScript函數將通過動態創建一個新的<div>元素并將其添加到頁面的評論區域（使用id="comments"定義）。最后，表單將被重置以便用戶輸入新的評論。

總而言之，使用Ajax可以使網站變得更加動態和流暢，而不需要每次更新頁面時都進行完整的跳轉。這大大改善了用戶體驗，并提供了更好的性能。通過動態加載內容和提交表單數據，用戶可以在不離開當前頁面的情況下使用網站的各個功能。