Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室

为更好的运用这两天学到的Ajax的相关的知识，就做了个简单的在线网络聊天室。

思路

实现聊天室，基本上就是通过Ajax来传递数据，让PHP来实现对数据的差入和查找，再交给前端JavaScript实现页面的更新，达到即时聊天的功能。

消息显示区

消息显示区就是一个DIV块，我们会借助Ajax获取到服务器端信息之后，使用JavaScript来更新页面。

<h3>消息显示区</h3><div id="up"></div><hr />

发消息

发消息模块，其实说白了，就是向服务器上插入数据的过程，也是属于比较简单的。

<h3>发言栏</h3>  <div id="bottom">    <form action="./chatroom_insert.php">      <div id="chat_up">        <span>颜色</span>        <input type="color" name="color"/>        <span>表情</span>        <select name="biaoqing">          <option value="微笑地">微笑地</option>          <option value="猥琐地">猥琐地</option>          <option value="和蔼地">和蔼地</option>          <option value="目不转睛地">目不转睛地</option>          <option value="傻傻地">傻傻地</option>        </select>        <span>聊天对象</span>        <select name="receiver">          <option value="">所有的人</option>          <option value="老郭">老郭</option>          <option value="小郭">小郭</option>          <option value="大郭">大郭</option>        </select>      </div>      <div id="chat_bottom">        <textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>        <input type="button" value="发言" onclick="send()" />        发言：<span id="result"></span>      </div>    </form>  </div>

板块

下面开始使用代码来实现相关的业务逻辑。

消息显示

我们的思路就是每隔一段时间，客户端向服务器发送请求，轮询获得最新的数据。

<script>function showmessage(){  var ajax = new XMLHttpRequest();  // 从服务器获取并处理数据  ajax.onreadystatechange = function(){    if(ajax.readyState==4) {      //alert(ajax.responseText);       // 将获取到的字符串转换成实体      eval('var data = '+ajax.responseText);      // 遍历data数组，把内部的信息一个个的显示到页面上      var s = "";      for(var i = 0 ; i < data.length;i++){        data[i];        s += "("+data[i].add_time+") >>>";        s += "<p style='color:"+data[i].color+";'>";          s += data[i].sender +" 对 " + data[i].receiver +"  "+ data[i].biaoqing+"说：" + data[i].msg;        s += "</p>";      }      // 开始向页面时追加信息      var showmessage = document.getElementById("up");      showmessage.innerHTML += s;    }  }  ajax.open('get','./chatroom.php');  ajax.send(null);  }// 更新信息的执行时机window.onload = function(){  //showmessage();    // 制作轮询,实现自动的页面更新  setInterval("showmessage()",3000);}</script>