一个简单的Ajax实例——基于Ajax无需刷新技术开发的聊天室程序，实现多用户在网页上聊天，并可以实时更新信息。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,div,p{margin:0;padding:0;font-size:12px;}
#wrapper{width:438px;margin:0 auto; border:1px solid;}
#messagewindow{height:250px;border:1px solid;padding:5px;overflow:auto;margin-bottom:8px;}
</style>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
timestamp=0; //定义时间戳
updateMsg(); //调用更新信息函数
$("#chartform").submit(function(){ //表单提交
$.post("backend.php",{
message:$("#msg").val(),
name:$("#author").val(),
action:"postmsg",
time:timestamp
},function(xml){
$("#msg").val(""); //清空信息文本框内容
//处理XML
addMessages(xml); //调用解析xml的函数
}
);
return false; //阻止表单提交
});
});
function updateMsg(){ //更新信息函数，每隔一定时间去服务器端读取数据
$.post("backend.php",{
time:timestamp
},function(xml){
$("#loading").remove();
//处理XML
addMessages(xml);
});
setTimeout('updateMsg()',4000); //每隔4秒读取一次
}
function addMessages(xml){
//$("status",xml)，用来通知jquery去XML中寻找'status标签' if($("status",xml).text()=="2") return; //如果值为2，则表示请求成功但没有新信息
timestamp=$("time",xml).text(); //更新时间戳
$("message",xml).each(function(){
var author=$("author",this).text();
var content=$("text",this).text();
var htmlcode="<strong>"+author+"</strong>: "+content+" <br/>";
$("#messagewindow").prepend(htmlcode); //添加到文档中
});
}
</script>
</head>
<body>
<div id="wrapper">
<p id="messagewindow"><span id="loading">加载中...</span></p>
<form id="chartform" action="#">
姓名： <input type="text" id="author" size="50"/><br />
内容： <input type="text" id="msg" size="50"/><br />
<input type="submit" value="发送" /><br/>
</form>
</div>
</body>
</html>
扫一扫
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
