Chapter 2: Pre-Ajax JavaScript Communications Techniques 57
PART I
selection.onmouseover = function (){};
selection.onclick = function (){};
}
document.getElementById("ratingList").onmouseout = function (){};
ratingWidget._sendRating(current); }
} /* ratingWidget */function handleResponse(rating,total,average)
{
var target = document.getElementById("ratingResult");
target.innerHTML = "Thank you for voting. You rated this a <strong>" +
rating + "</strong>. There are <strong>" + total + "</strong> total votes. The
average is <strong>" + average + "</strong>. You can see the ratings in the <a
href='http://ajaxref.com/ch2/ratings.txt' target='_blank'>ratings file</a>.";
}
window.onload = function() { ratingWidget.init(); };</script>
</head>
<body>
<div id="ratingWidget">
<form action="http://ajaxref.com/ch2/setrating.php" method="get" id="ratingForm"
name="ratingForm"><div id="ratingQuestion">
<h3>How do you feel about JavaScript?</h3>
</div>
<div id="ratingScale">
<em>Hate It - </em>
<span id="ratingList">
<img src="star_off.gif" id="ratingChoice1">
<img src="star_off.gif" id="ratingChoice2">
<img src="star_off.gif" id="ratingChoice3">
<img src="star_off.gif" id="ratingChoice4">
<img src="star_off.gif" id="ratingChoice5">
</span>
<em> - Love It</em>
</div>
</form>
<div id="ratingResult"> </div>
</div>
</body>
</html>The preceding example isn’t anything terribly complicated, but it is more than a trivial
bit of code. What you will likely find as you do more and more JavaScript is that interface
will often significantly outweigh the communications aspect of both Ajax and pre-Ajax
applications alike. Given this, some readers might deduce that Ajax is just DHTML reborn
with better communications. There is more than a bit of a truth in such a thought. Given the
code bloat that is unavoidable with improved look and feel, you will have to abstract user