« Oil-drilling protesters bring dessert 
Please don’t sue me. »

XMLHttpRequest

Filed under: Uncategorized — 2005-04-27 @ 12:08:26

If your not familiar with it XMLHttpRequest it's some really powerful stuff.
Basically, XMLHttpRequest allows you to retrieve data from the remote server via javascript, this is an extremely powerful feature because we can change parts of a document without reloading the entire document.
for a really cool example of this, check out this ADC Example.

After reading that code, i was pretty confident i had the basics down so I set about creating an example, you know me, i'm not really one to trifle with "Hello World!" examples, so this one uses PHP+MySQL and interfaces with my Music & Video system to display the currently playing Song/Movie/TV Show.

Since there are many implementations of xmlhttprequest and many ways to get an XMLHttpRequest object, we start with this code, 99% of the code is of course needed for MS browser compatiblity.

var xmlhttp=false;
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

ok, so now we have an XMLHttpRequest object to work with, let's do something with it.

function dodiv() {
 xmlhttp.open("GET", "test.php",true);
 xmlhttp.onreadystatechange=function() {
 div = document.getElementById("details");
  if (xmlhttp.readyState==4) {
	div.innerHTML=xmlhttp.responseText;
  }
 }
 xmlhttp.send(null)
 timerID  = setTimeout("dodiv()", 100);
}

so now, every time dodiv() is called, it's going to write the result of fetching test.php to the div called details (can't you tell i ripped this from the Apple code :-)
also note, dodiv sets itself to be called again in 100ms, that's 10x every second, and yes, this can be done easily, even over slow links since the

now, we just need to trigger this onload

function onLoad() {
   timerID  = setTimeout("dodiv()", 100);
}


<body onload="onLoad();">

and you can see it in action on this example site. which does in fact display live data.

add a dash of CSS

.nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

.nav-menu li
{
float: left;
margin: 0 0.15em;
padding: 0;
text-align: center
}

.nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 20em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Commented backslash hack hides rule from IE5-Mac \*/
.nav-menu li a
{
float: none
}
/* End IE5-Mac hack */

.nav-menu
{
width:45em
}

and things start looking up
this is a highly simple exercise, but it's a proof of concept, i would like to take this and re-write the UI for Globecom Jukebox and make a nice XHTML 1.0-compliant UI… if anyone wants to help with the project, drop me an email.

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

(required)

(required)