How to switch easily between ajax-based website and basic HTML website?

Question

Hi, I have a website ( based on JSP/Servlets ,using MVC pattern), and I want to support AJAX-based website and basic HTML-based website. website visitors should be able to change the surfing mode from Ajax to basic HTML and vise versa, - as it applies in Google-mail.

The Questions :

• What is the best way to achieve this goal easily?
• Should I design two views for each page?

I use JQuery and JSON as the result of this answer.

Answer 1

Think of the html version as the foundation. Build this first.

Then overlay the additional ajax functionality as an optional layer on top of this, intercepting the default html behaviours as necessary. No need for two views, just a single view that gradually adds enhanced funtionality depnding on available technology and/or user preference.

Answer 2

You need Unobtrusive Javascript, which is part of Progressive Enhancement.

First, start creating a fully functional webapplication without any line of Javascript. Once you got it to work, then start writing Javascript code which "takes over" the raw HTML work without changing any line of HTML/CSS. In the server side code you need to add logic which recognizes whether the request has been fired by JavaScript or not and return response accordingly. You can test both cases by en/disabling JavaScript in the webbrowser. In Firefox it's easy with Web Developer Toolbar.

For example, you have a list of mails with all HTML links which should show the mail body:

<a href="mail/show/1" class="show">Message title</a>

Without JavaScript, this would fire a HTTP request to the servlet which loads the mail identified by 1, forwards the request to a JSP which hides the message list in the view and shows the mail in the view.

With JavaScript/jQuery, you need to write code which does exactly the same with help of Ajax, e.g.:

$('a.show').click(function() {
    $.getJSON(this.href, callbackFunctionWhichHidesListAndShowsMail);
    return false;
});

In the server side you have to distinguish between normal requests and ajax requests so that you can return response accordingly.

boolean ajax = "XMLHttpRequest".equals(request.getHeader("x-requested-with"));

// ...

if (ajax) {
    writeJson(response, mail);
} else {
    request.setAttribute("mail", mail);
    request.getRequestDispatcher("/WEB-INF/mail.jsp").forward(request, response);
}

Finally, to give the user an option to switch between the modes manually, you have to set a cookie or preferably (since cookies are disableable) pass some information in URL (pathinfo or request parameter) which forces the server to disable emitting the <script> lines.

Answer 3

You are quite sensibly attempting Progressive Enhancement. There is an excellent article here A List Apart: Understanding Progressive Enhancement which I must give credit to this SO Answer for; Graceful Degredation when to consider. I consider Graceful Degredation to be the more negative way of looking at the problem of supporting different browser capabilities; What is the difference between Progressive Enhancement and Graceful Degradation?