AJAX（Asynchronous JavaScript and XML）和WebSocket是兩種用于在Web頁面上實(shí)現(xiàn)實(shí)時數(shù)據(jù)傳輸?shù)募夹g(shù)。AJAX是一種使用JavaScript在后臺與服務(wù)器進(jìn)行通信的技術(shù)，可以在不重新加載整個頁面的情況下更新部分頁面內(nèi)容。而WebSocket是一種雙向通信協(xié)議，可以在瀏覽器和服務(wù)器之間建立持久連接，實(shí)現(xiàn)實(shí)時數(shù)據(jù)的雙向傳輸。雖然它們有不同的工作原理，但它們在實(shí)現(xiàn)實(shí)時數(shù)據(jù)傳輸方面都具有重要的作用。

首先，我們來看看AJAX。在Web上，一個常見的例子是通過AJAX在后臺向服務(wù)器發(fā)送數(shù)據(jù)并實(shí)時更新頁面。例如，我們可以創(chuàng)建一個實(shí)時聊天應(yīng)用程序，用戶在輸入框中輸入消息時，即時將消息發(fā)送到服務(wù)器并通過AJAX將新消息顯示在頁面上，而不需要刷新整個頁面。

function sendMessage(message) {
$.ajax({
type: "POST",
url: "/sendMessage",
data: { message: message },
success: function(response) {
$("#chatBox").append("
" + response.message + "
");
}
});
}

上面的代碼演示了如何使用AJAX向服務(wù)器發(fā)送消息并更新聊天窗口。當(dāng)用戶調(diào)用sendMessage函數(shù)時，它會發(fā)送一個AJAX請求，將消息發(fā)送給服務(wù)器。一旦服務(wù)器成功接收到消息并返回響應(yīng)，我們可以使用回調(diào)函數(shù)來更新聊天窗口中的內(nèi)容。這樣，我們就實(shí)現(xiàn)了通過AJAX進(jìn)行實(shí)時數(shù)據(jù)傳輸。

接下來，我們再看看WebSocket。WebSocket使用一個長期有效的連接，可以在瀏覽器和服務(wù)器之間實(shí)現(xiàn)雙向通信。這使得實(shí)時數(shù)據(jù)傳輸變得更加高效。一個常見的例子是實(shí)時更新股票價格的網(wǎng)頁。當(dāng)服務(wù)器上的股票價格發(fā)生變化時，服務(wù)器可以立即將新價格推送到與之建立連接的所有客戶端。

var socket = new WebSocket("wss://example.com/socket");
socket.onopen = function() {
console.log("WebSocket連接已建立");
};
socket.onmessage = function(event) {
var data = JSON.parse(event.data);
$("#stockPrice").text(data.price);
};
socket.onclose = function() {
console.log("WebSocket連接已關(guān)閉");
};

上面的代碼演示了如何使用WebSocket在Web頁面上實(shí)時更新股票價格。當(dāng)頁面加載時，我們可以使用WebSocket建立與服務(wù)器的連接。一旦連接建立成功，我們可以定義消息接收事件的處理程序。當(dāng)服務(wù)器發(fā)送新的股票價格時，消息將通過onmessage事件觸發(fā)，并更新頁面上的股票價格。這樣，我們就實(shí)現(xiàn)了通過WebSocket進(jìn)行實(shí)時數(shù)據(jù)傳輸。

綜上所述，AJAX和WebSocket是兩種在Web頁面上實(shí)現(xiàn)實(shí)時數(shù)據(jù)傳輸?shù)闹匾夹g(shù)。AJAX適用于部分頁面刷新的場景，通過向服務(wù)器發(fā)送異步請求實(shí)時更新頁面內(nèi)容。而WebSocket則適用于雙向?qū)崟r通信的場景，允許服務(wù)器主動推送數(shù)據(jù)給客戶端。盡管它們的工作原理有所不同，但它們都可以幫助我們在Web應(yīng)用程序中實(shí)現(xiàn)實(shí)時數(shù)據(jù)傳輸，提升用戶體驗(yàn)。