asp.net+jquery+xml实现最简单的聊天室

最近在sina看nba的文字直播的时候，对网站右下角的那一个聊天窗口产生兴趣，就决定自己也做一个。

    上网查查资料，这样的聊天室无非就是用户输入数据传到服务器保存，然后用户页面再实时地从数据库取出数据，显示在页面上，即可完成一次聊天操作。

   首先我定义了一个xml文件，用于保存用户的聊天数据，

<?xml version="1.0" encoding="utf-8"?>
<Messages>
<Message>
    <users>crazyluo</users>
    <data>ceshide</data>
    <sendtime>23:25</sendtime>

<sendto>me</sendto>
</Message>

</Messages>

users保存发送信息的用户，data是发送的数据，sendtime是发送的时间，sendto是发送的对象

然后创建一个聊天的页面，页面代码大致是如下：

    <div id="main">
    <div id="msg"></div>
    <div id="div1">
    <textarea id="text" style="width:200px;"></textarea>
    <input type="button" id="btn" value="提交" />
    </div>
    </div>

然后通过js从xml中取数据

   var chatXml = function() {
            var obj = document.getElementById("msg");
            obj.scrollTop = obj.scrollHeight - obj.clientHeight;

            $.get("Message.xml?time=" + new Date(), function(xml) {
            $("#msg").html("");
                $(xml).find("Messages>Message").each(function() {
                    $("#msg").append("<table><tr><td style='width:50px'>" + $(this).find("users").text() + "说:" + "</td><td>" + $(this).find("data").text() + "</td></tr></table>");
                })
            })
        }

其中“time=" + new Date(), ”这句代码不加的话，页面显示的数据就不会更新，网上有人解释说，在这个地方加一个随机显示的代码就ok，暂时还不是很清楚这个的用途。

var start = function() {

            setInterval("chatXml()", 1000);
        }

定义一个显示数据的函数，每隔一秒刷新一次页面。

下面是输入数据，提交数据，（暂时没用考虑用户这些信息，只写了提交的数据，其他的同样的道理就ok）

这里我用的是get方式，我觉得最好用post方式吧，等我有时间了就修改修改这个源代码

var create = function() {
            $.get(encodeURI("updateMessage.ashx?message=" + $("#text").val()), function(xml) {
                            $("#text").val("");
            }, "xml")

        }

updateMessage.ashx中是对xml的操作。主要是把message数据存入我们制定的xml文件中就ok了。

一下是显示框的css

#msg
        {
        border:#A9A9A9 1px solid;
        width:400px;
        height:400px;
        word-spacing:normal;
        overflow-y:scroll;
        list-style-type:none;
        word-break:break-all;
        overflow-x:hidden;
        }
         在显示数据的函数中：

       var obj = document.getElementById("msg");
            obj.scrollTop = obj.scrollHeight - obj.clientHeight;

这两句话使得显示数据的div的滚动条始终在最下方。

总结：可能我这么理解这个网页聊天一点都不高明，但是大致的方法思路应该是这样子的，争取学的更多，然后完善一下。