AJAX初级聊天室代码
很早就想发出来了,一直以来都没什么时间,今天偷个空先把代码发上面,明天来写注释.还是那句话,AJAX是一种应用,而不是一个专门的技术,我认为做做DEMO要的是速度,要让看的人好理解,而JS是最基本的WEB语言,相信比起其他的语言来说,要明了很多,所以我还是选择用JS写前后台代码.但并不代表我不会其他的语言,程序关键还是在于自我对实现的想法,而用什么语言,好比选择工具一样,我用菜刀可以做,用瑞士军刀也可以做,关键是要看在什么场合.再就AJAX实际上首要考虑的是人性化,人机交互的便利才是他的优势,否则我还是劝你使用FLASH的AS来的更快.记住这个词--认知潜意识.千万不要让用户感觉到操作的不适应,你也一定要想在用户的前面,也许这就是程序不智能的位置.如果你喜欢的话可以继续开发这个东西,更希望你能够注明一下转载出处,我会觉得非常地高兴,并写出更多更好的东西.首页HTML代码:请保存为index.html
程序代码
Chating Beta_0.3.23昵称：
CSS文件:请保存为 images/chatstyle.css
程序代码
body{ margin: 0px; padding: 0px; font-size: 9pt; background-image: url(JD112.jpg); background-position: center center;}#outmain{ height: 400px; font-size: 9pt; overflow-y: scroll; overflow-x: hidden; SCROLLBAR-ARROW-COLOR:#FF9900; SCROLLBAR-FACE-COLOR:#FFF9E1; SCROLLBAR-DARKSHADOW-COLOR:#FF9900; SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF; SCROLLBAR-3DLIGHT-COLOR:#FF9900; SCROLLBAR-SHADOW-COLOR:#FFFFFF; SCROLLBAR-TRACK-COLOR:#FFF9E1;}#chatmain{}#outs{ width: 540px; margin-right: auto; margin-left: auto; padding: 10px; margin-top: 10px; margin-bottom: 10px; background-color: #FFF9E1; border: 1px solid #AAA; clear: both;}.in{ text-align: center;}.names{ border: 1px solid #AAA; background-color: #FFF9E1; width: 80px; height: 19px; line-height: 19px;}#loadifo { position:absolute; top:100px; z-index:1; right: 10px; line-height: 21px;}.header{ height: 60px; background-color: #000; text-align: center; color: #FFF; font-weight: bold; line-height: 60px; font-family: Tahoma; font-size: 12pt; float: left; width: 100%; margin-bottom: 20px; filter: Alpha(Opacity=50); opacity: 0.5;}/*效果*/.btn{ border: 1px solid #AAA; position: absolute; margin-top: 2px;}.inputs{ font-size: 9pt; background-image: url(input.png); background-repeat: no-repeat; width: 295px; line-height: 21px; height: 21px; margin: 0px; padding: 0px; border: 1px solid #AAA;}.left,.right{ background-repeat: no-repeat; background-position: center center; cursor:pointer; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; background-color: #FFF; height: 23px; width: 23px;}.left{ background-image: url(l1.gif);}.right{ background-image: url(r1.gif);}JS主文件: 请保存为 images/chat.js
程序代码
var nowNum = "m"function getId(objId){ return document.getElementById(objId)}function getName(objName){ return document.getElementsByName(objName)[0]}var xmldocfunction createxmldoc(){ if(window.XMLHttpRequest){ xmldoc = new XMLHttpRequest(); if(xmldoc.overrideMimeType){ xmldoc.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ try{ xmldoc = new ActiveXObject("Msxml4.XMLHTTP"); }catch(e){ try{ xmldoc = new ActiveXObject("Msxml3.XMLHTTP"); }catch(e){ try{ xmldoc = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmldoc = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } } } if(!xmldoc){ return false; }}function createQueryString(names){ var conts = getName(names).value if(conts != ""){ if(conts == "clear"){ getId("chatmain").innerHTML = "" clean() focs() return false }else{ return conts } }else{ return false }}function doUsingGet(){ xmldoc = false createxmldoc() var url = "chat.asp?clien="+nowNum+"&timeStamp="+new Date().getTime(); xmldoc.open("GET",url,true); xmldoc.onreadystatechange = CheckState; xmldoc.setRequestHeader("Content-Type","text/xml;charset=GB2312;"); xmldoc.send(null);}function doUsingPost(){ createxmldoc() if(createQueryString("inputs")){ if(createQueryString("named")){ var named = "&named="+createQueryString("named") }else{ var named = "" } if(createQueryString("inputs") == "cls"){ nowNum = "m" } var url = "chat.asp?clien="+nowNum+"&cont="+createQueryString("inputs")+named+"&timeStamp="+new Date().getTime(); xmldoc.open("GET",url,true); xmldoc.onreadystatechange = CheckState; xmldoc.setRequestHeader("Content-Type","text/xml;charset=GB2312;"); xmldoc.send(null); getId("errors").innerHTML = "" addChat(createQueryString("inputs")); clean() focs() }else{ getId("loadifo").innerHTML = "请输入对话内容！" focs() }}function CheckState(){ if(xmldoc.readyState == 1){ //getId("loadifo").innerHTML = "连接服务器" } else if(xmldoc.readyState == 2){ //getId("loadifo").innerHTML = "开始加载数据" } else if(xmldoc.readyState == 3){ //getId("loadifo").innerHTML = "正在加载数据" } else if(xmldoc.readyState == 4){ if(xmldoc.status == 200){ results() } else{ getId("loadifo").innerHTML = "错误"+xmldoc.status; focs() } }}function results(){ resXml()}function resXml(){ var res = xmldoc.responseXML.documentElement; var resLen = res.getElementsByTagName("items").length if(getTag(res,0,"num") != nowNum){ //alert(xmldoc.responseXML.xml) nowNum = getTag(res,0,"num") for(var i=0; i" } innerSize() }}function getTag(response,i,objTagName){ try{ var nodeV = response.getElementsByTagName(objTagName)[i].firstChild.nodeValue; }catch(e){ var nodeV = "" } return nodeV;}var oversfunction innerSize(){ if(overs != 1){ if(getId("chatmain").offsetHeight < getId("outmain").offsetHeight){ getId("chatmain").style.marginTop = getId("outmain").offsetHeight - getId("chatmain").offsetHeight +"px"; }else{ getId("chatmain").scrollIntoView(false) } }}window.onload = function(){ getId("outs").onmousedown = function(){ overs = 1 } getId("outs").onmouseout = function(){ overs = 0 focs() } getName("inputs").onkeydown = function(e){ if(document.all){ var Keys = event.keyCode; }else{ var Keys = e.which; } //alert(Keys) if(Keys == "38"){ preChat() }else if(Keys == "40"){ nextChat() }else if(event.ctrlKey && Keys == "13"){ doUsingPost() }else if(event.ctrlKey && Keys == "46"){ clean() } }}setInterval("doUsingGet()",1000)JS辅助文件:请保存为 images/display.js
程序代码
function overInput(a){ getId("btn").style.border = "1px solid #54ce43" getId("inputs").style.border = "1px solid #54ce43" focs()}function outInput(a){ getId("btn").style.border = "1px solid #AAA" getId("inputs").style.border = "1px solid #AAA" focs()}function overBtn(a){ a.src = "images/hover.gif"}function outBtn(a){ a.src = "images/rest.gif"}function lrover(a){ a.style.backgroundColor = "#EEE"}function lrout(a){ a.style.backgroundColor = "#FFF" }function focs(){ getName("inputs").focus();}function clean(){ getName("inputs").value = ""}var chats = new Array()var chatStartfunction addChat(strChat){ if(chats.length > 199){ chats.shift() } chats.push(strChat) chatStart = chats.length}function preChat(){ if(chatStart && chatStart >= 1){ if(chatStart == 1){ getName("inputs").value = chats[0] chatStart = 0.5 }else{ chatStart -= 1 getName("inputs").value = chats[chatStart] } } getId("loadifo").innerHTML = chatStart+","+chats.length}function nextChat(){ if(chatStart && chatStart < chats.length && chats.length > 1){ if(chatStart == 0.5){ chatStart = 1 }else if(chatStart == chats.length - 1){ chatStart = chats.length - 1 }else{ chatStart += 1 } getName("inputs").value = chats[chatStart] } getId("loadifo").innerHTML = chatStart+","+chats.length}主ASP程序文件:请保存为chat.asp
程序代码
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%><% Session.CodePage = 936 Response.ContentType = "application/xml" Response.Expires = 0%><%function repla(str){ str = str.replace(/\&/g, "&"); str = str.replace(/\>/g, ">"); str = str.replace(/\= 21){ Application("counts") = 1 } var Cnum = Application("counts") var Msgs = repla(Server.HTMLEncode(Request("cont"))) Application("ips" + Cnum) = useIp +"" Application("msgs" + Cnum) = Msgs +"" if(Request("named").Count != 0){ var names = Request("named") }else{ var names = "" } Application("names" + Cnum) = names +"" Application.UnLock()}if(Request("cont") == "cls"){ Application.Contents.RemoveAll()}%> <%=Application("counts")%> <% if(Request("clien") == "m"){ %> <%=useIp%> <% }else if(Request("clien") < Application("counts")){ for(var i=Request("clien"); i <%=Request("clien")%> <%=s%> <%=Application("counts")%> <%=useName%> <%=useMsg%> <%=useIp%> <% } }else if(Request("clien") > Application("counts")){ for(var i=Request("clien"); i<21; i++){ var useName = Application("names" + i) var useMsg = Application("msgs" + i) var useIp = Application("ips" + i) %> <%=useName%> <%=useMsg%> <%=useIp%> <% } for(var m=1; m<=Application("counts"); m++){ var useNameM = Application("names" + m) var useMsgM = Application("msgs" + m) var useIpM = Application("ips" + m) %> <%=useNameM%> <%=useMsgM%> <%=useIpM%> <% } }else if(Request("clien") == Application("counts")){ } %>全部程序打包下载: 点击下载