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>