DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> AJAX初級聊天室代碼
AJAX初級聊天室代碼
編輯：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="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>


全部程序打包下載: 點擊下載
AJAX基礎知識
ajax session過期問題的幾個解決方案
如處理不當會影響用戶體驗，也有可能產生莫名的問題。 結合自己的思考和網上相關內容的參考，給出如下解決
Ajax中通過JS代碼自動獲取表單元素值的示例代碼
我們在使用Ajax的時候，通常需要獲取表單元素值，然後發送給後台的服務器端程序處理。如果表單元素不多
java網絡編程－Ajax+servlet實例
    Ajax異步請求,servlet產生隨機數據,Html頁面無刷

相關文章

AJAX基礎知識AJAX詳解
小編推薦
$.ajax()方法進行網頁間傳值示例 ajax post方式表單提交setRequestHeader報錯解決方法 ajax技術制作得在線歌詞搜索功能 Ajax學習筆記---3種Ajax的實現方法【推薦】 Ajax 無刷新在注冊用戶名時的應用的代碼 淺談Ajax請求與浏覽器緩存 如何創建ajax對象並兼容多個浏覽器 用ajax實現讀博客rss示例代碼 防止ajax重復請求的方法(GET和POST) DWR 簡化 Ajax 的 portlet 間通信
熱門推薦
Ajax緩存問題的解決方法匯總 PHP匹配連續的數字或字母的正則表達式 AJAX XMLHttpRequest對象詳解 ajax 調用後台方法大家可以討論下 Ajax技術組成與核心原理分析 Ajax 生成流文件下載(實現代碼) Ajax學習筆記整理 錯誤分析和AJAX(XMLHttpRequest) ajax提交加載進度條示例代碼
大家都在看
Ajax程序開發中常見問題 DOM基礎教程之事件對象 javascript cookie用法基礎教程(概念,設置,讀取及刪除) 將HTML5 Canvas的內容保存為圖片借助toDataURL實現 JavaScript運行機制之事件循環(Event Loop)詳解 讀jQuery之六 緩存數據功能介紹 網站基於flash實現的Banner圖切換效果代碼 JS 打印界面的CSS居中代碼適用所有浏覽器
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved