Question

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

问题：

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

我使用JQuery和JSON作为此answer的结果。

Answer 1

将html版本视为基础。先建立这个。

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

Answer 2

您需要Unobtrusive Javascript，这是Progressive Enhancement的一部分。

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

例如，您有一个邮件列表，其中包含应显示邮件正文的所有HTML链接：

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

如果没有JavaScript，这将向加载由1标识的邮件的servlet发出HTTP请求，将请求转发到JSP，该JSP隐藏视图中的邮件列表并在视图中显示邮件。 / p>

使用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>行。

Answer 3

你非常明智地尝试Progressive Enhancement。这里有一篇很好的文章A List Apart: Understanding Progressive Enhancement我必须赞扬这个SO答案; Graceful Degredation when to consider。我认为Graceful Degredation是支持不同浏览器功能的问题的更负面的方式; What is the difference between Progressive Enhancement and Graceful Degradation?

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

3 个答案: