如何在基于ajax的网站和基本的HTML网站之间轻松切换？

Question

我有一个网站(基于JSP/Servlets,使用MVC模式),我想支持基于AJAX的网站和基于HTML的基本网站.网站访问者应该能够将冲浪模式从Ajax更改为基本HTML,反之亦然,因为它适用于Google邮件.

问题:

• 轻松实现这一目标的最佳方法是什么？
• 我应该为每个页面设计两个视图吗？

我使用JQuery和JSON作为这个答案的结果.

Answer 1

可以将html版本视为基础.先建立这个.

然后将附加的ajax功能作为可选层叠加在此之上,根据需要拦截默认的html行为.不需要两个视图,只需要根据可用技术和/或用户偏好逐渐添加增强功能的单个视图.

Answer 2

您需要Unobtrusive Javascript,它是Progressive Enhancement的一部分.

首先,开始创建一个功能齐全的 Web应用程序,不需要任何Javascript.一旦你开始工作,然后开始编写Javascript代码,"接管"原始HTML工作,而不更改任何HTML/CSS行.在服务器端代码中,您需要添加逻辑,以识别请求是否已被JavaScript触发并相应地返回响应.您可以通过在webbrowser中启用/禁用JavaScript来测试这两种情况.在Firefox中,使用Web Developer Toolbar很容易.

例如,您有一个包含所有HTML链接的邮件列表,这些邮件应显示邮件正文:

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

如果没有JavaScript,这将向servlet发出HTTP请求,该请求加载标识的邮件1,将请求转发给JSP,该JSP隐藏视图中的消息列表并在视图中显示邮件.

使用JavaScript/jQuery,您需要编写在Ajax的帮助下完全相同的代码,例如:

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

在服务器端,您必须区分正常请求和ajax请求,以便您可以相应地返回响应.

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);
}

最后,要为用户提供手动切换模式的选项,您必须设置cookie或最好(因为cookie是可禁用的)传递URL(pathinfo或请求参数)中的某些信息,这会强制服务器禁用发送<script>线路.