将 html 组件添加到页面的 AJAX 最佳实践

Question

我是 AJAX/javascript 的新手，我不确定我想要做的最好的方法是什么。

我正在使用 Javascript 在我的页面上调用页面方法 (WebMethods)。我正在检索的数据基本上是一个 Div 列表。

我不知道会返回多少，但需要根据其内容将它们插入到页面上的适当位置。

我看到了几种方法：

1. 创建一个 HtmlGenericControls 列表并将它们传回。
2. 创建一个字符串列表，其中每个字符串是我要拖放到页面上的整个 Div 代码。 （由于某种原因感觉不对）
3. 创建包含必要数据的简单容器对象。将它们传递到页面并使用它们在 javascript 中创建 Div。

我认为其中任何一个都可以，但我想遵循标准做法。你会选择哪个？

Answer 1

实际上，恕我直言，最好的做法是从服务返回数据，而不是 HTML，然后在客户端上构建 UI。通常这是因为相同的数据可能在不同的地方使用。现在，PageMethods 只返回该页面的数据，因此服务器端 HTML 如果不需要重用也可以，但我个人使用 JQuery 在客户端构建 UI 并且只传递数据；这减少了通过网络传输的数据，从而提高了应用程序的速度，并将页面渲染推迟到客户端的浏览器。

HTH。

Answer 2

我建议将数据作为 JSON 对象返回。在 JSON 对象中为每种类型的控件创建数组，然后您可以使用 for ( var q in json_object['div_type_q'] ) 循环遍历它们并将它们动态添加到页面中。

示例 json 对象：

json_object = {
 div_type_1: [ 0: "Content", 1: "More content", 2: "Even more content" ],
 div_type_2: [ 0: "This is navigation content" ]
}

您可以将类似的内容作为字符串传递并使用var object = eval( '(' + returned string + ')' )

祝你好运

Answer 3

我也这样做了一段时间。我可以说做到这一点并不容易。 但是现在我找到了一个很好的解决方案，让我告诉你，最好的仍然是使用更新面板。为什么？因为，如果您使用例如 msajax 扩展器，它们将在使用 updatepanel 时正确初始化，如果没有，updatepanel 甚至会传输新的脚本文件。

好的，我的页面上有 5 个控件。它们中的每一个都包含有条件更新面板。用户可以更改每个项目的设置，如果他保存，只有一个控件会完美同步。

现在，如果要添加一个新的，我有另一个更新面板，用于整个集合

喜欢

   <updatepanel>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
   </updatepanel>

现在，如果用户添加了另一个更新面板，（您必须在客户端进行管理，使用 web 方法将它们保存在某个位置并使用此设置生成更新面板）您会更新整个集合。

让我告诉你，使用更新面板可以节省大量时间！