Using JavaScript and Ajax - Stripes...and Java Web Development is Fun Again - page 326

Look at the source for the JSP, and then we'll discuss how it all works:

Download ajax/web/WEB-INF/jsp/hello.jsp
<s:layout-render name="/WEB-INF/jsp/common/layout_main.jsp"
title="Simple AJAX example">
<s:layout-component name="head">
<script type="text/javascript">

Ê

function sendMoney(control) { //
var form = control.form;
new Ajax.Request(form.action,
{ method: 'post',
parameters: form.serialize(),
onSuccess: receiveResponse

}
);

}
// xhr is the XMLHttpRequest, which is a core AJAX object

Ë

function receiveResponse(xhr) { //
var result = eval(xhr.responseText);
$('iGiveYou').update(result);

}
</script>
</s:layout-component>
<s:layout-component name="body">
<p> Let me double your money! </p>
<p>
<s:form beanclass="stripesbook.action.HelloAjaxActionBean">
You give me $

Ì

<s:text name="youGiveMe" onkeyup="sendMoney(this);"/>
<s:submit name="doubleMoney"/>
</s:form>
</p>
<p>

Í

I give you $ <span id="iGiveYou"></span> back!
</p>
</s:layout-component>
</s:layout-render>

We start with a regular Stripes form and text field. At Ì , the field's
onkeyup= event calls the sendMoney ( ) JavaScript function defined at Ê .
Since the text field is passed as a parameter, it's easy to retrieve the
corresponding form. Then, with Prototype's Ajax.Request , we issue an
Ajax request to the form's action, passing the form's inputs as param-
eters and the name of the JavaScript function that will be called when
the server responds to the request. That function is receiveResponse ( Ë ),
which is passed the data that the server sent as a response. That data is
wrapped with a call to eval ( ) to obtain the result as a JavaScript object.
Finally, the <span> with id="iGiveYou" ( Í ) is updated with the value of
the result.