代码之家 › 专栏 › 技术社区 › Beau Simensen

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

ajax javascript

Beau Simensen · 技术社区 · 17 年前

我在尝试进行AJAX开发时遇到了一个常见的问题。在可能的情况下,我想尝试只更新现有布局中的数据,而不是布局本身。例如,使用下面的div:

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

我会得到 content-5 从服务器,只需将content-5的内容替换为值。对于简单的数据替换来说,这是非常有意义的,其中的值总是以其纯形式显示。

有时候内容更复杂,我要得到的不仅仅是原始数据。。。也许有一些逻辑来决定一个值是如何显示的,也许样式需要根据里面的数据而有所不同。在这种情况下,我通常在服务器端生成HTML,并将HTML注入元素,而不仅仅是原始数据。

示例:来自控制器的状态字段返回为“complete”,但是从设计文档中,“complete”应该向用户显示文本“Available”,并且需要以不同于其他状态的方式对其进行样式设置。

在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、PHP模板(如Smarty或Java中的JSP),因此尽可能多地保留可视化设计似乎更有意义。

编辑

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

6 回复 | 直到 17 年前

jmucchiello 17 年前

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

当然也有例外,对于比上一个AJAX请求更新的数据。但这显然不是我要说的。实时聊天屏幕可以接收最后一个AJAX请求和刷新之间的更新。没什么大不了的。我说的是逻辑内容和描述它的URL应该总是同步的。

annakata 17 年前

完整的个人意见 前nihil ,我的经验法则是改变 不超过1个“面板”单元或页面的33%,以较小者为准 .

这样做的基础是,用户应该能够清楚地识别出之前的页面状态与新的状态相关——如果你突然被传送到你右边的大楼里,你会有什么感觉?对你可怜的用户要温柔。

对于移动和插入一页数据的好处,还有一些严重的技术问题,我认为这有点像AJAX反模式。如果您要这样做,AJAX提供了什么好处?

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

(所谓面板,我指的是一个逻辑设计元素——菜单、功能区、项目元数据面板等)

编辑:现在我想起来了,SO的用户配置文件页面打破了我的经验法则

Kevin Davis 17 年前

根据您是否希望用户能够链接到当前页面/为其添加书签等,您可能需要导航用户的浏览器。

这对于GMail等应用程序来说并不重要,它们永远不会刷新页面。

对于我自己来说,我倾向于认为在导航到逻辑上不同的地方时导航浏览器是一个很好的做法。一个人的简介与他们的信息列表。

抱歉,如果这是模糊的,那是相当主观的:-)

Robert Elwell 17 年前

对于这样的事情,一个很好的指导原则是问问自己,“这个动态应用程序是‘内容’,还是内容内容?”您的用例听起来像是将随每个用户而改变的应用程序内容。这可能是阿贾克斯最好的地方,但是有了一切,不只是一个锤子总是很好的。你不想在一页上做太多。例如,如果一个部分坏了,整个事情可能会让用户沮丧。

无论您在查看实际的页面内容或任何信息是静态的地方,我强烈建议避免使用JavaScript,因为它有被搜索引擎看不见的风险。确保链接到此类信息的任何内容都是可爬网的。实现这一点的第一步是在服务器端而不是浏览器端动态生成。

Glazius 17 年前

如果您使用Smarty模板生成页面,只需将模板分割成多个有意义的部分—news.tpl、email.tpl、weather.tpl—然后让master.tpl生成页面结构并调用子模板。

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

你还没有真正弄清楚你想在这里替换的东西的类型,我的初步反应是,如果一个事件触发页面的多个部分同时更新,这表明你可能应该将这些部分合并到一个单独的显示中。

服务器端完成了多少格式化,而客户端使用JavaScript完成了多少格式化?如果可能的话,我会说服务器端格式化,这样你就有了反映你对显示布局和逻辑的讨论的代码。客户端格式化可以用于更多基于界面的问题-排序表中的行,并使用:奇数和:偶数选择器交替行颜色,显示和隐藏div以创建“选项卡式显示”,而不必点击服务器,因为数据不会仅仅因为选择新的选项卡而改变,诸如此类。

最后,AJAX是单向的。如果您的web页面是数据库上的一个视图,那么这并不是一个大问题,但是使用AJAX操作代替常规的导航是一个糟糕的主意。

Mark Brittingham 17 年前

如果您习惯性地使用AJAX调用替换页面的全部内容,我同意您有问题。然而,在我看来,您正试图仔细考虑您的设计的含义,并尽可能避免annakata所称的“AJAX反模式”

我的规则稍微简单一点:只要页面上保留大量的上下文(如左边的菜单、标题、各种控件、页面标题等),我就可以用AJAX调用替换几乎任何内容。也就是说,我从来没有遇到过像您这样有AJAX生成代码的页面。

不过,我有一个问题:难道不能对state进行编码,这样您就可以替换示例中的一些div而不是全部div吗?如果没有,你想过这样做吗?