【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例

由于篇幅限制，这里我们只展示如何使用jQuery发送AJAX请求的核心函数。

// 初始化socket连接
function initSocket() {
    socket = io.connect('http://' + document.domain + ':' + location.port);
    // 连接后向服务器发送登录信息
    socket.on('connect', function() {
        socket.emit('login', {userId: userId, room: 'ChatRoom'});
    });
    // 监听服务器发送的消息
    socket.on('new message', function(data) {
        addMessage(data);
    });
}
 
// 发送消息到服务器
function sendMessage() {
    var message = $('#message').val();
    message = message.trim();
    if(message.length > 0) {
        socket.emit('send message', {userId: userId, message: message});
        $('#message').val('');
    }
}
 
// 添加消息到聊天界面
function addMessage(data) {
    var $message = $('<div class="message"><h3>' + data.userId + '</h3><p>' + data.message + '</p></div>');
    $('#messages').append($message);
}

这段代码展示了如何使用socket.io库与服务器进行实时通信，包括连接初始化、发送登录信息、监听新消息和发送消息到服务器。通过这个例子，开发者可以学习到如何使用JavaScript和jQuery进行前端开发，以及如何利用AJAX实现前后端的数据交换。