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

EN

您需要非突发性JavaScript，它是渐进增强的一部分。

首先，开始创建一个完全功能的 web应用程序，而不需要任何JavaScript。一旦你让它开始工作，然后开始写JavaScript代码，它“接管”原始的HTML工作，而不改变HTML/CSS的任何行。在服务器端代码中，需要添加识别请求是否由JavaScript触发的逻辑，并相应地返回响应。您可以在web浏览器中通过en/禁用JavaScript来测试这两种情况。在火狐中，使用工具栏很容易。

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

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

如果没有JavaScript，这将向servlet发送一个HTTP请求，servlet加载由1标识的邮件，将请求转发给一个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或request参数)中传递一些信息，这会迫使服务器禁用发出<script>行。

将HTML版本作为基础。先建这个。

然后将附加的Ajax功能作为可选层覆盖在此之上，在必要时拦截默认的HTML行为。不需要两个视图，只需要一个视图就可以根据可用的技术和/或用户偏好逐步添加增强的功能。