Question

尝试进行AJAX开发时遇到了一个常见问题。在可能的情况下，我喜欢尝试仅更新现有布局中的数据，而不是布局本身。例如，取下面的div：

<div id="content-5">Here is some content</div>

我会从服务器获取content-5的更新值，只需用值替换content-5的内容。这对于简单的数据替换很有意义，其中值总是以纯粹的形式显示。

有时内容更复杂，而且我必须实际获得的不仅仅是原始数据...可能有一些逻辑来确定值的显示方式，也许风格需要根据内部数据的不同而不同。在这种情况下，我通常在服务器端生成HTML并将HTML注入元素而不仅仅是原始数据。

示例：来自控制器的状态字段返回为“完成”，但是从设计文档中，“完成”应该向用户显示文本“可用”，并且需要以不同于其他方式的方式设置样式状态。

在Javascript中执行此操作需要一些深入的视图知识，模板层可能已经处理过。最终结果将是相同的（下面的代码片段），但区别在于可能存在一些代码重复和更复杂的Javascript层。

<div id="content-5"><span class="success">Available</span></div>

没有失败，需要出现系统需要处理“新”内容的要求。实现最简单的解决方案是同时获取所有内容，这样我就不需要处理注入新元素的额外复杂性，而只需替换现有内容。

因此，我创建了一个新模板，将内容包装在带有ID的另一个元素中，并在任何时候发生更改时同时批量替换所有内容div。

<div id="allContent">
    <div id="content-1">Some content A</div>
    <div id="content-2">Some content B</div>
    <div id="content-3">Some content C</div>
    <div id="content-4">Some content D</div>
    <div id="content-5">Some content E</div>
</div>

在某些时候，我不得不怀疑：线路在哪里？在某些时候，我觉得我最终只是用AJAX请求替换整个页面。这真的会成为一个问题吗？

我意识到这可能是非常主观的，但是有哪些好的策略可以确定你应该用AJAX替换内容？在可能的情况下，仅替换数据似乎是我的首选方法，因为它使AJAX控制器非常简单。从模板中替换大块的HTML似乎是处理更复杂的布局和设计问题的最简单方法，并且感觉它可以更容易维护。还有其他我未考虑过的选择吗？

我希望会有一些关于以编程方式操作DOM的讨论，但我个人真的不喜欢这个。代码看起来非常可怕，并且真正开始将太多的布局和设计集成到JS层中，以满足我的需求。由于我通常使用某种类型的模板库（无论是原始PHP，像Smarty这样的PHP模板还是Java中的JSP），所以尽可能多地保留视觉设计似乎更有意义。

修改

根据前几个答案，似乎这被视为试图让用户保持在同一页面上，但在网站周围导航或以其他方式更改页面以及每次更新的激进方式。问题更多的是关于如何确定AJAX调用的布局工作应该发生的位置，以及是否可以接受使用AJAX请求更改大块代码的可行做法，因为知道替换代码看起来几乎与那里的代码相同之前。

Answer 1

完整的个人意见 ex nihil ，我的经验法则是更改不超过1个“面板”单元或33％的页面，以较少为准。

这样做的基础是用户应该能够清楚地识别出前一页状态与新状态有关 - 如果你突然被传送到你右边的建筑物中，你会有什么感受？温柔地对待你的穷人。

关于移动和插入基本上一页数据的好处，还有一些严重的技术问题，我认为这有点像AJAX反模式。如果您打算这样做，AJAX会带来哪些好处？

您的具体问题似乎取决于从您的AJAX请求返回的响应不是“仅”数据的假设。从关注点分离的角度来看，这对我来说是错误的：我希望页面能够拥有它所需的所有布局信息，AJAX响应本身只提供哑数据/标记，以及创建的JS事件处理程序要求将两者结合在一起，MVC风格。在这方面，我想，是的，你做得太多了。

（通过面板，我的意思是一个逻辑设计元素 - 菜单，功能区，项目元数据面板等。）

