CSCI 6962:
Server-side Design and Programming
AJAX Tools
in JSF and ASP
AJAX in JSF
• JavaScript automatically generated for AJAX calls
• Editable components can be “AJAX enabled”
– Changes to component value directly change liked bean
member variables without page submit
– Equivalent to using request.send to send parameters
• Other components can be “re-rendered” with current
bean values without page refresh
– Equivalent to using request.responseText and JavaScript to
change value
The <f:ajax Tag
• Placed inside component tag to AJAX enable:
<h:component…>
<f:ajax event=“component event”
execute=“scope of ajax”
render=“component list”/>
</h:component>
<f:ajax Synatax
• Causes server-side AJAX call when occurs in browser
• Anything that has an onEvent in JavaScript
–
–
–
–
–
–
click: mouse clicked on component
focus: mouse enters component
blur: mouse clicked outside component
keydown: key pressed in text component
keyup: key released in text component
…
<f:ajax Render
• Defines which components update their
corresponding member variables via AJAX
–
–
–
–
@this: Just this component (default)
@form: All components on same form (good for buttons)
@all: All components on page
@none
• Defines which components have their client-side
value updated from bean
– AJAX-enabled get called for linked member variable
– Can be space-separated list of component ids
Simple Example
• Output field echoes greeting for name in input field when
used clicks away
Simple Example
• Output field echoes greeting for name in input field when
used clicks away
• Input field AJAX enabled
• Fires on blur event (when focus outside textfield)
– Changes name property of bean
• Output field linked as render property
– Gets greeting property of bean
Button Events
• Use @form scope to include all components
• Can use default click event
Validation
• AJAX renders <h:message tag for error message
– Can be list of tags to validate multiple fields
• Can still define action for button
– Redirected to that page if no errors
– No redirection if any field invalid
Timer Events
• No built-in timers in JSF (yet)
• Must manually create JavaScript timer as before
– “run” function called every second
Timer Events
• Hack: JavaScript function causes event on some JSF
AJAX-enabled object
– Refer to it using the id of the component and the form it
is on
– Call its default event (click for buttons)
Timer Events
– Can make “invisible” by setting display style to “none
– Give component and form id so JavaScript can access
– Hidden component can render non-hidden fields
AJAX in ASP
• Done with controls in ASP
– AJAX Extensions toolbox
• ScriptManager: Generates client-side scripts
– Before other AJAX controls, one per page
– Asynchronous server access
• UpdatePanel: Area on screen for AJAX controls
– Events inside panel use AJAX instead of postback
AJAX in ASP
• Example: Asynchronous “greeting” label
– Controls inside UpdatePanel
AJAX in ASP
• Code behind called without causing postback
• JavaScript functions automatically included
Validation and AJAX
• Put control and its validator inside UpdatePanel
– Validation done client-side
• Must use Response.Redirect to transfer to next page
– Since code being run on client, Server.Transfer will not work
Timer Events in ASP
• Timer: causes postbacks at regular intervals
– Interval property: Number of ms between postbacks
– Put inside UpdatePanel for asynchronous postbacks
Timer Events in AJAX
• _Tick event called in code behind