从AJAX调用返回和显示数据的最佳实践

Question

我在页面上设置了一些jquery / php交互。 它将一些数据提交给服务器并获取数据记录，然后在页面上对齐这些数据以进行比较以及可能的操作。

我的问题是返回信息然后显示它的最佳做法是什么？

• 返回JSON对象，然后使用js动态创建html并显示数据？
• 返回JSON对象，然后将该数据放入已创建的容器中以获取页面上的数据？
• 从服务器返回纯HTML并将其放在页面上？

昨晚我在脑海里滚动着这些，无法确定一种方式是否会因为任何特殊原因而更好。

我不是js guru，所以不确定这些不同方法的优点/缺点和注意事项。

Answer 1

我认为它最终取决于您的应用程序。

纯HTML是最简单的，你只是插入到位和中提琴。 JQuery使得添加适当的事件变得轻而易举。

但是，每当我使用AJAX时，它总是演变为返回JSON并动态构建元素。 例如，如果您正在填充树，那么获得正确的嵌套可能会变得很麻烦。 这迫使您无论如何都必须执行客户端代码，此时只需从一开始就使用JSON更清晰。

此外，如果您计划使用来自其他页面的数据调用，那么使用JSON是可行的方法，因为HTML将被修复。

Answer 2

这完全取决于您在应用程序中设置内容的方式。 我，更喜欢返回JSON（列表中的第二种方法），因为我有一个'错误代码'参数，我在更新页面上的内容之前检查onSuccess函数，如果它不为零，那么我通知用户错误，包括从服务器返回的错误消息（服务器端验证，数据库超时等）。

Answer 3

你问题中“可能采取的行动”部分会产生很大的不同。 如果除了显示数据之外还需要对数据执行其他操作，那么返回JSON显然是更好的选择，因为您可以将数据作为本机JavaScript对象使用，而不必遍历HTML DOM。 如果您打算做的只是显示它，我认为没有任何理由可以解决在JavaScript中构建该显示的麻烦; 只需在服务器上的表示层中构建HTML。

Answer 4

我认为你错过了一个完全有效的选项，我经常使用它。 这是我的典型架构，它还没有让我失望... :-)

这是我使用的基本jQuery模板：

$(function() {
    $.getJSON('/some/page',{foo:bar,bar:foo},function(json) {
        if(json.outcome == 'success') {
            $('body').prepend(json.html);
        } else {
            // Somehow let the user know why it didn't work
            alert(json.error);
        }
    });
});

这是我使用的基本后端（在我的情况下为PHP）结构：

<?php // Page: '/some/page'

/* Blah Blah Blah... do whatever needs to be done... */

// If everything turns out okay (assuming '$output' is the HTML 
// you want to display...
echo json_encode(array('outcome'=>'success','html'=>$output));

// If something goes wrong... just do:
echo json_encode(array('outcome'=>'error','error'=>'Uh oh... something is broken'));

当然，您需要通过将它们放入某个变量或其他内容来更具体地解决您的错误。 但是，你应该明白这个想法。 此外，您当然可以向json输出添加更多信息。 你可以有一些预先制作的HTML以及一些其他信息，如“成功通知”或某个元素的新类名，我不知道......无论如何......可能性是无穷无尽的。

无论如何，我选择这条路线的原因是因为它通常更快（根据我的经验）将预先制作的HTML附加到DOM而不是循环JSON并插入内容，除非它只是一些文本要替换成一个元素。 但是，我所展示的方法是，IMO，两全其美。 您可以将HTML作为字符串附加到其中一个JSON属性。

快乐jQuerying :-)

Answer 5

这最近出现了，可能是一个骗局： AJAX响应：数据（JSON，XML）或HTML片段？ 。

如果您要创建HTML，那么您也可以直接返回HTML并将其注入DOM。 但是，有时您需要使用JSON派上用场的对象。

例如，如果您返回一个Person对象，那么您可以问候Person.Name并显示Person.Preferences，这非常方便。 这取决于你的设计，但一般的考虑应该是保持HTML不受Javascript的影响，除非你正在构建RIA。

Answer 6

我已经使用了所有三个并得出结论，在向页面引入新元素时返回HTML会更好。

我的经验是，当使用javascript构建HTML时，我通常会复制已经为非JavaScript用户旅程完成的工作。

我仍然更喜欢解析json来更新现有元素或仅创建javascript功能。 我告诉自己这个带宽，但我认为这只是因为我喜欢javascript。

作为第四个选项，我读了一篇很棒的文章，讲述了Flickr如何使用字符串连接处理大量数据。 基本上只是在管道上解析一个大的字符串并将其切断在客户端上。 这大大减少了服务器上的数量，客户端只有轻微的增加。

Answer 7

返回纯HTML是最佳解决方案。 在大多数情况下，gzip应该中和带宽的任何差异，如果客户端是一个糟糕的机器，通过客户端上的javascript渲染可能会很慢。 最后，如果使用MVC，那么编写javascript来呈现HTML与使用像视图这样的好东西相比是很难的。