编辑：现在我想到了，我认为SO的用户个人资料页面违反了我的经验法则点击了这些标签

Answer 2

我认为最重要的要求是刷新要求。如果在几次AJAX更新后我点击刷新，我刚看的页面应该是到达的页面。如果页面由于任何原因恢复到以前的状态，则URL是错误的。如果由于任何原因，您的AJAX数据将使浏览器中的URL无效，那么您不应该使用AJAX来获取该数据。

有一些例外，当然数据甚至比上一次AJAX请求更新。但这显然不是我所说的。实时聊天屏幕可以在最后一个AJAX请求和刷新之间接收更新。没什么大不了。我在谈论逻辑内容，描述它的URL应始终保持同步。

Answer 3

根据您是否希望人们能够链接到当前页面/书签等，您可能需要浏览用户的浏览器。

对于像GMail等一些应用程序来说，这不是一个问题，它们也不会刷新页面。

对于我自己，我倾向于认为在导航到逻辑上不同的地方时浏览浏览器是一种很好的做法。例如。一个人的个人资料与他们的消息列表。

对不起，如果这是模糊的，那是相当主观的： - ）

Answer 4

这样的好指南就是问自己，“这是动态应用程序'内容'，还是内容内容？”您的用例听起来像应用程序内容，将随每个用户而变化。对于Ajax来说这可能是最好的地方，但是对于所有东西来说，不要只有一把锤子总是很好。你不想在一个页面上做太多。例如，如果一个部分中断，整个事情可能会因此而使用户感到沮丧。

在您查看实际页面内容或信息是静态的任何内容的任何地方，我强烈建议避免使用JavaScript，因为它存在对搜索引擎不可见的风险。确保链接到此类信息的任何内容都是可抓取的。实现这一目标的第一步是在服务器端而不是浏览器端进行动态生成。

Answer 5

如果您正在使用Smarty模板生成页面，只需将模板分成各种有意义的部分 - news.tpl，email.tpl，weather.tpl - 并使用master.tpl生成页面结构并调用儿童模板。

然后，如果您使用由超时触发的AJAX调用来刷新新闻，您可以调用服务器，将必要的数据塞入news.tpl，并将结果返回到您设置的新闻div中与master.tpl一起。这样你的新闻布局总是遵循news.tpl的模式。（如果您使用JavaScript来操作格式化位或在文档加载时设置事件处理，则需要在AJAX调用之后将该后处理附加到触发。）

你还没有真正了解你想要替换的东西的类型，我最初的反应是，如果单个事件触发页面的多个部分一次更新，那就是一个迹象，也许你应该将这些部分合并为一个显示器。

在服务器端完成了多少格式化，而在客户端使用JavaScript完成了多少格式化？如果可能的话，我会说服务器端格式化，这样你就可以反映出你对显示布局和逻辑的讨论。客户端格式化可用于更多基于接口的问题 - 对表中的行进行排序，并使用以下选项交替行颜色：odd和：even选择器，显示和隐藏div以创建“选项卡式显示”，而不会因为获取数据而点击服务器不要只是选择一个新的标签来改变这种事情。

最后，AJAX是单向的。如果你的网页是一个数据库视图，这不是一个问题，但使用AJAX操作代替正常导航是一个糟糕的主意。

Answer 6

如果您习惯性地使用AJAX调用替换页面的全部内容，我会同意您遇到问题。但是，在我看来，你试图仔细思考你的设计的含义，并尽可能地避免annakata所谓的“AJAX反模式”。

我的规则有点简单：只要大量的上下文（例如左边的菜单，标题，各种控件，页面标题等）保留在页面上，我就可以用几乎任何东西替换掉AJAX调用。话虽这么说，我从来没有挣扎过一个拥有尽可能多的AJAX生成代码的页面。

我确实有一个问题：是不是可以编码状态，以便你可以只替换你的例子中的一些Div而不是全部？如果没有，你有没有想过这样做？

用AJAX调用替换了多少内容太多了？

6 个答案: