csdn二次培训第五课_senmag烤箱-CSDN博客

本文链接：https://blog.csdn.net/Justbroken/article/details/7487662

本次培训已接近尾声，老师又要走了，真有点舍不得啊，希望老师能常来，不要才一学期来一次，真心希望学院里多安排点时间，不要每次都这么紧，感觉东西都没听完，这样老师和学生都会觉得很遗憾的。。。

因为一些事，缺了不少课，现在觉得老师讲的东西实在太高深了，每段代码都不知道具体是指什么，也不知道该在什么时候用，不记得什么元素对应什么属性，会有什么效果。。。真的好难好难，现在心情真的很烦躁。。。但是还是要耐着性子，好好整理一下的；以下是我写的代码，只能实现到从登录界面到主界面的过程，其他的我想在研究一下，容我好好消化下。。

首先是登陆界面，chatrome.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>欢迎使用聊天室</title>
<link type="text/css" rel="stylesheet" href="chat.css" />


</head>

<body>
<form action="logincheck.php" method="post">
  <div align="center">
    <table id="loginTab" border="1">
      <tr>
        <td colspan="2"><div align="center">欢迎使用聊天室</div> </td>
      </tr>
      <tr>
        <td width="171" ><div align="right">用户名：</div></td>
        <td width="213" ><input type="text" name="username"/></td>
      </tr>
      <tr>
        <td><div align="right">密码：</div></td>
        <td><input type="password" name="password"/></td>
      </tr>
      <tr>
        <td><div align="center">
          <input type="submit" value="登录聊天室" />
        </div></td>
        <td><div align="center">
          <input type="reset" value="重置信息" />
        </div></td>
      </tr>
  </table>
  </div>
</form>
</body>
</html>

再者，是中转页面logincheck.php

<?php
session_start();


$_SESSION['username']=$_POST['username'];//向全局变量添加一个用户名

header("Location:chatin.php")//执行跳转


?>

而后，是主界面chatindex.php

<?php
session_start();//开启session
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> our chatrome</title>
<link type="text/css" rel="stylesheet" href="chat.css" />
<style>
#send{
	color:#30F;
	font-size:36px;
	background-color:#CC9;
}
#chatcontent{
	text-align:left;
	padding:4px;
	height:200px;
	overflow:auto;
	background-color:#C9C;
	color:#600;
	font-size:24px;
}
	
</style>
<script>
//===========初始化ajax对象==================================
var xmlhttp;
//该方法解决iE低版本的创建ajax对象差异问题
function initAjax(){
         //判断是否是IE浏览器
		 if(window.ActiveXObject){
			 //如果是IE浏览器就这样创建对象否则如else中创建
			 xmlhttp=new AcctiveXObject("Microsoft.XMLHTTP");
		 }
		 else{
			 xmlhttp=new XMLHttpResquest();
			   }
}
//==========初始化ajax对象结束=======================
//===========发送聊天信息开始=============================
function sendMsg(){
	//获取用户与输入的内容
	var message=document.getElementById("content").value;
	//1.初始化ajax对象
	initAjax();
	//sendMsg.php?r=............&c=123
	var url="sendMsg.php?r="+Math.random()+"&content="+encodeURI(message);
		//2.open,打开链接
	xmlhttp.open("get",url,true);
	xmlhttp.send(null);
	//3.send,发送交互请求
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4){
			
		if(xmlhttp.responseText){
			//aleart("发言成功");
			//如果成功，则清空发言框的内容
			document.getElementById("content").value=" ";
		}
		/*else{
			alert("发言失败");
		}*/
		}
	}
}//===============发送聊天信息结束================================================
function dispMsg(){
	
	/*var message=document.getElementById("content").value;
	*/
	initAjax();
	
	var url="getMessage.php?r="+Math.random();
	
	xmlhttp.open("get",url,true);
	xmlhttp.send(null);
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4){
			
		
			
			var chatMain=document.getElementById("chatcontent");
			chatMain.innerHTML=xmlhttp.responseText;
			document.getElementById("chatcontent").scrollTop=document.getElementById("chatcontent").scrollHeight;
			
		
		
		}
	}
}//===============显示聊天信息结束================================================
dispMsg();
</script>

</head>

