用记事本编写ajax,用记事本轻松制作ajax+xml在线聊天室

欢迎来到vincent的多人聊天室

a:link{

color:#FFF;

text-decoration:none;

}

a:hover{

color:yellow;

text-decoration:underline;

}

font{

font-size:12px;

}

body{

background-color:black;

font-size:12px;

font-family:verdana;

color:#FFF;

text-align:left;

overflow:scroll;

margin:0px;

}

#title{

font-size:20px;

font-family:verdana;

}

sub{

font-size:12px;

}

#showChats{

width:730px;

height:400px;

font-size:12px;

line-height:150%;

padding:30 0 0 20px;

word-wrap:break-word;

border-top:15px solid #FFF;

border-left:1px solid #FFF;

border-right:1px solid #FFF;

border-bottom:1px solid #FFF;

text-align:left;

}

form{

border:1px solid #FFF;

width:730px;

height:30px;

padding:5 0 5 3px;

text-align:left;

font-weight:bold;

}

#but{

width:80px;

border:1px solid #FFF;

padding:2 0 0 0px;

}

#bottom{

border:1px solid #FFF;

width:730px;

height:32px;

text-align:center;

padding:5 4 0 4px;

}

#colorBox{

float:left;

width:30px;

height:20px;

border:0;

cursor:pointer; }

#showStatus{

width:700px;

text-align:right;

font-size:12px;

height:20px;

position:relative;

top:0px;

border:0px;

padding-right:20px;

}

#showMessage{

width:700px;

text-align:right;

font-size:12px;

height:20px;

position:relative;

top:0px;

border:0px;

padding-right:20px;

}

#userList{

border:1px solid #FFF;

width:110px;

height:180px;

padding:0px;

position:absolute;

}

style="cursor:move;padding:3 0 0

0px;color:black;background-color:#FFF;height:20px;">当前在线用户列表

Welcome To The

ChatRoom!_{-----Design By Vincent @}

2007

scrollamount="1">欢迎来到vincent的留言板!我的邮箱:yuanchentao2005@163.com

  QQ:282159887  个人主页:

href="www.iyxf.cn/vincent"

target="_blank">www.iyxf.cn/vincent

用户:

--选择表情--

呵呵

郁闷

大哭

大笑

笑着

撒娇

哭泣着

说:

/>

οnclick="createColorTable()" />

chat.js

var

oForm=document.getElementsByTagName_r("form")[0];

var

fColor=""; //全局，用于保存字体颜色;

var xmlHttp;

var struserName=""; //全局用于保存当前用户名

function createXMLHttp(){

if(window.ActiveXObject)

xmlHttp=new

ActiveXObject("Microsoft.XMLHTTP");

else if(window.XMLHttpRequest)

xmlHttp=new

XMLHttprequest();

}

createXMLHttp(); //创建xmlHtttRequest对象

function callServer(strPost){ //往文件当中写入记录

xmlHttp.open("post","chat.asp?"+strPost,true);

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState!=4){

showStatus.innerText="正在发送，请稍候...";

}

else if(xmlHttp.readyState==4){

if(xmlHttp.status==200)

showStatus.innerText="";

ReadAllContents();

}

}

xmlHttp.Send(null);

}

function

callUserCount(strPost){ //统计当前用户个数

xmlHttp.open("get","userCount.asp?userName="+strPost,true);

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

showUsers.innerHTML=xmlHttp.responseText;

}

}

}

xmlHttp.Send(null);

}

function

calldeleteUser(){ //用户退出后自动删除

xmlHttp.open("get","deleteUser.asp?userName="+struserName,true);

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

showUsers.innerHTML=xmlHttp.responseText;

}

}

}

xmlHttp.Send(null);

}

function

callAllUsers(){ //登陆后记录用户;

xmlHttp.open("get","getAll.asp",true);

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

showUsers.innerHTML=xmlHttp.responseText; //显示用户列表;

setTimeout("callAllUsers()",3000);

}

}

}

xmlHttp.Send(null);

}

function

ReadAllContents(){ //

xmlHttp.open("get","getAllContents.asp",true);

xmlHttp.setRequestHeader("Charset","GB2312");

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200)

showChats.innerHTML=xmlHttp.responseText;

setTimeout("ReadAllContents()",3000);

}

}

xmlHttp.Send(null);

}

function

userLogin(){

struserName=prompt("您的昵称?","");

if(struserName==null||struserName=="")

struserName="游客"+Math.floor(Math.random()*1000);

oForm.elements[0].value=struserName;

showChats.innerHTML+="[系统消息:] 欢迎

color=\"yellow\"> "+struserName+" 的到来!
";

callUserCount(struserName);

}

function

createColorTable(){

var oDiv=document.getElementByIdx("bottom");

var strColor1=["33","66","99","FF","CC","DD"];

var strColor2=new Array(3);

var strColor="#";

oDiv.innerHTML="";

for(var j=0;j<24;j++){

for(var i=0;i<3;i++){

strColor2[i]=strColor1[Math.floor(Math.random()*6)];

strColor+=strColor2[i];

}

oDiv.innerHTML+="

οnclick=\"setColor(this.style.backgroundColor)\" id=\"colorBox\"

style=\"background-color:"+strColor+"\">";

strColor="#";

}

}

