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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
