Matt Raible has been building web applications for most of his adult life. He started tinkering with the web before Netscape 1.0 was even released. For the last 16 years, Matt has helped companies adopt open source technologies (Spring, Hibernate, Apache, Struts, Tapestry, Grails) and use them effectively. Matt has been a speaker at many conferences worldwide, including Devoxx, Jfokus, ÜberConf, No Fluff Just Stuff, and a host of others.

Matt is a DZone MVB and is not an employee of DZone and has posted 143 posts at DZone. You can read more from them at their website. View Full User Profile

Ajaxified Body

  • submit to reddit
I've often wondered if it was possible to use Ajax to reload the main content of a web application without reloading the header, menu and footer. SiteMesh allows you to move these common elements to a decorator that gets wrapped around each page. Below is a diagram of how SiteMesh works.


You can read the Introduction to SiteMesh article if you're interested in learning more about SiteMesh's basic features. By default, SiteMesh decorates text/html responses and ignores any other content type (e.g. image/gif). It also contains an <excludes> configuration element that allows you to turn off decoration when a URL matches a certain pattern. For example, the following allows you to disable decoration when "ajax=true" is passed in the URL.


To optimize the loading of an application so the common elements aren't loaded for each page, it should be possible to create an Ajaxified Body where the primary content area (PCA) of the site is loaded via Ajax rather than refreshing the whole page. The header, footer and navigation bar often stays the same from page-to-page, so it doesn't seem to make a whole lot of sense to load them each time the page loads. The image below shows the PCA (of an AppFuse Light application) as a grey square with a red border.

Ajaxified Body - AppFuse Light

Published at DZone with permission of Matt Raible, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


Fernando Ortigosa replied on Mon, 2008/10/06 - 5:17am

Hmmm. I guess AjaxAnywhere should be enough. I myself like that library, but found many things I didn't like about it, so I made a different library using the same concept, someday I'll publish it on some forge and hope anybody uses it :). Have fun.

Andrew Crawford replied on Tue, 2008/10/07 - 9:44pm

Personally, I've found writing my own custom component enough for my needs. It's a little bit of Javascript to do a call to the server, and the server then returns a tag (to place the response) and the HTML fragment itself. HTML is then populated in the tag on the page using the .innerHTML methods.

It's simple enough to do and works well when what you really want to do most of the time is just change small fragments around on the page from a user request.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.