实验十Ajax聊天室应用
【实验目的】
1、掌握jQuery对Ajax方法的支持；
2、掌握jQuery处理Ajax应用的常用方法；
3、掌握load、get、getJson、post等常用方法的应用。
【实验准备】
1、复习教材相关内容；
2、预习本次实验；
【实验内容】
完成基于ajax无刷新技术开发的聊天室程序，此程序要求允许多用户在网页上聊天，并且可以实时地更新信息。
客户端index.html代码：
1、HTML代码
加载中...
姓名：
内容：
2、css代码
body{
margin:0;
padding:0;
font-size:12px;
}
#messagewindow{
height:250px;
border:1pxsolid;
padding:5px;
overflow:auto;
}
#wrapper{
margin:auto;
width:438px;
}
3、JQERY代码
//
$(function(){
//定义时间戳
timestamp=0;
//调用更新信息函数
updateMsg();
//表单提交
$("#chatform").submit(function(){
$.post("backend.php",{
message:$("#msg").val(),
name:$("#author").val(),
action:"postmsg",
time:timestamp
},function(xml){
//清空信息文本框内容
$("#msg").val("");
//调用解析xml的函数
addMessages(xml);
});
returnfalse;//阻止表单提交
});
});
//更新信息函数，每隔一定时间去服务端读取数据
functionupdateMsg(){
$.post("backend.php",{time:timestamp},function(xml){
//移除掉等待提示
$("#loading").remove();
//调用解析xml的函数
addMessages(xml);
});
//每隔4秒，读取一次.
setTimeout(''updateMsg()'',4000);
}
//解析xml文档函数，把数据显示到页面上
functionaddMessages(xml){
//如果状态为2，则终止
if($("status",xml).text()=="2")return;
//更新时间戳
timestamp=$("time",xml).text();
//$.each循环数据
$("message",xml).each(function(){
varauthor=$("author",this).text();//发布者
varcontent=$("text",this).text();//内容
varhtmlcode=""+author+":"+content+"
";
$("#messagewindow").prepend(htmlcode);//添加到文档中
});
}
//]]>
服务器端代码：详见backend.php代码
【总结与体会】
通过本次实验掌握了jQuery对Ajax方法的支持、掌握了jQuery处理Ajax应用的常用方法、掌握了load、get、getJson、post等常用方法的应用，但是在操作的过程中也发现了很多的问题，在以后的学习中更加努力，争取早日做到得心应手的运用本次试验的内容。
|
|
