test

原创
2013/05/03 11:20
阅读数 49
aaaaaaaaaaaaaaaaaa
CREATE TABLE `messages` (
  `id` int(7) NOT NULL auto_increment,
  `user` varchar(255) NOT NULL,
  `msg` text NOT NULL,
  `time` int(9) NOT NULL,
  PRIMARY KEY  (`id`)
)
asdfasdfsdf
<html>
<head>
    <title>AJAX with jQuery Example</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            timestamp = 0;
            updateMsg();
            $("form#chatform").submit(function(){
                $.post("backend.php",{                               //jQuery的post函数,是不是使AJAX变得如此简单了??
                            message: $("#msg").val(),
                            name: $("#author").val(),
                            action: "postmsg",
                            time: timestamp
                        }, function(xml) {
                    $("#msg").attr("value","");     //清空信息框
                    addMessages(xml);
                });
                return false;
            });
        });
        function addMessages(xml) {
            if($("status",xml).text() == "2") return;
            timestamp = $("time",xml).text();       //当返回信息后,设置时间戳,请求的时候带着这个时间戳请求
                                        //这样通过服务器端的比较可以知道是否需要更新聊天框!
            $("message",xml).each(function(id) {
                message = $("message",xml).get(id);
                $("#messagewindow").prepend("<b>"+$("author",message).text()+
                                            "</b>: "+$("text",message).text()+
                                            "<br />");
            });
        }
        function updateMsg() {
             //   alert(timestamp);
            $.post("backend.php",{ time: timestamp }, function(xml) {
                $("#loading").remove();            //取出load
                addMessages(xml);                  //在聊天框中增加聊天记录
            });
            setTimeout('updateMsg()', 4000);      //在没有提交的情况下,是自动4s查询一下,如果有新的就更新聊天框
        }
    </script>
    <style type="text/css">
        #messagewindow {}{
            height: 500px;
            border: 1px solid;
            padding: 5px;
            overflow: auto;
        }
        #wrapper {}{
            margin: 35px auto;
            width: 438px;
        }
    </style>
</head>
<body>
    <div  align="center">
    <div id="wrapper" align="left">
    <p id="messagewindow"><span id="loading">Loading</span></p>
    <form id="chatform">
    姓名:
    <input type="text" id="author" size="6" />
    信息: <input type="text" id="msg" size="30" />
    <input type="submit" value="发送" /><br />
    </form>
    </ div>
</div>
</body>
</html>

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部