AJAX初级聊天室代码_AJAX相关教程-查字典教程网
AJAX初级聊天室代码
AJAX初级聊天室代码
发布时间:2017-01-07 来源:查字典编辑
摘要:很早就想发出来了,一直以来都没什么时间,今天偷个空先把代码发上面,明天来写注释.还是那句话,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>Chating Beta_0.3.23</div>

<div id="outs"><div id="outmain"><div id="chatmain"></div></div></div>

<div>昵称:

<input name="named" type="text" />

<span id="inputput" onmouseover="overInput(this)" onmouseout="outInput(this)"><input name="inputs" type="text" title="提交对话

快捷键:Enter或Ctrl + Enter

清除

快捷键:Ctrl + Delete" /><input type="button" onmouseover="lrover(this)" value=" " onmouseout="lrout(this)" title="向前一条对话记录

快捷键:↑" /><input onmouseover="lrover(this)" type="button" value=" " onmouseout="lrout(this)" title="向后一条对话记录

快捷键:↓" />

<input id="btn" type="image" src="images/rest.gif" onmouseover="overBtn(this)" onmouseout="outBtn(this)" 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相关学习
    编程开发子分类