AJAX初级聊天室代码 - 站长资源库


答案：很早就想发出来了,一直以来都没什么时间,今天偷个空先把代码发上面,明天来写注释.

还是那句话,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=><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"));
        cl
上一个：AJAX根据城市名，自动完成相应的城市信息
下一个：AJAX入门之深入理解JavaScript中的函数
更多图片编程知识: