| |
<HTML>
<HEAD>
<TITLE>Chat</TITLE>
<style type="text/css">
<!--
.on { visibility: on;}
.off { visibility: hidden;}
-->
</style>
<SCRIPT language="Javascript">
var init=true;
var notLoadingChat=true;
function formatText(textstr){
//แปลง < ให้เป็น <
return textstr.replace(/</g," ");
}
function getChat(){
//ใช้ HTTPRequest เพื่อไปดึง Chat ล่าสุด
if (notLoadingChat){
notLoadingChat=false;
objAsp= new ActiveXObject("MICROSOFT.XMLHTTP");
postXML= new ActiveXObject("MICROSOFT.XMLDOM");
postXML.async=false;
objAsp.onreadystatechange=checkIfLoaded;
//ส่งข้อมูลกรณีเป็นการ chat ข้อความแรก
var postXMLStr="<chat><firsttime>" +init +"</firsttime></chat>";
postXML.loadXML(postXMLStr);
init=false;
objAsp.open("POST", "getChat.asp", true); //
ส่งไป
objAsp.send(postXMLStr);
}
}
function updateChat(){
//ใช้ HTTP Request เพื่อไป Update ข้อมูล XML ที่อยู่บน Server
colourSelected="000000";
//ถ้าไม่มีข้อมูล ก็ไม่ต้องส่ง
if (textmsg.value!=""){
// วน loop ตรวจสอบว่า เลือก สีอะไรไป
var textmessage=formatText(textmsg.value);
for (var j=0;j<5;j++){
if (colourSelect[j].checked){
if (colourSelect[j].value=="other"){
colourSelected=userColourCode.value;
}else{
colourSelected=colourSelect[j].value;
}
}
}
objAsp2= new ActiveXObject("MICROSOFT.XMLHTTP");
postXML= new ActiveXObject("MICROSOFT.XMLDOM");
postXML.async=false;
postXMLStr="<line><text>" +textmessage +"</text><from>"
+username.value +"</from><style>" +style.value
+"</style><colour>" +colourSelected +"</colour></line>";
postXML.loadXML(postXMLStr);
Address="updateChat.asp";
objAsp2.open("POST", Address, true); // ส่งข้อมูลไป update
โดยส่งให้ file updateChat.asp
objAsp2.send(postXML);
textmsg.value="";
}
}
function checkIfLoaded(){
//ใช้ HTTP Request ไปดึงข้อมูลมาแสดงผล โดยตรวจสอบด้วยว่า ข้อมูล
XML มีข้อผิดพลาดหรือไม่
if (objAsp.readystate==4){
notLoadingChat=true;
if (objAsp.responseXML.xml!=""){
var newChatXML=objAsp.responseXML;
var lineXML=newChatXML.documentElement.selectNodes("line");
for (var i=0;i<lineXML.length;i++){ // วน loop แสดงผล
lineNodes=lineXML(i);
chatText=lineNodes.selectSingleNode("text");
chatFrom=lineNodes.selectSingleNode("from");
chatStyle=lineNodes.selectSingleNode("style");
chatColour=lineNodes.selectSingleNode("colour");
ChatArea.innerHTML=ChatArea.innerHTML +"<FONT color="
+chatColour.text +"><B>" +chatFrom.text +"</B>
" +chatStyle.text +" " +chatText.text +"</FONT><BR/><BR/>";
ChatArea.scrollIntoView(false);
}
}
}
}
</SCRIPT>
<SCRIPT for="window" event="onLoad">
// ตั้งเวลาให้ไป ดึงข้อมูล ทุกๆ 2 วินาที
window.setInterval(getChat,2000);
</SCRIPT>
</HEAD>
<BODY bgcolor="#009999">
<xml id="chatXML" src="getChat.asp?last=0"></xml>
<div align="center"><font face="Georgia,
Times New Roman, Times, serif"><b>CHAT WITH XML ::
THAIXML.COM</b></font><br>
</div>
<table width="90%" border="0" align="center"
cellspacing="0" cellpadding="1" bgcolor="#000000">
<tr>
<td>
<table bgcolor="#CCCC99" width="100%" cellspacing="5">
<tr>
<td width="11%">Name</td>
<td width="89%">
<input id="username" type="textbox" value="guest"
name="textbox"/>
</td>
</tr>
<tr>
<td width="11%">Speech style</td>
<td width="89%">
<input id="style" type="textbox" value="says"
name="textbox2"/>
</td>
</tr>
<tr>
<td width="11%">Message</td>
<td width="89%">
<textarea id ="textmsg" cols="60" rows="3"
STYLE="overflow:hidden" name="textbox2"></textarea>
</td>
</tr>
<tr>
<td width="11%">
<input type="button" value="submit" onClick="updateChat()"/
id=button1 name=button1>
</td>
<td valign="center" width="89%" bgcolor="#FFFFCC">
<input name="colourSelect" type="radio" value="000000"
onClick="userColour.className='off'" checked>Black
<input name="colourSelect" type="radio" value="000099"
onClick="userColour.className='off'"><font color="#000099">Blue</font>
<input name="colourSelect" type="radio" value="CC0000"
onClick="userColour.className='off'"><font color="#CC0000">Red</font>
<input name="colourSelect" type="radio" value="009900"
onClick="userColour.className='off'"><font color="#009900">Green</font>
<input name="colourSelect" type="radio" value="other"
onClick="userColour.className='on'">other
<SPAN ID="userColour" class="off">- Colour
Code:#<input id="userColourCode" type="textbox"/></SPAN>
</td>
</tr>
</table>
</td>
</tr>
</table>
<DIV align="center">
<DIV align="left" STYLE="overflow-y:scroll;width=90%;height=50%;background-color=#FFFFD0;">
<DIV id="ChatArea"></DIV>
</DIV>
</DIV>
</BODY>
</HTML>
|
|
