【问题标题】:Best practices for returning and displaying data from AJAX calls从 AJAX 调用返回和显示数据的最佳实践
【发布时间】:2010-10-27 18:17:08
【问题描述】:

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

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

  • 返回 JSON 对象然后创建 使用 js 即时生成 html 并显示 数据?
  • 返回 JSON 对象,然后 将该数据放入已创建的 页面上数据的容器?
  • 从服务器返回纯 html 并 把它放在页面上?

昨晚我脑子里一直在思考这些问题,但由于某种特殊原因,我真的不知道是否有一种方法会更好。

我不是 js 专家,所以不太确定这些不同方法的优缺点和注意事项。

【问题讨论】:

    标签: javascript jquery ajax json


    【解决方案1】:

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

    纯 HTML 是最简单的,您只需将中提琴放在适当的位置即可。 JQuery 让添加适当的事件变得轻而易举。

    但是,每当我使用 AJAX 时,它总是演变成返回 JSON 并动态构建元素。例如,如果您正在填充一棵树,那么获得正确的嵌套可能会变得混乱。这迫使您无论如何都必须编写客户端代码,此时简单地从一开始就使用 JSON 会更干净。

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

    【讨论】:

      【解决方案2】:

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

      【讨论】:

        【解决方案3】:

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

        【讨论】:

          【解决方案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 :-)

          【讨论】:

            【解决方案5】:

            这是最近出现的,可能是骗子:The AJAX response: Data (JSON, XML) or HTML snippet?

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

            例如,如果您返回一个 Person 对象,那么您可以打招呼 Person.Name 并显示 Person.Preferences,这非常方便。这取决于您的设计,但一般注意事项应该是将 HTML 排除在 Javascript 之外,除非您正在构建 RIA。

            【讨论】:

            • 您的答案中是否包含指向此问题的链接?
            【解决方案6】:

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

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

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

            作为第四个选项,我阅读了一篇关于 Flickr 如何通过字符串连接处理大量数据的精彩文章。基本上只需在管道中解析一个大 o' 字符串并在客户端将其切碎。这显着减少了服务器上的开销,而客户端上的开销仅略有增加。

            【讨论】:

              【解决方案7】:

              返回纯 HTML 是最好的解决方案。在大多数情况下,gzip 应该抵消带宽的任何差异,如果客户端是一台糟糕的机器,通过客户端上的 javascript 渲染可能会很慢。最后,如果你使用 MVC,编写 javascript 来呈现 HTML 与使用视图之类的好东西相比很难使用。

              【讨论】:

              • 这远非“最佳”,因为它混合了数据和演示。更清洁的是在 HTML 中使用模板并用数据填充它们
              • 嗯?什么都没有混在一起,在我的方法中,它通过 MVC 在服务器端完全分离。
              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2015-04-12
              • 1970-01-01
              • 2012-10-10
              • 1970-01-01
              • 2023-04-07
              相关资源
              最近更新 更多