Ajax PHP JavaScript MySQL实现简单在线聊天室不刷新

为了更好的利用这两天学到的关于Ajax的知识，我做了一个简单的在线聊天室。

思考

要实现聊天室，基本上就是通过Ajax传输数据，让PHP实现数据的差异和搜索，然后交给前端JavaScript更新页面，从而实现即时聊天的功能。

消息显示区

消息显示区是一个DIV块，我们将使用JavaScript在用Ajax获取服务器端信息后更新页面。

H3消息显示区/h3div id=' up '/div HR/发送消息

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

H3语音栏/H3 div id=' bottom ' formation='。/chat room _ insert . PHP ' div id=' chat _ up ' Span color/span input type=' color ' name=' color '/Span expression/Span select name=' Biao Qing ' Option value='微笑'微笑/optionvalue='淫荡'淫荡/optionvalue='亲切'亲切/optionvalue='专注地'/Option option value='傻'傻/Option/select Span chat object/Span select name=' receiver ' Option value='所有人/Option value='老郭'老郭/Option value='小果'小果/Span' height:auto'/textareinputtype=' button ' value=' speak ' onclick=' send()'/speak:span id=' result '/span/div/form/div节

让我们开始使用代码来实现相关的业务逻辑。

信息显示

我们的想法是，每隔一段时间，客户端向服务器发送一个请求，并轮询以获取最新数据。

