ajax - CakePHP:JSON与AJAX

Question

我知道这个问题的标题可能有点误导；我意识到JSON是一种格式化数据的方式，而AJAX是一种在不刷新的情况下从/向服务器推送/推送更新的方式。我之所以问是因为我在这方面没有太多经验。

假设我有一个CakePHP Web应用程序:如果我选择，是否只是一个偏好问题？

要使用JSON来拉/推数据，然后在客户端使用脚本来更新页面？

要使用AJAX从服务器获取完整的HTML片段，然后将其插入页面？

我看到的两者之间的唯一区别是，JSON意味着较少的服务器负载和带宽使用量，也许开发人员更喜欢使用哪种语言(JSON可能意味着更多的客户端脚本？)。

有人可以帮我阐明一下这件事吗？

Answer 1

好问题。特别是在像Backbone.js之类的东西变得越来越流行的时代。

让我们一步一步地看它。

首先，服务器上产生JSON而不是HTML的负载可能大致相同。大多数资源都不会用于将数据对象转换为HTML或JSON，而是用于接受客户端请求，加载您的框架，您的情况下的CakePHP，路由请求，加载更多组件，建立数据库连接，对其进行查询，接受结果，将其转换为数组/对象，然后才开始将数据输出为 View (JSON或HTML)的字符串。事实是，诸如PHP之类的服务器端语言并没有真正通过遍历事物并将值输出到字符串中而给人留下深刻的印象，他们可以轻松地做到这一点。

实际上，当您开始输出JSON时，性能上的差异不会太大。至少，对于大多数事情来说还不够好。

当您想要使用JSON时，便拥有了一项复杂的功能。例如，诸如tweetdeck的feed之类的东西，其中有很多小的组件和数据需要更新；一条推文，一条推文列表，关注者计数等。加载这些小信息而不是每次都重新下载完整的HTML集是有意义的。您将使用JSON和客户端模板，因为您可能会更改许多内容。

但是，在更“普通”的应用程序中，例如博客，电子商务网站，Wiki等，您实际上并不需要像这样的细粒度的东西。在这种情况下，您将使用AJAX(使用您的定义)。

造成这种情况的原因是，与先构建返回JSON的 View ，然后构建客户端模板以呈现这些 View 相比，构建HTML View 更容易并且对开发人员更友好。在服务器端模板中，更容易检查某些条件，创建循环，在需要时获取额外的数据等。无论如何，它不会完全影响您的表现。

另一个原因是，您也可以在服务器端使用静态HTML来呈现非AJAX页面，作为后备。因此，当客户端可以使用AJAX时，您可以通过AJAX加载内容，并用获得的HTML中的”替换您的”内容，但是当没有可用的AJAX时，您只需重定向至该页面。因此，现在您同时支持javascript和非javascript客户端。您也可以通过服务器和客户端模板来实现这一点，但是这需要双重工作或使用诸如Mustache之类的工具。

最重要的是，使用JSON在客户端中进行所有呈现的一个缺点是呈现页面需要一些信息，但这些信息不应该掌握在用户手中。我可以想象信用卡数据，社会保险号，真实姓名等东西，在服务器端进行渲染之前，您会在代码中进行某种形式的检查。为了在客户端进行相同的检查，您必须将其全部发送给客户端，然后将其全部发送给用户。当然，您不能这样做，而是先在服务器端处理所有数据，然后再将其发送到客户端，但这意味着您已经在做越来越多的HTML模板操作了。

总结:

对我来说，服务器或客户端html渲染之间的性能在现实生活中并不是那么明显。我使用了很多JSON，但通常用于与 View 无关的事情。就像通过AJAX调用保存内容，然后以JSON返回状态报告一样。因此，我可以做诸如if data.status == 'awesome'之类的事情。但是，如果我完全使用AJAX来访问普通网站，则可以使用pjax之类的东西(如下所示)从服务器加载HTML。在我看来，JavaScript应该使用现有的HTML进行处理，而不应该过多地使用它。在构建真正复杂且实时的应用程序时需要异常(exception)，这些应用程序需要同时跟踪大量较小的数据，因此客户端模板应有其处，而不仅仅是在所有地方。

看看pjax，它是一个javascript库，用于从服务器端动态将html片段加载到页面上的元素中。
http://pjax.heroku.com/

DHH在Hacker News上的一个帖子中回答了如何以及如何在Basecamp上进行设置；大多数是服务器端脚本，很少是客户端MVC。

https://news.ycombinator.com/item?id=3603898

另一个有趣的链接。 LinkedIn描述了出于性能原因如何使用客户端模板。
http://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates