PHP+mysql+ajax轻量级聊天室实现方法详解_H5之家 - 中国HTML5教程资源分享第一站

<!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=gb2312" /> <title>聊天页面</title> <script type="text/javascript"> var t = setInterval(function(){get_chat_msg()},5000); // // General Ajax Call // var oxmlHttp; var oxmlHttpSend; function get_chat_msg() { if(typeof XMLHttpRequest != "undefined") { oxmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { oxmlHttp = new ActiveXObject("Microsoft.XMLHttp"); } if(oxmlHttp == null) { alert("浏览器不支持XML Http Request！"); return; } oxmlHttp.onreadystatechange = get_chat_msg_result; oxmlHttp.open("GET",encodeURI("chat_recv_ajax.php"),true); oxmlHttp.send(null); } function get_chat_msg_result() { if(oxmlHttp.readyState==4 || oxmlHttp.readyState=="complete") { if (document.getElementById("DIV_CHAT") != null) { document.getElementById("DIV_CHAT").innerHTML = oxmlHttp.responseText; oxmlHttp = null; } var scrollDiv = document.getElementById("DIV_CHAT"); scrollDiv.scrollTop = scrollDiv.scrollHeight; } } function set_chat_msg() { if(typeof XMLHttpRequest != "undefined") { oxmlHttpSend = new XMLHttpRequest(); } else if (window.ActiveXObject) { oxmlHttpSend = new ActiveXObject("Microsoft.XMLHttp"); } if(oxmlHttpSend == null) { alert("浏览器不支持XML Http Request！"); return; } var url = "chat_send_ajax.php"; var strname="noname"; var strmsg=""; if (document.getElementById("txtname") != null) { strname = document.getElementById("txtname").value; document.getElementById("txtname").readOnly=true; } if (document.getElementById("txtmsg") != null) { strmsg = document.getElementById("txtmsg").value; document.getElementById("txtmsg").value = ""; } url += "?name=" + strname + "&msg=" + strmsg; oxmlHttpSend.open("GET",encodeURI(url),true); oxmlHttpSend.send(null); } function clickBtn(e) { if(window.event.keyCode==13) { var id=e.id; switch(id) { case "txtmsg": document.getElementById("Submit2").click(); window.event.returnValue=false; break; } } } function fRandomBy(under, over){ switch(arguments.length){ case 1: return parseInt(Math.random()*under+1); case 2: return parseInt(Math.random()*(over-under+1) + under); default: return 0; } } function SetTxtName(){ var i=fRandomBy(10); if(i==0)document.getElementById('txtname').value='无敌战神'; if(i==1)document.getElementById('txtname').value='令狐冲'; if(i==2)document.getElementById('txtname').value='西门吹雪'; if(i==3)document.getElementById('txtname').value='超级玛丽'; if(i==4)document.getElementById('txtname').value='奥巴马'; if(i==5)document.getElementById('txtname').value='恐怖分子'; if(i==6)document.getElementById('txtname').value='聊斋奇女子'; if(i==7)document.getElementById('txtname').value='天朝?潘?; if(i==8)document.getElementById('txtname').value='中500万了'; if(i==9)document.getElementById('txtname').value='神级奇葩'; if(i==10)document.getElementById('txtname').value='爱你不是两三天'; } </script> </head> <body> <div> <table> <tr> <td colspan="2"> 聊天窗口--全球最大QQ聊天交友网站</td> </tr> <tr> <td colspan="2"> <table> <tr> <td> 名字:</td> <td><input type="text" maxlength="15" value="匿名" /></td> </tr> </table> </td> </tr> <tr> <td valign="middle" colspan="2"> <div> </div> </td> </tr> <tr> <td> <input type="text" onkeydown="return clickBtn(this)"/></td> <td> <input type="button" value="发送"/></td> </tr> <tr> <td colspan="1"> </td> <td colspan="1"> </td> </tr> </table> </div> </body> </html>