ajax 实现一个网页版山寨QQ .
2014-10-05 16:41
351 查看
思路：用户登录后，可以点击好友列表对好友进行聊天，那么所发送的数据都会保存到数据库，而聊天窗口每隔一定时间向数据库索要数据
（条件是 where getter='$getter' and sender='$sender' and isGet=0" ）
该程序包含以下几个页面
login.php //登录页面
fiendList.php //登录好友页面
chatRoom.php //聊天室页面,要发送数据和接收数据都要通过ajax调用相应的controller页面，下面两个就是了
sendMessageController //处理发送过来的数据
getMessageController //返回相应的聊天数据
MessageService.php //用于服务上面的两个控制器 （就是model）
下面是源码
//====================login.php====================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<h1>欢迎登录聊天室</h1>
<form action="LoginController.php" method="post">
用户名:<input type="text" name="username" /><br/><br/>7
密 码：<input type="text" name="passwd" /><br />
<input type="submit" value="登录" /><br />
</form>
</html>
//==================fridendList.php=======================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function openChatRoom(obj){
window.open("chatRoom.php?username="+obj.innerText,"_blank");
}
</script>
</head>
<body>
<h1>好友列表</h1>
<ul>
<li onclick="openChatRoom(this)">songjiang</li>
<li onclick="openChatRoom(this)">zhangfei</li>
<li onclick="openChatRoom(this)">xiaoqian</li>
<li onclick="openChatRoom(this)">linzhouzhi</li>
</ul>
</body>
</html>
//=========================chatRoom.php===============
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php
$username=$_GET['username'];
//取出session中登陆名
session_start();
$loginUser = $_SESSION['loginuser'];
?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest=null;
//没歌两秒调用getmessage()
window.setInterval("getMessage()",5000);
function getMessage(){
myXmlHttpRequest = getXmlHttpObject();
if(myXmlHttpRequest){
var url="getMessageController.php";
var data = "getter=<?php echo $loginUser;?>&sender=<?php echo $username?>";
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=function(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
var mesRes = myXmlHttpRequest.responseXML;
//取出content内容和时间
var cons = mesRes.getElementsByTagName("con");
if(cons.length!=0){
//有多少条记录就显示多少条记录
for(var i=0;i<cons.length;i++){
$('mycons').value += "<?php echo $username;?> -->><?php echo $loginUser;?> say："+cons[i].childNodes[0].nodeValue+"\r\n ";
}
}
}
}
}
myXmlHttpRequest.send(data);
}
}
function sendMessage(){
myXmlHttpRequest = getXmlHttpObject();
if(myXmlHttpRequest){
var url = "sendMessageController.php";
//js中如何使用php数据
var data = "con="+$('con').value+"& getter=<?php echo $username; ?>& sender=<?php echo $loginUser; ?>";
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=function(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
//这里要返回信息,这里我们不需要
}
}
}
myXmlHttpRequest.send(data);
$('mycons').value += "you --><?php echo $username;?> say: "+$('con').value + new Date()+"\r\n";
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<center>
<h1>You(<?php echo $loginUser;?>with <font color='red'><?php echo $username; ?></font>chatting..)</h1>
<textarea cols="40" rows="20" id="mycons" value=""></textarea><br/>
<input type="text" style="width:200px" id="con" />
<input type="button" value="sendmessage" onclick="sendMessage()" />
</center>
</html>
//======================sendMessageController.php============================
<?php
require_once 'MessageService.class.php';
$sender = $_POST['sender'];
$getter = $_POST['getter'];
$con = $_POST['con'];
//file_put_contents("mylog.log",$sender."__".$getter."__".$con."\r\n",FILE_APPEND);
$messageService = new MessageService();
if($messageService->addMessage($sender, $getter, $con)==0){
echo "you operate is faile";
}else{
echo "you operate is ok";
}
//========================getMessageController.php==========================
<?php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
require_once 'MessageService.class.php';
$getter = $_POST['getter'];
$sender= $_POST['sender'];
//file_put_contents("mylog.log",$getter."_this is getmessage_".$sender."\r\n",FILE_APPEND);
$messageService = new MessageService();
$mesList = $messageService->getMessage($getter,$sender);
echo $mesList;
file_put_contents("mylog.log",$mesList."\r\n",FILE_APPEND);
//============================MessageService.php========================
<?php
require_once 'SqlHelper.class.php';
class MessageService{
//add message in database
function addMessage($sender,$getter,$con){
$sql = "insert into message (sender,getter,content,sendTime) values('$sender','$getter','$con',now())";
$sqlHelper = new SqlHelper();
$mes=$sqlHelper->execute_dml($sql);
}
//获取数据并将其返回给聊天室
function getMessage($getter,$sender){
$sql="select * from message where getter='$getter' and sender='$sender' and isGet=0";
$sqlHelper =new SqlHelper();
$array = $sqlHelper->execute_dql2($sql);
//拼接成xml 格式
$messageInfo = "<meses>";
for($i=0;$i<count($array);$i++){
$row = $array[$i];
$messageInfo.="<mesid>{$row['id']}</mesid><sender>{$row['sender']}</sender><getter>{$row['getter']}</getter><con>{$row['content']}</con><sendTime>{$row['sendTime']}</sendTime>";
}
$messageInfo.="</meses>";
//更新
$sql = "update message set isGet=1 where getter='$getter' and sender='$sender'";
$sqlHelper->execute_dml($sql);
$sqlHelper->close_connect();
return $messageInfo;
}
}
（条件是 where getter='$getter' and sender='$sender' and isGet=0" ）
该程序包含以下几个页面
login.php //登录页面
fiendList.php //登录好友页面
chatRoom.php //聊天室页面,要发送数据和接收数据都要通过ajax调用相应的controller页面，下面两个就是了
sendMessageController //处理发送过来的数据
getMessageController //返回相应的聊天数据
MessageService.php //用于服务上面的两个控制器 （就是model）
下面是源码
//====================login.php====================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<h1>欢迎登录聊天室</h1>
<form action="LoginController.php" method="post">
用户名:<input type="text" name="username" /><br/><br/>7
密 码：<input type="text" name="passwd" /><br />
<input type="submit" value="登录" /><br />
</form>
</html>
//==================fridendList.php=======================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function openChatRoom(obj){
window.open("chatRoom.php?username="+obj.innerText,"_blank");
}
</script>
</head>
<body>
<h1>好友列表</h1>
<ul>
<li onclick="openChatRoom(this)">songjiang</li>
<li onclick="openChatRoom(this)">zhangfei</li>
<li onclick="openChatRoom(this)">xiaoqian</li>
<li onclick="openChatRoom(this)">linzhouzhi</li>
</ul>
</body>
</html>
//=========================chatRoom.php===============
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php
$username=$_GET['username'];
//取出session中登陆名
session_start();
$loginUser = $_SESSION['loginuser'];
?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest=null;
//没歌两秒调用getmessage()
window.setInterval("getMessage()",5000);
function getMessage(){
myXmlHttpRequest = getXmlHttpObject();
if(myXmlHttpRequest){
var url="getMessageController.php";
var data = "getter=<?php echo $loginUser;?>&sender=<?php echo $username?>";
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=function(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
var mesRes = myXmlHttpRequest.responseXML;
//取出content内容和时间
var cons = mesRes.getElementsByTagName("con");
if(cons.length!=0){
//有多少条记录就显示多少条记录
for(var i=0;i<cons.length;i++){
$('mycons').value += "<?php echo $username;?> -->><?php echo $loginUser;?> say："+cons[i].childNodes[0].nodeValue+"\r\n ";
}
}
}
}
}
myXmlHttpRequest.send(data);
}
}
function sendMessage(){
myXmlHttpRequest = getXmlHttpObject();
if(myXmlHttpRequest){
var url = "sendMessageController.php";
//js中如何使用php数据
var data = "con="+$('con').value+"& getter=<?php echo $username; ?>& sender=<?php echo $loginUser; ?>";
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=function(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
//这里要返回信息,这里我们不需要
}
}
}
myXmlHttpRequest.send(data);
$('mycons').value += "you --><?php echo $username;?> say: "+$('con').value + new Date()+"\r\n";
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<center>
<h1>You(<?php echo $loginUser;?>with <font color='red'><?php echo $username; ?></font>chatting..)</h1>
<textarea cols="40" rows="20" id="mycons" value=""></textarea><br/>
<input type="text" style="width:200px" id="con" />
<input type="button" value="sendmessage" onclick="sendMessage()" />
</center>
</html>
//======================sendMessageController.php============================
<?php
require_once 'MessageService.class.php';
$sender = $_POST['sender'];
$getter = $_POST['getter'];
$con = $_POST['con'];
//file_put_contents("mylog.log",$sender."__".$getter."__".$con."\r\n",FILE_APPEND);
$messageService = new MessageService();
if($messageService->addMessage($sender, $getter, $con)==0){
echo "you operate is faile";
}else{
echo "you operate is ok";
}
//========================getMessageController.php==========================
<?php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
require_once 'MessageService.class.php';
$getter = $_POST['getter'];
$sender= $_POST['sender'];
//file_put_contents("mylog.log",$getter."_this is getmessage_".$sender."\r\n",FILE_APPEND);
$messageService = new MessageService();
$mesList = $messageService->getMessage($getter,$sender);
echo $mesList;
file_put_contents("mylog.log",$mesList."\r\n",FILE_APPEND);
//============================MessageService.php========================
<?php
require_once 'SqlHelper.class.php';
class MessageService{
//add message in database
function addMessage($sender,$getter,$con){
$sql = "insert into message (sender,getter,content,sendTime) values('$sender','$getter','$con',now())";
$sqlHelper = new SqlHelper();
$mes=$sqlHelper->execute_dml($sql);
}
//获取数据并将其返回给聊天室
function getMessage($getter,$sender){
$sql="select * from message where getter='$getter' and sender='$sender' and isGet=0";
$sqlHelper =new SqlHelper();
$array = $sqlHelper->execute_dql2($sql);
//拼接成xml 格式
$messageInfo = "<meses>";
for($i=0;$i<count($array);$i++){
$row = $array[$i];
$messageInfo.="<mesid>{$row['id']}</mesid><sender>{$row['sender']}</sender><getter>{$row['getter']}</getter><con>{$row['content']}</con><sendTime>{$row['sendTime']}</sendTime>";
}
$messageInfo.="</meses>";
//更新
$sql = "update message set isGet=1 where getter='$getter' and sender='$sender'";
$sqlHelper->execute_dml($sql);
$sqlHelper->close_connect();
return $messageInfo;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ajax 实现一个网页版山寨QQ
- MVC实现类似QQ的网页聊天功能-Ajax（上）
- MVC实现类似QQ的网页聊天功能-ajax（下）
- 利用AJAX技术实现网页无刷新进度条显示
- ajax 笔记－－ 写了一个不用刷新就能实现－－用户名验证的例子
- 我有一个想法，组建一个网页搜索采集的team，实现一些有价值的数据，有兴趣的朋友可以联系我
- 一个实现让整个网页变灰的javascript 函数
- 在网页中实现弹出QQ对话框
- 网页上实现一个在线录音的功能
- 今天用AJAX实现了一个WEBIM，大家看下，请指教
- 在一个ajax extender 工程中实现多个 ajax extender 控件的方法
- ajax 笔记－－ 写了一个不用刷新就能实现－－用户名验证的例子
- 遇到一个很难说话的人，要求在网页上点一下文字，变成另外一些文字，下面是简单的实现
- 盗QQ的密码软件模拟实现- -| 回首页 | 2005年索引 | - -用C写的一个扫描器源码
- 用JSP+Servlet+JavaBean模式实现一个简单的登录网页设计(JSP+Tomcat+MySQL)
- 一个Ajax实现的多标签栏
- 用Atlas来实现一个基于AJAX的无刷新Chatroom
- 利用xmlHttp实现一个简单的Ajax无刷新
- 自己写的一个用AJAX实现的留言系统
- 网页防抓取的一个思路以及实现