Ajax (Asynchronous JavaScript and XML) 是一種基于Web的前端技術，用于實現網頁動態加載和異步通信。它通過在后臺與服務器進行數據交換，實現在不重新加載整個頁面的情況下更新部分頁面內容。然而，Ajax 在某些情況下可能會面臨一些限制，例如長時間的輪詢或重復請求。為了解決這些問題，WebSocket 技術應運而生。WebSocket 是一種用于實現全雙工通信的協議，它為 Web 應用程序提供了實時通信的能力。本文將探討如何基于 WebSocket 使用 Ajax 技術，以實現更高效的異步通信。

假設我們正在開發一個在線聊天應用程序，我們希望用戶能夠實時收到新消息的通知，而無需手動刷新頁面。首先，我們可以使用 WebSocket 在客戶端和服務器之間建立一個持久的連接。一旦連接建立成功，服務器可以立即向客戶端發送新消息的通知，無需等待 Ajax 請求的返回。這樣，用戶可以立即收到新消息并進行一些互動操作。當用戶發送新消息時，我們可以使用 Ajax 技術將其發送到服務器，而無需刷新整個頁面。下面是一個基于 WebSocket 和 Ajax 的簡單示例：

// 建立 WebSocket 連接
var socket = new WebSocket('ws://chat.example.com');
// 當連接成功建立時
socket.onopen = function() {
console.log('WebSocket 連接已建立');
};
// 當收到新消息時
socket.onmessage = function(event) {
var message = event.data;
console.log('收到新消息: ' + message);
// 更新聊天消息列表
var messageList = document.getElementById('message-list');
var newMessage = document.createElement('li');
newMessage.textContent = message;
messageList.appendChild(newMessage);
};
// 當連接關閉時
socket.onclose = function() {
console.log('WebSocket 連接已關閉');
};
// 當發送新消息時
function sendMessage(message) {
// 使用 Ajax 向服務器發送消息
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://chat.example.com/api/message', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ message: message }));
}

在上面的示例中，我們首先通過調用 WebSocket 構造函數，使用服務器的 WebSocket 地址來建立一個 WebSocket 連接。然后，我們定義了一些 WebSocket 事件處理程序，用于處理連接建立、新消息到達和連接關閉等事件。當連接成功建立時，瀏覽器將觸發onopen事件處理程序，并將其綁定到一個函數，我們可以在其中執行一些操作。同樣地，當收到新消息時，瀏覽器將觸發onmessage事件處理程序，并將事件對象作為參數傳遞給我們定義的回調函數。這個回調函數將新消息添加到聊天消息列表，并更新頁面的內容。最后，當連接關閉時，我們可以執行一些清理操作。

在我們的應用程序中，當用戶輸入新消息并發送時，我們調用名為sendMessage的函數，該函數使用 Ajax 技術向服務器發送消息。在這個函數中，我們首先創建一個 XMLHttpRequest 對象，并調用open方法來指定請求的類型（POST）和目標 URL（http://chat.example.com/api/message）。稍后，我們設置請求頭的內容類型為 JSON，并使用send方法將消息數據作為請求的有效負載發送到服務器。

通過將 WebSocket 和 Ajax 結合在一起，我們可以實現更高效的異步通信。WebSocket 提供了一個持久的連接，允許服務器主動向客戶端發送數據，而無需等待客戶端的請求。而 Ajax 技術則可以用于在用戶互動時發送數據到服務器，并更新頁面內容。這種組合可以大大降低通信延遲，并提供實時的應用程序體驗。

總之，基于 WebSocket 的 Ajax 技術可以為網頁應用程序提供更高效的異步通信能力。通過建立持久的 WebSocket 連接，服務器可以實時向客戶端推送數據，而無需等待客戶端請求。使用 Ajax 技術，我們可以在網頁上進行用戶操作時向服務器發送數據，并及時更新頁面內容。這種組合可以大大提升應用程序的性能和用戶體驗。