Javascript-用AJAX调用替换多少内容太多？

尝试进行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,PHP模板,如Smarty还是Java中的JSP),因此尽可能多地保留可视化设计似乎更有意义.

编辑

根据前几个答案,这似乎是在试图让用户保持在同一页面上,但是却在网站上四处导航,或者在每次更新时以一种彻底的方式更改页面.问题更多的是关于如何确定AJAX调用的布局工作应该发生在哪里以及用AJAX请求更改大代码块是否是可以接受的做法,因为知道替换代码看上去与以前的代码几乎相同之前.

解决方法:

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

当然,也有例外,即数据比上一个AJAX请求还要新.但这显然不是我要说的.实时聊天屏幕可能会收到上一次AJAX请求和刷新之间的更新.没什么大不了.我说的是逻辑内容,描述它的URL应该始终保持同步.

Javascript-用AJAX调用替换多少内容太多？

相关推荐