小紅點是網頁中常見的消息通知提示標記，用于提醒用戶有新的消息或者活動。傳統的網頁開發中，消息通知一般是通過輪詢服務器來獲取最新的消息數量或者狀態變化。隨著Ajax技術的發展和普及，現在可以通過Ajax實現實時的、無刷新的消息通知小紅點功能。

在網頁應用中，小紅點通常顯示在消息圖標、好友列表、新聞分類等區域，用來標記未讀或者新消息的數量。使用Ajax實現消息通知小紅點的方法有很多，下面以一個社交網站為例進行講解。

首先，我們需要后端接口提供獲取未讀消息數量的接口，例如：

GET /api/message/unread_count HTTP/1.1
Host: www.example.com

后端會返回一個JSON對象，包含未讀消息的數量：

HTTP/1.1 200 OK
Content-Type: application/json
{
"count": 5
}

前端頁面加載完成后，可以利用Ajax發送請求獲取未讀消息數量，并根據返回結果更新小紅點的顯示：

$(document).ready(function() {
$.ajax({
url: '/api/message/unread_count',
type: 'GET',
dataType: 'json',
success: function(response) {
var unreadCount = response.count;
if (unreadCount >0) {
// 顯示小紅點，例如使用一個帶數量的紅色圓點圖標
$('#notification-badge').text(unreadCount).show();
}
}
});
});

上述代碼使用jQuery庫進行Ajax請求，并利用返回的未讀消息數量來更新小紅點的顯示。如果未讀消息數量大于0，則顯示小紅點并顯示消息數量。這樣，用戶在打開頁面時就可以立即看到有新的消息，無需手動刷新頁面。

除了頁面加載完成后的自動更新，我們還可以實現實時的消息通知小紅點功能。可以通過WebSocket或者長輪詢實現實時獲取未讀消息數量的功能。

以WebSocket為例，前端首先需要與后端建立WebSocket連接：

var ws = new WebSocket('ws://www.example.com/socket');

建立連接后，前端可以通過WebSocket的消息事件監聽來接收來自后端的消息：

ws.onmessage = function(event) {
var message = JSON.parse(event.data);
var unreadCount = message.count;
if (unreadCount >0) {
// 顯示小紅點
$('#notification-badge').text(unreadCount).show();
} else {
// 隱藏小紅點
$('#notification-badge').hide();
}
};

后端可以主動向WebSocket客戶端發送未讀消息數量的更新：

ws.send(JSON.stringify({
count: 10,
}));

上述代碼演示了利用WebSocket實現實時消息通知小紅點的功能。當后端有新的消息時，可以主動推送消息給客戶端，客戶端收到消息后更新小紅點的顯示。這樣，用戶可以實時收到新消息的提醒，無需頻繁手動刷新頁面。

Ajax消息通知小紅點功能的實現，不僅可以提升用戶體驗，還可以減輕服務器的壓力和網絡流量。通過及時更新未讀消息數量的顯示，用戶可以隨時了解到最新的消息，提升了網站的互動性和用戶黏性。

在實際的開發中，我們需要根據具體的業務需求和技術特點，選擇合適的方法來實現消息通知小紅點功能。無論是輪詢、長輪詢還是WebSocket，都可以通過Ajax技術來實現實時消息通知的小紅點功能，從而提升用戶體驗和網站的功能性。