AJAX Junior chat room code

Source: Internet
Author: User

I have been trying to send it for a long time. I have never had any time. Today I am stealing a blank space. I will first post the code and write comments tomorrow.

In other words, AJAX is an application, rather than a specialized technology. I think it is a speed for people who want to make a DEMO, JS is the most basic WEB language. I believe it is much clearer than other languages, so I chose to use JS to write the front and back-end code. but it does not mean that I will not use other languages. The key to the program is the idea of self-implementation. What language can I use, like a tool? I can use a kitchen knife or a Swiss Army knife, the key is to see where it is.

In addition, the main consideration of AJAX is humanization, and the convenience of human-computer interaction is his advantage. Otherwise, I suggest you use FLASH AS to make it faster.

Remember this word-cognitive subconscious. Do not make users feel uncomfortable with operations. You must also think ahead of the user. Maybe this is the location where the program is not intelligent.
If you like, you can continue to develop this item. I hope you can indicate the source of the repost. I will feel very happy and write more and better things.

Homepage HTML code: Save it as index.html Code <! 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 class = "in"> nickname:
<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 =" Submit a dialog
Shortcut: Enter or Ctrl + Enter
Clear
Shortcut Key: Ctrl + Delete "/> <input class =" left "type =" button "onmouseover =" lrover (this) "value =" "onmouseout =" lrout (this) "onclick =" preChat (); "title =" previous dialog record
Shortcut: keys "/> <input class =" right "onmouseover =" lrover (this) "type =" button "value =" "onmouseout =" lrout (this) "onclick =" nextChat (); "title =" Record of the next Dialog
Shortcut: shortcut "/>
<Input id = "btn" class = "btn" type = "image" src = "images/rest.gif" onmouseover = "overBtn (this)" onmouseout = "outBtn (this) "onclick =" doUsingPost (); "title =" Submit a dialog
Shortcut: Enter or Ctrl + Enter "/>
</Span>
<Span id = "errors"> </span>
</Div>
</Body>
</Html>

CSS file: Save As images/chatstyle.css code body {
Margin: 0px;
Padding: 0px;
Font-size: 9pt;
Background-image: url(JD112.jpg );
Background-position: 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;
}
/* Effect */
. 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;
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 );
}

Main JS file: Save As images/chat. js Code 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 = "Enter the dialog content! "
Focs ()
}
}
Function CheckState (){
If (xmldoc. readyState = 1 ){
// GetId ("loadifo"). innerHTML = "connect to server"
}
Else if (xmldoc. readyState = 2 ){
// GetId ("loadifo"). innerHTML = "start to load data"
}
Else if (xmldoc. readyState = 3 ){
// GetId ("loadifo"). innerHTML = "loading data"
}
Else if (xmldoc. readyState = 4 ){
If (xmldoc. status = 200 ){
Results ()
}
Else {
GetId ("loadifo"). innerHTML = "error" + xmldoc. status;
Focs ()
}
}
}
Function results (){
ResXml ()
}
Function resXml (){
Var res = xmldoc.responseXML.doc umentElement;
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 = "user" + useName + "said:" + useMag + "[" + useIp + "]"
} Else {
Var lis = "User [" + useIp + "]:" + useMag
}
} Else {
Var lis = "User [" + useIp + "] enter the chat room! "
}
// 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 auxiliary file: Save it as images/display. js code function overInput (){
GetId ("btn"). style. border = "1px solid #54ce43"
GetId ("inputs"). style. border = "1px solid #54ce43"
Focs ()
}
Function outInput (){
GetId ("btn"). style. border = "1px solid # AAA"
GetId ("inputs"). style. border = "1px solid # AAA"
Focs ()
}
Function overBtn (){
A. src = "images/hover.gif"
}
Function outBtn (){
A. src = "images/rest.gif"
}
Function lrover (){
A. style. backgroundColor = "# EEE"
}
Function lrout (){
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
}

Main ASP program file: Save As chat. asp program code <% @ 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>

Package all programs for download: Click to download

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.