script function show message(){ var Ajax=new XMlhttprequest()；//从服务器Ajax获取并处理数据。onreadystatechange=function(){ if(Ajax。readystate==4) {//alert (Ajax。response text)；//将获得的字符串转换为实体eval(' vardata=' Ajax . responsetext ')；//遍历数据数组，在页面上逐一显示内部信息。var s=for(var I=0；一.数据.长度；i ){数据[I]；s='('数据[i]。add _ time ')'；s='p style='color: '数据[i]。颜色'；'';S=数据[i]。发件人“收件人”数据[I]。接收器''数据[I]。《标清》:“数据[i]”。味精；s='/p '；}//开始翻页时添加信息var show message=document . getelementbyid(' up ')；show message . innerhtml=s；} } ajax.open('get '，')。/chat room . PHP ')；Ajax . send(null)；}//更新信息执行时间window . onload=function(){//show message()；//进行轮询实现页面自动更新setinterval ('show message()'，3000)；}/script更重要的是使用setInterval函数，从而实现间隔触发请求事件。

消息发送

至于消息发送，以表单的形式发送给服务器。我们使用了Html5的最新技术FormData。一般来说，目前主流的现代浏览器都支持这项技术。使用表单数据，我们可以很容易地获得表单的数据。

注意：FormData以键值对的形式收集表单数据，所以对应的表单项必须有name属性，否则表单不会收集该项的数据值。

脚本函数send(){ //将相关数据发送到服务器var form=document . getelementsbyname(' form ')[0]；var formdata=new FormData(表单)；var xhr=new XMLHttpRequest()；xhr . onreadystatechange=function(){ if(xhr . readystate==4){//alert(xhr . resposnetext)；document . getelementbyid(' result ')。innerHTML=xhr.responseTextsetTimeout('hideresult()'，2000)；} } xhr.open('post '，')。/chat room _ insert . PHP ')；xhr . send(form data)；document.getElementById('msg ')。值=' '；//返回false}//2秒后提示信息消失。函数hide result(){ document . getelementbyid(' result ')。innerhtml=}/script值得玩味：setTimeout函数实现的功能。从服务器获取反馈信息后，及时更新到发送按钮后面，给用户一个很好的体验。

使最优化

做完这里，基本就可以聊天了。但是效果会很差，主要是因为以下几点。没有滚动显示，每次都手动查看最新消息。获取的数据中存在大量重复数据，浪费流量，不方便查看信息。

显示非重复数据

对于显示重复的数据，这是因为我们没有使用where语句，但似乎我们每次都得到所有的数据。想象一下，我们如何获得最新的数据？应该为不同的客户提供服务。

好莱坞原则：不要来找我，我会来找你

这也是很多软件开发理念的反映，让客户自己决定获取什么数据，而不是一棍子打死服务器。因此，我们需要优化客户端发送的数据请求。

Script//记录当前获取的id的最大值，以防止重复信息var MaXid=0；函数show message(){ var Ajax=new XMlhttprequest()；//从服务器Ajax获取并处理数据。onreadystatechange=function(){ if(Ajax。readystate==4) {//alert (Ajax。response text)；//将获得的字符串转换为实体eval(' vardata=' Ajax . responsetext ')；//遍历数据数组，在页面上逐一显示内部信息。var s=for(var I=0；一.数据.长度；i ){数据[I]；s='('数据[i]。add _ time ')'；s='p style='color: '数据[i]。颜色'；'';S=数据[i]。发件人“收件人”数据[I]。接收器''数据[I]。《标清》:“数据[i]”。味精；s='/p '；//更新maxId=data[i]。获得最大记录id的id；}//开始翻页时添加信息var show message=document . getelementbyid(' up ')；show message . innerhtml=s；//showmessage.scrollTop可以先显示div的底部。//divnode.scrollHeight得到了包括滚动条高度在内的div的高度。show message . scroll top=show message . scroll height-show message . style . height；} } ajax.open('get '，')。/chatroom.php？MaXid=' MaXid ')；Ajax . send(null)；}//更新信息执行时间window . onload=function(){//show message()；//进行轮询实现页面自动更新setinterval ('show message()'，3000)；}/脚本优化显示

优化显示界面至关重要，没有人能容忍在发送一条数据后手动查看最新消息。所以我们需要设置显示区域的div。

添加滚动条

style # up { height:320px宽度：100%；飞越： auto；}/style每次都显示最新消息

说白了，让底部的div永远先显示。

//showmessage.scrollTop可以先显示div的底部。//divnode.scrollHeight得到了包括滚动条高度在内的div的高度。show message . scroll top=show message . scroll height-show message . style . height；完全码

前端代码

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleAjax聊天室/title style # up { height :320 px；宽度：100%;飞越：汽车；}/stylescript//记录当前获取到的编号的最大值，防止获取到重复的信息var MaXid=0；函数show message(){ var Ajax=new XMlhttprequest()；//从服务器获取并处理数据Ajax。onreadystatechange=function(){ if(Ajax。readystate==4){//alert(Ajax。response text)；//将获取到的字符串转换成实体eval(' var data=' Ajax。response text ')；//遍历数据数组，把内部的信息一个个的显示到页面上var s=for(var I=0；一。数据。长度；I){ 0数据[一]；s='('数据[i].add _ time ')'；s='p style='color: '数据[i].颜色';'；s=数据[i].发件人对数据[i].接收方''数据[i].biaoqing '说：'数据[i].味精；s='/p '；//把已经获得的最大的记录编号更新maxId=数据[i].id；} //开始向页面时追加信息var show message=文档。getelementbyid(' up ')；显示消息。innerhtml=s；//showmessage.scrollTop可以实现差异底部最先展示//divnode.scrollHeight而已获得差异的高度包括滚动条的高度显示消息。滚动顶部=显示消息。滚动高度-显示消息。风格。身高；} } ajax.open('get '，')./chatroom.php？MaXid=' MaXid ')；Ajax。发送(null)；}//更新信息的执行时机窗户。onload=function(){//show message()；//制作轮询，实现自动的页面更新setInterval('showmessage()'，3000)；}/脚本/头体样式='底色：银色' div id='主' H3消息显示区/h3 div id='up' /div hr/h3发言栏/h3 div id='底部'表单操作='。/聊天室_插入。PHP ' div id=' chat _ up ' span颜色/span输入类型='color' name='color'/span表情/span选择名称='biaoqing '选项值='微笑地'微笑地/option选项值='猥琐地'猥琐地/option选项值='和蔼地'和蔼地/option选项值='目不转睛地'目不转睛地/option选项值='傻傻地'傻傻地/option /select span聊天对象/span选择名称='接收者'选项值=' '所有的人/option选项值='老郭'老郭/option选项值='小郭'小郭/option选项值='大郭'大郭/option/select/div div id=' chat _ bottom '脚本函数send(){ //向服务器差入相关的数据var form=文档。getelementsbytagname(' form ')[0]；var formdata=new FormData(表单);var xhr=new XMLHttpRequest()；xhr。onreadystatechange=function(){ if(xhr。readystate==4){//alert(xhr。resposnetext)；文件。getelementbyid(' result ').innerHTML=xhr . responsetextsettimeout(' hide result()'，2000)；} } xhr.open('post '，')./聊天室_插入。PHP’)；xhr。发送(表单数据)；document.getElementById('msg ').值=' ';//返回false} //2秒后实现提示信息的消失函数隐藏结果(){文档。getelementbyid(' result ').innerHTML=}/脚本文本区域id=' msg ' name=' msg ' style=' width :380 px；'高度： auto/text area输入类型='按钮'值='发言onclick='send()' /发言：span id=' result '/span/div/form/div/div/body/html数据库表结构

mysql desc消息；- - - - - - |字段|类型|空|键|默认值|额外|---| id | int(100)| NO | PRI | Null | auto _ increment | | msg | varchar(255)| NO | | Null | | sender | varchar(30)| NO | | Null | | receiver | varchar(30)| NO | | Null | | color | varchar(10)| YES | | Null | | Biao Qing | varchar(10)| yes | | null | | add _ time | datetime | yes | | null | |-。

？Php//获取最新聊天信息$ conn=MySQL _ connect ('localhost '，' root '，' MySQL ')；MySQL _ select _ db(' test ')；MySQL _ query(' set name utf8 ')；$ MaXid=$ _ GET[' MaXid ']；//为防止获取重复数据，此请求的记录结果标识应为标识$ SQL='从标识所在的消息中选择* '。“$ maxid”；$ qry=MySQL _ query($ SQL)；$ info=array()；while($ rst=MySQL _ fetch _ assoc($ qry)){ $ info[]=$ rst；}//以json格式向客户端提供数据echo JSON _ encode($ info)；总结与展望

摘要

这是一个完整的小例子。回顾一下，今天的收获如下：如何轮询获取数据，如何借助setInterval函数获取最新数据，如何借助setTimeout函数获取最新数据：有客户端控件发送的maxId参数。如何优化显示：溢出实现滚动效果；Divnode.scrollTop控制底部效果的显示

展望未来，您可能会发现客户端的发送方是固定的，这是因为我们没有以用户身份登录。如果用户登录，我们的发送者可以从会话中动态获取它。这样也能更符合人的主观感受。

界面比较差，没有美化效果。有了Bootstrap，效果应该很大。

手机适配效果不好，WindowsPhone上的颜色控制无法正常显示。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。