AJAX Support in Struts 2.0

New Features in Struts 2.0 for AJAX

One of the useful enhancements in Struts 2.0 is the introduction of AJAX Theme

The Ajax theme extends the xhtml theme with AJAX features. The theme uses the popular DOJO AJAX/JavaScript toolkit. The new AJAX features include:

• AJAX Client Side Validation
• Remote form submission support (works with the submit tag as well)
• An advanced div template that provides dynamic reloading of partial HTML
• An advanced a template that provides the ability to load and evaluate JavaScript remotely
• An AJAX-only tabbed Panel implementation
• A rich pub-sub event model
• Interactive auto complete tag

The framework provides a set of tags to help you ajaxify your applications, on Dojo.

To use the Ajax tags you need to set the "theme" attribute to "Ajax".Use the head tag to configure the page for the Ajax theme.

URL

The "href" attribute must contain a url built with the URL tag
Example:

	
	
	  Initial Content
	

Set the "debug" attribute of the head tag to "true" to display debug information on the bottom of the page

Indicators

Use indicators to notify the user that a request is in progress. The indicator should be hidden when the page is loaded.
This indicator is an image:

Dynamic Div

The div tag is a content area that can load its content asynchronously. The div tag can be forced to reload its content using topics. To define the topics that will trigger the refresh of the panel, use the "listenTopics" attribute. This tag will load its content when the page is loaded, unless "autoStart" is set to "false".
While Dojo supports crossdomain XHR using IFrames, the S2 Ajax tags do not (yet)

This div will refresh every time the topics "/refresh0" or "/refresh1" are published:

	dojo.event.topic.publish("/refresh”);

Retrieve Remote Data

The simplest way to use the div tag is to provide an href attribute. For example

What this does after the HTML page is completely loaded; the specified URL will be retrieved asynchronously in the browser. The entire contents returned by that URL will be injected in to the div and will update every minute after a two second delay:
Include the attribute errorText in case the URL is not loaded

	errorText="Unable to contact weather server"

Submit

The submit tag can be used to update the content of its "targets" attribute with text returned from the asynchronous request. "targets" is a comma-delimited list of element ids. The "targets" attribute is optional.

Regular submit button that will update the content of div1:

	
Div 1
	
	

For using Submit button using an image add the attribute src

	src="${pageContext.request.contextPath}/images/struts-rocks.gif"

If the submit button is used inside a form (href is not required on this case), the form will be submitted asynchronously using

A submit button can be used to submit a form, even if it is outside the form, using "formId", "formFilter" and "href". Note that in this case "href" is required.

Anchor

The anchor tag, like the submit tag; can be used to update the content of its "targets" attribute with text returned from the asynchronous request. "Targets" is a comma-delimited list of element ids. The "targets" attribute is optional.

This anchor will update the content of div1 and div2 with text returned form "/AjaxTest.action"

	
Div 1
	
Div 2
	
	Update divs

If the anchor tag is used inside a form (href is not required on this case), the form will be submitted asynchronously:

	
	  
	  Submit form		
	

	
	  	
	
	
	
	Submit form

AJAX Client Side Validation

• Ajax Validation requires DWR servlet being setup, Dojo and the Ajax theme being used.
• In the Ajax theme, DWR is used for normal validation while Dojo handles everything else (widgets, XHR, browser JS events etc.)
• In order for validation to function properly it is advised to use standard Struts Tags

Setup DWR

DWR could be setup by having the following dwr configuration (dwr.xml) at /WEB-INF/ directory. If it needs to be in other places.

	
	
	
		
			
				
			
			
		
	
		
			);
			]]>
		
	

A DWRServlet need to be registered with the web application as well. The following shows a typical web.xml with DWRSerlvet.

	
		   dwr
		   uk.ltd.getahead.dwr.DWRServlet
		   
			   debug
			   true
		   
	   
	
	
		
		faces
		javax.faces.webapp.FacesServlet
		1
		
	
		
		
		   faces
		   *.action
		
	
	   
		   dwr
		   /dwr/*
	   

Add a form attribute

Add the attribute validate to the . The validate="true" option is set for the tag to enable onblur-triggered validation

Now as usual have a form bean for this form with getters and setters and constructors, and configure the validation.xml for required fields

	
			
				You must enter a name
			
		
		
			
				13
				19
				Only people ages 13 to 19 may take this quiz
		
	

Conclusion

This is a simple introduction to Ajax.Start implementing it and you will find it simple, easy and attractive. One can use it to do many different things. It all accounts your creativity. It is a good approach in many cases, but will not be appropriate in others. If reaching the maximum possible audience is your goal, you would want to stay away from this. If a user disabling scripting in their browser might be a concern (and your site wouldn’t be any good without it), this probably isn’t a good answer either. There are other reasons to stay away from it in some situations, but the bottom line is treat it like any other tool in your toolbox: it will be right for some jobs, maybe "not so" for others.