Ajax (Asynchronous JavaScript and XML) 是一種用來實現無需刷新整個頁面進行數據傳輸和更新的Web開發技術。它允許通過使用JavaScript和XML異步地與服務器進行通信，從而實現部分頁面的更新。今天，我們將介紹幾個使用Ajax和JavaScript的實例，幫助你更好地理解它們的工作原理。

首先，讓我們考慮一個簡單的例子：一個網頁上有一個按鈕，當點擊按鈕時，通過Ajax從服務器獲取最新的時間并在頁面上顯示。以下是使用JavaScript和Ajax的代碼示例：

function getTime() {
var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("time").innerHTML = this.responseText;
}
};
xhr.open("GET", "getTime.php", true);
xhr.send();
}

在這個例子中，我們定義了一個名為getTime的JavaScript函數。當按鈕被點擊時，該函數會使用XMLHttpRequest對象創建一個AJAX請求，并通過open方法指定了獲取時間的URL地址。然后，我們調用send方法發送請求并將服務器響應的時間顯示在頁面上，其中響應的時間被包含在id為time的HTML元素中。

接下來，讓我們考慮另一個更復雜的例子：一個網頁上有一個包含了一系列任務的列表，每個任務都有一個完成按鈕。當點擊任務的完成按鈕時，通過Ajax將任務標記為已完成，并從列表中移除該任務。以下是使用JavaScript和Ajax的代碼示例：

function completeTask(taskID) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var listItem = document.getElementById("task-" + taskID);
listItem.parentNode.removeChild(listItem);
}
};
xhr.open("POST", "completeTask.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("taskID=" + taskID);
}

在這個例子中，我們定義了一個名為completeTask的JavaScript函數，并將要完成的任務的ID作為參數傳遞給它。當點擊任務的完成按鈕時，函數會創建一個AJAX請求，并通過POST方法將任務ID發送到completeTask.php文件。在服務器端，completeTask.php文件會將相應的任務標記為已完成，并返回一個成功響應給客戶端。然后，我們通過JavaScript從列表中移除該任務的HTML元素。

通過以上兩個例子，我們可以清晰地看到Ajax和JavaScript如何在Web開發中發揮作用。通過使用Ajax，我們可以在不刷新整個頁面的情況下與服務器進行通信和數據交換。同時，通過使用JavaScript，我們可以動態地更新頁面內容，響應用戶的操作，并與服務器進行交互。這為我們開發出更加高效、交互性強的Web應用程序提供了良好的基礎。