AJAX - The Complete Reference

(avery) #1

218 Part II: Applied Ajax^


</head>
<body>
<h3>How do you feel about Ajax?</h3>
<form action="#" name="ratingForm" id="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="button" value="vote" id="requestButton" />
</form>
<br />
<div id="responseOutput"> </div>
</body>
</html>

There’s nothing tremendously new here, but there are some different ideas not seen in
other Ajax libraries explored so far. First, the Updater mechanism supports the concept of
an insertion object that indicates how the contents returned by the request should be
inserted into the page. This is similar to the insertionType idea found in the AjaxTCR
library. By default, the contents will overwrite the contents of the updated target element
but you could indicate to insert the values above the content (Insertion.Top) or after the
content (Insertion.Bottom). You also may insert the content as the next element from the
one specified (Insertion.After) and the element previous to the target element
(Insertion.Before). The small fragment here shows how to use these values.

function sendRequest(position)
{
var options = { method: "get" };
switch (position) {
case "before" : options.insertion = Insertion.Before;
break;
case "after" : options.insertion = Insertion.After;
break;
case "top" : options.insertion = Insertion.Top;
break;
case "bottom" : options.insertion = Insertion.Bottom;
break;
}
new Ajax.Updater("responseOutput", "http://ajaxref.com/ch5/sayhello.php", options);
}

A working demonstration can be found at http://ajaxref.com/ch5/prototypeinsertion.html.
Prototype also supports the idea of a periodical update. This is an Ajax request that is sent
multiple times in a polling style fashion and updates a target region. To avoid excessive
polling, it is possible to set an option of frequency in seconds. By default, Prototype currently
Free download pdf