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>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.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>


Reply With Quote



Bookmarks