Better user experience

[romsok]

I am trying to optimize a page in the following way:

The page is written using Java/JSP and the spring framework.
It includes:

<div id="formDiv">
   <form>
   </form>
</div>

<div id="reportDiv">
</div>

When a user selects values from the form and submits it, the whole page is refreshed and a report shows up in the reportDiv.

The problem with this is, that when the data to populate the report is large, the page refresh takes a long time, and in some browsers I am seeing a blank white page for a long time until the report is refreshed.

I would like to avoid that - in other words, while the report section is refreshing, the form section should stay in place.

Two ways I was thinking of implementing this are:
1. have the report section display in an <iframe> pointing to a different JSP.
2. Use Ajax - here I am on uncertain ground because, I do not know Ajax well and am not sure it is the right technology for the task at hand.

Could someone please tell me if I am on the right track, or if I should research elsewhere?

Thanks.

[svidgen]

Option 1 will be supported by almost every browser, whereas Option 2 can leave up to 5&#37; of your visitors lacking in functionality. The iframe will also allow the report to be more easily printed independently from the rest of the page. ADDENDUM: This option is very quick and easy to develop if you're not concerned with dynamically resizing the iframe to fit its content.

Option 2 would be recommended by most web developers, but mostly because they are both elitist and think that iframes are taboo. (why? ... good question.) The two big, true advantages here are the ability to send a smaller JSON message as opposed to an entire HTML doc and freedom from having to deal with iframe weirdness--like having to dynamically adjust its height and width to avoid scrollbars.

So, if you're not afraid of development taboos, you're free to take your pick.

[slaughters]

That page refresh blink in IE is a real pain.

A cheap and easy way to stop it (in IE) is to place these two meta tags between your head tags

    <meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
    <meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />

This will cause you page to only change after the body finishes loading. No blink - just a smooth blend

Of course the page will just be sitting there looking like it is doing nothing to the user as it waits for the new page, so you may want to pop up a "Please Wait" message as part of the submit process.

[EDIT]
The iframe approach is a neat idea if you have multiple reports going on in multiple iframes, as it will look like they are all processing asynch.

Ajax can also be a neat solution - but is only really needed when you have to get info/values back to your main page and perform page actions based on them. Seeing how you are just displaying reports it's probably not worth the effort to re-write your code, but next time you may want to look into using Ajax from the start
[/EDIT]