I've built a shoutbox as my first AJAX project. I have two pages. For simplicity's sake of this post we'll say the shoutbox will only display the two most recent messages.
First Page (serverprint.asp):
Asp page that outputs the following string into the body:
10/17/2009 10:07:18 AM'Chuckycharms'please by the freak of nature work'10/16/2009 11:32:16 PM'Chuckycharms'try it now'
Second Page (default2.asp):
Javascript/AJAX code that displays and updates messages every 1000ms.
HTML Code:
<table>
<tr>
<td bgcolor="#666666"><div id="gamer1"><? echo $gamer_1; ?></div>:<div id="message1"><? echo $message_1; ?></div>--<div id="time1"><? echo $time_1; ?></div></td>
</tr>
<tr>
<td bgcolor="#999999"><div id="gamer2"><? echo $gamer_2; ?></div>:<div id="message2"><? echo $message_2; ?></div>--<div id="time2"><? echo $time_2; ?></div></td>
</tr>
</table>
Code:
<script type="text/javascript">
var getv=-1;
var page="http://www.xxx.com/shoutbox/serverprint.asp";
function getData(){
while(getv!=-1){}
if (window.XMLHttpRequest) {
getv= new XMLHttpRequest();
if (getv.overrideMimeType){
getv.overrideMimeType("text/xml");
}
}else if (window.ActiveXObject) {
try {
getv = new ActiveXObject("Msxml2.xmlHttp");
getv.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}catch (e) {
try {
getv= new ActiveXObject("Microsoft.xmlHttp");
}catch (e) {}
}
}
ret=-1;
getv.onreadystatechange = function(){
if (getv.readyState == 4) {
ret=getv.responseText;
update(ret);
getv=-1;
}
};
getv.open("POST", page);
try{
getv.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}catch(e){}
getv.send("");
return ret;
return 0;
setTimeout("getData()",1000);
}
function update(value){
var data=value.split("'");
document.getElementById("gamer1").innerHTML=data[0];
document.getElementById("message1").innerHTML=data[1];
document.getElementById("time1").innerHTML=data[2];
document.getElementById("gamer2").innerHTML=data[3];
document.getElementById("message2").innerHTML=data[4];
document.getElementById("time2").innerHTML=data[5];
}
window.onload = getData;
</script>
Page 2 initially loads the information correctly but does not attempt to update it every second. I am a beginner at AJAX so don't over-estimate my abilities and assume I am ignorant.