锋利的jQuery基于ajax完成的聊天室案例。在网上搜索并没有很齐全的案例，有但是教程不具体加上自己也在学习ajax也顺便做一个简单的聊天室来帮助理解ajax。完成的大概思路如下：
1，用户提交数据时，数据不会马上被服务器接受，而是需要data来获取用户提交的数据之后传给服务器，服务器才去获取data传来的数据。
2，服务器获取到的数据要存入到数据库中，之后服务器还要将刚刚获取到的数据重新追加并更新输出最新的数据显示在页面上。
3，服务器最新输出的数据将会被ajax获取并输出到客户端页面，从而达到局部刷新，更新数据的效果。
jquery：
<script>
$(function(){
updata(); //加载页面默认运行
$('button').click(function(){ //点击按钮触发
if( $(':input').val()=='' ) {alert('数据不能为空，随便说点什么吧');return false;} //如果表单都是空 就禁止 只执行以下ajax
$.ajax({
type:'POST', //表单以post发送给服务器，客户端就要以post接受
url:'1.php', //向此页面索要信息
data:$(':input').serialize(), //要向服务器提交的内容
success: function(response,status,xhr){ //请求的内容成功执行以下代码
$(':input[name=msg]').val(''); // 内容部分清空
$('#load_msg2').text(''); //清空内容
$('#load_msg2').append(response); //重新加载内容
}
});
return false; //阻止表单默认跳转行为
});
function updata(){
$('#load_msg').animate({scrollTop:$('#load_msg2').height()-$('#load_msg').height()}); //滚动条自动拉到底部
$.ajax({
type:'POST',
url:"1.php",
success: function(response,status,xhr){
$('#load_msg2').text('');
$('#load_msg2').append(response);
}
});
}
setInterval(updata,500);
});
</script>
HTML：
<div id="wrap"> <div id="load_msg" style=" height:300px; overflow:scroll; overflow-x:hidden;"> <div id="load_msg2"></div> </div> <br><br> <form method="post" action="1.php"> 姓名：<input type="text" name="name"><br><br> 内容：<textarea name="msg" style="width:290px; height:150px;"></textarea><br><br> <button>提交内容</button> </form> (初次进入随便写点内容才能显示其他内容) </div>