首頁 > 開發者 > Ajax

AJAX初級聊天室代碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

很早就想發出來了,一直以來都沒什麼時間,今天偷個空先把代碼發上面,明天來寫注釋.

還是那句話,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>

全部程式打包下載: 點擊下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More