当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > AJAX初级聊天室代码

AJAX技术
自己动手封装的 ajax
Ajax 对象 包含post和get两种异步传输方式
Ajax 超时检查脚本
AJAX 简介及入门实例
ajax 开发守则 10条说明
Ajax 返回字符串的过滤实现代码
Ajax 程序开发中常见问题
AJAX 验证框架13个
ajax 入门基础之 XMLHttpRequest对象总结
基于AJAX的分页类实现代码
如何在Asp.net中使用HtmlArea编辑器
使用 jQuery 简化 Ajax 开发
ASP.NET 与 Ajax 的实现方式
AJAX技术介绍
Ajax程序设计入门
学习Ajax教程，详细了解Get与Post
关于Ajax responseText 的一点阐述
ajax中文乱码解决方法
AJAX中文问题总结
AJAX无刷新更新数据

No. « 7 8 9 10 »

技术文章搜索

关键字

AJAX技术 中的 AJAX初级聊天室代码

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-13   浏览: 45 ::
收藏到网摘: n/a

很早就想发出来了,一直以来都没什么时间,今天偷个空先把代码发上面,明天来写注释.
还是那句话,AJAX是一种应用,而不是一个专门的技术,我认为做做DEMO要的是速度,要让看的人好理解,而JS是最基本的WEB语言,相信比起其他的语言来说,要明了很多,所以我还是选择用JS写前后台代码.但并不代表我不会其他的语言,程序关键还是在于自我对实现的想法,而用什么语言,好比选择工具一样,我用菜刀可以做,用瑞士军刀也可以做,关键是要看在什么场合.
再就AJAX实际上首要考虑的是人性化,人机交互的便利才是他的优势,否则我还是劝你使用FLASH的AS来的更快.
记住这个词--认知潜意识.千万不要让用户感觉到操作的不适应,你也一定要想在用户的前面,也许这就是程序不智能的位置.
如果你喜欢的话可以继续开发这个东西,更希望你能够注明一下转载出处,我会觉得非常地高兴,并写出更多更好的东西.
首页HTML代码:请保存为index.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=gb2312" />
<title>Chating Beta_0.3.23</title>
<link href="images/chatstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="images/chat.js"></script>
<script type="text/javascript" src="images/display.js"></script>
</head>
<body>
<div id="loadifo"></div>
<div class="header">Chating Beta_0.3.23</div>
<div id="outs"><div id="outmain"><div id="chatmain"></div></div></div>
<div class="in">昵称：
<input class="names" name="named" type="text" />
<span id="inputput" class="inputput" onmouseover="overInput(this)" onmouseout="outInput(this)"><input class="inputs" name="inputs" type="text" title="提交对话
快捷键:Enter或Ctrl + Enter
清除
快捷键:Ctrl + Delete" /><input class="left" type="button" onmouseover="lrover(this)" value=" " onmouseout="lrout(this)" onclick="preChat();" title="向前一条对话记录
快捷键:↑" /><input class="right" onmouseover="lrover(this)" type="button" value=" " onmouseout="lrout(this)" onclick="nextChat();" title="向后一条对话记录
快捷键:↓" />
<input id="btn" class="btn" type="image" src="images/rest.gif" onmouseover="overBtn(this)" onmouseout="outBtn(this)" onclick="doUsingPost();" title="提交对话
快捷键:Enter或Ctrl + Enter" />
</span>
<span id="errors"></span>
</div>
</body>
</html>

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 xmldoc
function 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<resLen; i++){
var useName = getTag(res,i,"name")
var useMag = getTag(res,i,"conts")
var useIp = getTag(res,i,"ip")
if(nowNum != "0" && useMag != ""){
if(useName != ""){
var lis = "用户"+ useName + "说：" + useMag + " ["+ useIp + "]"
}else{
var lis = "用户 ["+ useIp + "] 说：" + useMag
}
}else{
var lis = "用户 ["+ useIp + "] 进入聊天室！"
}
//var newp = document.createElement("p")
//newp.innerHTML = lis
//getId("chatmain").appendChild(newp)
getId("chatmain").innerHTML += lis + "<br />"
}
innerSize()
}
}
function getTag(response,i,objTagName){
try{
var nodeV = response.getElementsByTagName(objTagName)[i].firstChild.nodeValue;
}catch(e){
var nodeV = ""
}
return nodeV;
}
var overs
function 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 chatStart
function 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(/\</g, "<");
str = str.replace(/\"/g, """);
str = str.replace(/\'/g, "'");
return str;
}
var useIp = Request.ServerVariables("REMOTE_ADDR")
if(!Application("counts")){
Application("counts") = 0
}
if(Request("cont").Count != 0){
Application.Lock()
if(Application("counts") < 21){
Application("counts") += 1
}else if(Application("counts") >= 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()
}
%><?xml version="1.0" encoding="gb2312" ?>
<ppl>
<num><%=Application("counts")%></num>
<%
if(Request("clien") == "m"){
%>
<items>
<ip><%=useIp%></ip>
</items>
<%
}else if(Request("clien") < Application("counts")){
for(var i=Request("clien"); i<Application("counts"); i++){
s = Number(i)+1
var useName = Application("names" + s)
var useMsg = Application("msgs" + s)
var useIp = Application("ips" + s)
%>
<items>
<aaa><%=Request("clien")%> <%=s%></aaa>
<bbb><%=Application("counts")%></bbb>
<name><%=useName%></name>
<conts><%=useMsg%></conts>
<ip><%=useIp%></ip>
</items>
<%
}
}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)
%>
<items>
<name><%=useName%></name>
<conts><%=useMsg%></conts>
<ip><%=useIp%></ip>
</items>
<%
}
for(var m=1; m<=Application("counts"); m++){
var useNameM = Application("names" + m)
var useMsgM = Application("msgs" + m)
var useIpM = Application("ips" + m)
%>
<items>
<name><%=useNameM%></name>
<conts><%=useMsgM%></conts>
<ip><%=useIpM%></ip>
</items>
<%
}
}else if(Request("clien") == Application("counts")){
}
%>
</ppl>

全部程序打包下载: 点击下载