function setColor(tempColor){

oForm.elements[2].style.color=tempColor;

fColor=tempColor;

}

document.οnkeydοwn=sendMessage;

function

sendMessage(){

if(event.keyCode==13)

sendYes();

}

oForm.elements[3].οnclick=sendYes;

function sendYes(){

var strPost="";

var

userName=escape(oForm.elements[0].value.replace("",">").replace(/\\/g,"\\").replace(/\//g,"\\\/").replace(/\'/g,"\'").replace(/\"/g,"\""));

var userBQ=escape(oForm.elements[1].value);

var

strContent=escape(oForm.elements[2].value.replace("",">").replace(/\\/g,"\\").replace(/\//g,"\\\/").replace(/\'/g,"\'").replace(/\"/g,"\""));

var strColor=escape(fColor);

strPost="userName="+userName+"&userBQ="+userBQ+"&strContent="+strContent+"&strColor="+strColor;

callServer(strPost);

oForm.elements[2].value="";

oForm.elements[2].focus();

}

oForm.elements[4].οnclick=function(){

oForm.elements[2].value="";

oForm.elements[2].focus();

}

window.οnlοad=function(){

userLogin();

createColorTable();

callAllUsers();

ReadAllContents();

}

window.οnunlοad=function(){

calldeleteUser(); //可以在这个地方消除用户

}

function

Drag(DragElement){

var x=parseInt(DragElement.style.left);

var y=parseInt(DragElement.style.top);

var deltaX=event.clientX-x;

var deltaY=event.clientY-y;

var drag=true;

DragElement.οnmοusemοve=function(){

if(drag){

DragElement.style.left=(event.clientX-deltaX)+"px";

DragElement.style.top=(event.clientY-deltaY)+"px";

DragElement.setCapture();

}

}

DragElement.οnmοuseup=function(){

drag=false;

DragElement.releaseCapture();

}

}

chat.asp

language="JAVASCRIPT" %>

Response.Charset="GB2312"; Response.Expires =

0; Response.CacheControl = "no-cache";

var userName="";

var userBQ="";

var strcontent="";

var strColor="";

var

userName=Request.QueryString("userName"); //用户名

var

userBQ=Request.QueryString("userBQ"); //表情

var strContent=Request.QueryString("strContent"); //内容

var

strColor=Request.QueryString("strColor"); //字体颜色

var now=(new

Date()).toLocaleString(); //当前时间

var xmlDom=Server.CreateObject("MSXML2.DOMDocument");

xmlDom.async=false;

xmlDom.load(Server.Mappath("userChat.xml"));

var rootNode=xmlDom.documentElement;

var user=xmlDom.createElement("user");

var user_name=xmlDom.createElement("name");

var user_time=xmlDom.createElement("time");

var user_BQ=xmlDom.createElement("BQ");

var user_content=xmlDom.createElement("content");

var color=xmlDom.createNode("Attribute","color","");

color.text=strColor;

user_content.setAttributeNode(color);

user_name.text=userName;

user_time.text=now;

user_BQ.text=userBQ;

user_content.text=strContent;

user.appendChild(user_name);

user.appendChild(user_time);

user.appendChild(user_BQ);

user.appendChild(user_content);

if(rootNode.firstChild==null)

rootNode.appendChild(user);

else

rootNode.insertBefore(user,rootNode.firstChild);

xmlDom.save(Server.Mappath("userChat.xml"));

%>

getAllContents.asp

language="JAVASCRIPT" %>

Response.Charset="UTF-8"; Response.Expires =

0; Response.CacheControl = "no-cache";

var userName="";

var time="";

var userBQ="";

var strColor="";

var strcontent="";

var xmlDom=Server.CreateObject("MSXML2.DOMDocument");

xmlDom.async=false;

xmlDom.load(Server.Mappath("userChat.xml"));

var rootNode=xmlDom.documentElement;

var

currentRecord=rootNode.childNodes.length>14?14:rootNode.childNodes.length;

if(rootNode.firstChild!=null){

for(var i=currentRecord-1;i>=0;i--){

userName=unescape(rootNode.childNodes[i].childNodes[0].text);

//name

time=unescape(rootNode.childNodes[i].childNodes[1].text);

//time

userBQ=unescape(rootNode.childNodes[i].childNodes[2].text);

//BQ

strColor=unescape(rootNode.childNodes[i].childNodes[3].getAttribute("color"));

//color

strcontent=unescape(rootNode.childNodes[i].childNodes[3].text);

//content

Response.write("["+userName+"] "+time+" "+userBQ+"说:

color=\""+strColor+"\">"+strcontent+"
");

}

}

else{

Response.write("当前没有聊内容!
");

}

%>

userChat.xml

version="1.0" encoding="GB2312"?>