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

我有一个网站（基于JSP/Servlets，使用MVC模式），我想支持基于AJAX的网站和基于HTML的基本网站。网站访问者应该能够将浏览模式从Ajax更改为基本HTML，反之亦然 - 正如Google邮件中所述。如何轻松地在基于ajax的网站和基本的HTML网站之间切换？

的问题：

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

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

来源

2010-04-08 Abdullah

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

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

例如，你有邮件与所有HTML链接的列表应该显示邮件正文：

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

没有JavaScript，这将触发一个HTTP请求，它加载由1识别的邮件中的servlet ，将请求转发给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>行。

来源

2010-04-08 14:48:19 BalusC

...然后让用户选择基本的HTML版本，有一个cookie设置，只是不提供执行Ajax的JS（或任何依赖它的任何东西）。 – Quentin 2010-04-08 14:49:55

[渐进式增强]（http://en.wikipedia.org/wiki/Progressive_enhancement）是另一个术语，用于说明您想要实现的目标...首先不使用ajax构建基础，然后在其上添加额外的功能以增强其功能用户体验。 – ChrisR 2010-04-08 14:58:01

你是对的，我相应地更新了答案。 – BalusC 2010-04-08 15:06:25

认为html版本是基础。先建立这个。

然后在其上覆盖额外的ajax功能作为可选层，根据需要拦截默认的html行为。不需要两个视图，只需一个视图即可根据可用技术和/或用户偏好逐渐添加增强的功能。

来源

2010-04-08 14:23:38 graphicdivine

你很明智地尝试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?

来源

2010-04-08 14:58:49

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

回答

相关问题