这种 JSON/AJAXless 设计模式叫什么？答案

【问题标题】：What is this JSON/AJAXless design pattern called?这种 JSON/AJAXless 设计模式叫什么？
【发布时间】：2011-08-31 15:02:08
【问题描述】：

我见过一些网站加载包含页眉、页脚等的 index.html 页面，然后使用单个 AJAX 请求加载所有数据，并使用 Javascript 对其进行格式化并将其显示在列表中。

例如。如果搜索引擎这样做，JSON 将如下所示：

searchresults: [
    {website: aaa.com, blurb: "This is from aaa.com", title: "AAA"},
    {website: bbb.com, blurb: "This is from bbb.com", title: "BBB"},
    {website: ccc.com, blurb: "This is from ccc.com", title: "CCC"},
    ... 100 more rows...
]

它会被 javascript 格式化成一个页面，看起来像显示前 20 个结果的 Google 结果页面。好处是单击“page2”等可以使用javascript显示下一页，而无需向服务器发出另一个AJAX请求或以正常方式加载新页面。弹出窗口/扩展信息可以以相同的方式显示，而无需向服务器发出额外的 ajax 请求。

关键是它只需要在页面加载时执行一个 AJAX 查询来加载所有数据，然后所有处理都由浏览器中的javascript完成。不需要多个 AJAX 请求或对服务器的常规请求。这种设计模式有名字吗？或者支持这个的javascript框架，这样我就不需要自己用javascript编写整个东西了？

【问题讨论】：

标签： javascript ajax design-patterns web-frameworks

【解决方案1】：

这可能被称为坏主意。

如果您推动整个数据库（或者无论如何大量数据），这可能不是一个好主意。推送额外的数据只会使请求需要更长的时间来加载，因为服务器需要更长的时间来处理它，并且因为有更多的数据要传输 - 最后，用户可能甚至不需要所有这些。

另外，我不确定为什么 JS 库需要专门支持这一点。它们中的大多数支持执行 Ajax 请求，并且许多带有 UI 组件的组件还允许您使用数据源（例如 Dojo），因此您只需正常执行请求并将“内存中”数据库分配为列表组件的源。

【讨论】：

我打算只推送前 100 个结果，而不是整个数据库，但我想你是对的 - 初始加载需要更长的时间。我之前没有听说过将数据源分配给 UI 组件 - 我通常使用 infoBox.innerHTML = '...' 程序化地更新 div 我将研究分配数据源，看看有什么不同。

【解决方案2】：

我见过一些应用程序称为“单页应用程序”（例如 Gmail）。他们不会以常规的往返方式更改页面，而只是在客户端更新 DOM。我认为他们通常会根据需要执行多个 AJAX 请求来获取数据（因为您通常不希望在启动时将整个 DB 加载到应用程序中），以及进一步的 AJAX 请求以保存数据，但原则基本上就是你所描述的。

在提出问题时这些并不存在，但现在是 2013 年的 http://backbonejs.org/（低级）和 Angular.js 或 Ember.js（用于单页应用程序的高级 javascript 框架） .

您在客户端有模型，视图显示那些链接并自动更新以反映数据变化的模型，这些库还可以处理与服务器的同步。

【讨论】：