如何构建优雅的退化AJAX网页？

Question

我想用“优雅的退化”构建网页。也就是说，网页函数甚至JavaScript被禁用。现在，我必须就Ajax响应格式做出设计决定。

如果禁用JavaScript，则每个HTTP请求对服务器的每个请求将生成HTML作为响应。浏览器用返回的HTML刷新。没关系。

如果启用了JavaScript，则为服务器的每个AJAX HTTP请求将生成...嗯，JSON或HTML。

如果是HTML，则易于实现。只需将JavaScript用返回的HTML替换页面的一部分即可。而且，在服务器端，不需要太多代码更改。

如果是JSON，那么我必须再次在JavaScript中实现JSON-TO-HTML逻辑，这几乎是服务器端逻辑的重复。 重复是邪恶的. 。我真的不喜欢它。好处是，带宽的用法比HTML更好，这会带来更好的性能。

那么，最好的优雅退化解决方案是什么？ AJAX请求更好地返回JSON或HTML？

Answer 1

我认为没有一个“最好的解决方案” 任何 给定情况。也许只是针对特定的解决方案。这确实取决于您要做什么。优雅的退化对我意味着什么：

• 构建一个“足够好”的界面，可在尽可能多的浏览器（桌面和移动设备）上使用。
• 毫不客气地添加一些脚本（验证方法，界面元素，例如标签和滑块或其他），仅当页面已加载的浏览器具有使它们工作所需的功能时，才会存在。

无论是在服务器响应中使用HTML还是JSON是高度主观的，我经常发现自己在它们之间努力选择。一个人可能会争辩，例如，从服务器接收一堆键值对并将它们渲染到现有的选择元素中意味着 更多代码 因此，花费更多的时间来编码和更多的潜在错误。相反，您可以简单地从服务器请求预先构建的选择元素，然后将其注入容器中。构建该元素的逻辑已经存在于服务器上，为什么要用两种不同的语言构建两次。

另一个观点是，JSON最大程度地减少了带宽的用法，因此值得一提的是，解析一些JSON以在客户端建立一些标记。由于几个原因，我发现很容易不同意这种观点（我是 不是 概括，不要误会我的意思）。首先，许多Webervers配置为压缩/开发/GZIP输出，许多浏览器接受压缩内容。标记是 极其 可压缩，因为它包含冗余的船只（<strong></strong>）。因此，可以合理地认为，JSON响应的大小不会比标记的响应要小。其次，大型数据集可能意味着客户端上的执行时间很大（讨厌的，嵌套的循环很常见 - 在此处弹出的某些问题中很明显）。

我对您的建议是试图了解每种方法的优势和弊端，并利用这些信息。您可能想阅读此信息：

http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html

Answer 2

IMO，与HTML一起工作会带来更大的安全风险（MITM脚本注入等）。在添加之前，任何时间都应保存“重复”。

JSON可以安全地解析，并且通常更紧凑，如您所说，节省带宽。

我知道我会选择哪个（JSON）。

Answer 3

首先，仔细考虑您是否真的需要支持JavaScript启用和非支持用户。对于我的钱，关于Ajax的伟大之处是它将显示（HTML的构造）与信息分开。

也就是说，这是一种可能起作用的方法：

1. 编写一个服务器端程序，该程序可以执行您的页面需要执行的操作，并以最简单的形式返回答案（任何包含的内容）。对于简单的输出（例如仅指示它是否有效），这可能只是一个数字或简单的字符串。对于任何比单个结果更复杂的事情，它可能是XML。

2. 编写一个服务器端脚本，该脚本简单地调用您的程序并将结果输出为纯文本或XML。

3. 编写另一个服务器端脚本，该脚本调用您的程序并从中构建HTML页面。

4. 在用户调用以运行例程的页面中，包括写入控件（例如A按钮）的JavaScripts，按下时，该控件将发送AJAX请求以调用第一个脚本，然后解析结果并相应地更新页面。还将另一个控件包含在NoScript标签中，以使启用JS的用户看不到它，该标准表格提交以运行您的第二个脚本。因此，您仍然需要两个脚本，但是计算的主要肉只完成了一次。