188 Part II: Applied Ajax^
var url = "http://ajaxref.com/ch3/setrating.php";
var options = { method: "POST",
outputTarget : "responseOutput",
serializeForm : form
};AjaxTCR.comm.sendRequest(url,options);/* kill form submission */
return false;
}window.onload = function ()
{
document.ratingForm.onsubmit = function () { return rate(this); };
};</script>
</head>
<body>
<h3>How do you feel about Ajax?</h3>
<form action="#" name="ratingForm" method="post" >
<em>Hate It - </em> [
<input type="radio" name="rating" value="1" /> 1
<input type="radio" name="rating" value="2" /> 2
<input type="radio" name="rating" value="3" /> 3
<input type="radio" name="rating" value="4" /> 4
<input type="radio" name="rating" value="5" /> 5
] <em> - Love It</em><br /><br />
<label>Comments:<br />
<textarea id="comment" name="comment" rows="5" cols="40"></textarea></label><br />
<input type="submit" value="vote" />
</form>
<br />
<div id="responseOutput"> </div>
</body>
</html>These conveniences will work similarly for more complicated forms and different data
types as well.Advanced outputTarget Features
The outputTarget implicitly replaces the content of the DOM element specified with
whatever is returned by the XHR request. However, this functionality can be modified
through the inclusion of the insertionType option in a request. For example, if the value
is set to insertBefore, the content will be inserted before the node that is specified by
outputTarget. A value insertAfter puts the response after the specified target.
Understand this means as a sibling in the DOM tree. If the new content should be placed
within the target just at the front or back, use firstChild and lastChild, respectively.
If there is any confusion to how this all works, see the example http://ajaxref.com/ch5/
outputtarget.html and use a DOM inspector to watch what happens with each value returned.