<body>
<p align="center"><font size=30 color="#FF6633">welcome to our chatrome!! </font></p>
<div align="center">
  <table id="chatTab" border="0" align="center" >
    <tr>
      <td><div align="center">欢迎<?php
	  echo $_SESSION['username']; ?>
      进入聊天室</div></td>
      <td><div align="center">在线用户列表</div></td>
    </tr>
    <tr>
      <td height="200">
      <div id="chatcontent">
      <p>我喜欢在忙碌中</p>
      <p>寻找快乐
      </p>
      <p>在空闲的时间里</p>
      <p>我似乎找不到自我</p>
      <p>找不到生活的蓬勃生机</p>
      <p>但是有时真的很累</p>
      <p>因为没有目标</p>
      <p>没有梦想</p>
      <p>才会茫然而有所失</p>
      <p>然而</p>
      <p>青春就是要张扬着</p>
      <p>所以即使是一个白日梦</p>
      <p>也满怀激情吧！！</p>
      <p>
      爱你自己，爱生活！！
      </p> 
      </div>
      </td>
      <td align="center">
      <select size="12" style="background-color:#CFC">
      <option>http://172.16.235.116</option>
      <option>http://www.hytc.edu.cn</option>
     </select>
	</td>      
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td><textarea  name="content" cols="85" rows="18"></textarea></td>
      <td><input id="send" type="button" value="发送" /></td>
    </tr>
  </table>
</div>
<center>
<br />
淮阴师范学院计科1104艺版权所有<br />
新浪微博:******<br />
腾讯微博:http://t.qq.com/X5027931yi<br />
</body>
</html>

还有两个php文件，也就是主界面发送信息所需的

1.senMag.php（用来发送信息）

<?php

/*
本页面的功能：使用PHP连接Mysql，查询聊天信息
关于php连接Mysql
why
正因为我们要在php中执行sql语句，所以要连接。我们可以使用php接收访问者提交的数据库，更新到数据库中，可以实现用户和服务器的数据交互。（本例，我们要实现，把聊天信息保存到数据库中）
怎样连接？总分三步
1.mysql_connect("数据库服务器IP【localhost】","数据库的用户名【root】","密码") //连接数据库 localhost=127.0.0.1

2.mysql_select_db("数据库的名称");//要连接哪个数据库，这里一定不能写成表名

3.mysql_query("set names utf8")  设置编码，防止sql语句执行过程中出现中文乱码
*/
mysql_connect("localhost","root","123");//连接到本地数据，用户名root，密码123
mysql_select_db("hytc");//连接到hytc数据库
mysql_query("set names utf8");//设置编码
//获取当前登录的用户名
$uname=$_SESSION['username'];
//获取聊信息
$content=$_GET['content'];
//$_SERVER是一个超全局变量，里面保存的是服务器的信息
//$_SERVER['REMOTE_ADDR']获取访问者的IP
$sql="insert into chat(speaker,content,theip,speaktime) values('".$uname."','".$content."','".$_SERVER['REMOTE_ADDR']. "',now())";
//在php中执行sql语句
mysql_query($sql);
//判断是否插入成功
echo mysql_affected_rows();


?>

2.getMessage.php（用来接收信息）

<?php
/*1.mysql_connect("数据库服务器IP【localhost】","数据库的用户名【root】","密码") //连接数据库 localhost=127.0.0.1

2.mysql_select_db("数据库的名称");

3.mysql_query("set names utf8")  设置编码，防止sql语句执行过程中出现乱码
*/
mysql_connect("localhost","root","123");
mysql_select_db("hytc");
mysql_query("set names utf8");

$sql="select *from chat order by id desc";// order by id desc表示按照id倒序排列
$resultSet=mysql_query($sql);
while($rows=mysql_fetch_assoc($resultSet)){//mysql_fetch_assoc()表示把结果集转换为关联数组，转换后，就可以用
	//$rows是一个数组，它的数据格式是这样的：$rows['字段名']进行访问	//$rows=array("id";"speaker","connect","theip（访问的IP）","speaktime");
 echo $rows['id']." ".$rows['theip']."  ".$rows['speaker']."   ".$rows['speaktime']."<br>".$rows['content']."<br>";
}

?>

其中大部分都是按照老师的代码打出来的，在其基础上有过思考，但是由于某种原因，总是实现不了，很多问题还待解决，以上提到Mysql数据库，这是实现聊天的关键一步，首先需要一个wamp工具，进入PhpMyadmin==>新建立一个数据库===>建立一个数据表(xx_user)，如果不出差错，应该可以在数据库中初步看见用户信息，以及发送信息，但我的代码还是没能实现这一强大的一步，所以，往后实现在主界面接受发送信息更是不可能了，所以，还待好好研究，加油，我会做出来的！！！