有多少内容被替换为AJAX调用是太多了吗?有多少、太多了、内容、AJAX

2023-09-10 19:43:03 作者:凯源盛世

我遇到一个共同的问题,尝试做AJAX开发时。在可能的情况,我想尝试,只是在现有的布局更新数据,而不是布局本身。例如,采取以下DIV:

I run into a common problem when trying to do AJAX development. Where possible, I like to try and just update data in an existing layout, and not the layout itself. For example, take the div below:

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

我会得到的内容-5 更新值从服务器只需更换内容-5与价值的内容。这使得有很大的意义进行简单的数据替换其中的值总是会被​​显示在其纯粹的形式。

I would get the updated value for content-5 from the server and just replace the contents of content-5 with the value. This makes a lot of sense for simple data replacements where the value is always going to be displayed in its pure form.

有时候内容比较复杂,我必须真正得到的不仅仅是原始数据......也许有一些逻辑来确定一个值显示,也许是风格需要依赖于内的数据有所不同。在这种情况下,我一般产生在服务器端将HTML和HTML注入元件,而不是仅仅原始数据

Sometimes the content is more complicated, and I have to actually get more than just raw data... maybe there is some logic to determine how a value is displayed and perhaps the style needs to be different depending on the data inside. In that case, I generally produce the HTML on the server side and inject the HTML into the element instead of just raw data.

例如:从控制器状态字段回来为完成,但是从设计文档,完全应该向用户显示文本可用,它需要从其他不同的方式来设置样式的状态。

Example: A status field from the controller comes back as "complete", but from the design doc, "complete" is supposed to show the user the text "Available" and it needs to be styled in a way different from other statuses.

在Javascript中这样做将需要的模板层可能已经处理了一些深入了解的知识。最终的结果会是一样的(code以下片段),但不同的是,也可能会被一些code重复,一个更为复杂的Javascript层。

Doing this in Javascript would require some in-depth view knowledge that the template layer probably already handles. The end result would be the same (code snippet below), but the difference is that there could possibly be some code duplication and a far more complicated Javascript layer.

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

如果没有发生故障,则要求上来,该系统将需要处理的新内容为好。实现最简单的解决方法就是得到所有内容的在同一时间,使我不需要处理额外注入了新的元素,而不是仅仅更换现有内容的复杂性。

Without fail, the requirement comes up that the system will need to handle "new" contents as well. The easiest solution to implement is to just get all of the content's at the same time so that I do not need to handle the extra complexity of injecting a new element instead of just replacing existing content.

所以,我创建了一个新的模板,包装在同一个ID另一个元素的内容,并批量替换所有内容的div的同时随时有变化。

So, I create a new template, wrap the contents in another element with an ID, and bulk replace all of the content divs at the same time any time there is a change.

<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请求更换整个页面。难道这真的是一个问题吗?

At some point, I have to wonder: Where is the line? At some point it feels like I'll eventually just be replacing the whole page with an AJAX request. Would this really be a problem?

我意识到这可能是pretty的主观的,但什么是确定哪个水平,你应该使用AJAX更换内容一些好的策略?刚刚更换的数据似乎是我的preferred方法时,可能因为它使AJAX控制器非常简单。从模板更换较大的HTML块似乎是最简单的处理更加复杂化的布局和设计问题,也感觉它可以更容易维护。是我没有考虑过还有其他的选择吗?

I realize this may be pretty subjective, but what are some good strategies for determining to which level you should be replacing content with AJAX? Replacing just the data seems to be my preferred method when possible as it makes the AJAX controllers very simple. Replacing larger chunks of HTML from a template seems to be the easiest for handling more complicating layout and design issues and also feels like it could be more easily maintained. Are there other options I have not considered?

我预计将有大约操纵DOM编程的一些讨论,但我个人真的不喜欢这一点。在code最终看起来pretty的可怕,真正开始了太多的布局和设计融入JS层我喜欢。因为我一般用某种模板库工作(无论是原材料PHP,像Smarty的或JSP中的Java PHP模板)似乎更有意义,离开尽可能多视觉设计那里尽可能。

I expect there will be some discussion about manipulating the DOM programatically, but I personally really dislike this. The code ends up looking pretty horrible and really starts to integrate too much layout and design into the JS layer for my liking. Since I generally work with template libraries of some sort (whether raw PHP, PHP templates like Smarty or JSP in Java) it seems to make more sense to leave as much visual design there as possible.

修改

根据前几个答案,好像这是被解读为试图保持在同一页上的用户,但在工地附近航行周围或以其他方式改变页面的每次更新激进的方式。现在的问题更多的是如何确定的AJAX调用的布局工作应该发生,它是否是一个可以接受的做法,改变code大块用AJAX请求,明知替换code可近看相同的是什么之前,一直在那里。

Based on the first few answers, it seems like this is being read as trying to keep the user on the same page but navigating around around the site or otherwise changing the page in a radical way with each update. The question is more about how to determine where the layout work for AJAX calls should happen and whether or not it is an acceptable practice to change large chunks of code with an AJAX request, knowing that replacement code may look nearly identical to what had been there before.

推荐答案

完成个人意见的前虚无的,我的经验法则是改变不超过1面板中的单位和33 %以较低者为准

Complete personal opinion ex nihil, my rule of thumb is to change no more than 1 "panel" unit or 33% of the page whichever is less.

的基础,这是用户应该能够清楚地认识到previous页面的状态是关系到新的状态 - 你会怎么觉得如果你突然被传到建筑到您的权利?轻拿轻较差的用户。

The basis for this is that the user should be able to clearly recognise the previous page state is related to the new state - how would you feel if you were suddenly teleported into the building to your right? Be gentle with your poor user.

也有关于移动和插入基本上是一个面的数据所带来的好处,我认为这是一个有点AJAX反模式的严重技术问题。并AJAX提供什么好处,如果你要做到这一点?

There are also serious technical questions about the benefits of moving and inserting basically a page worth of data, which I think is a bit of an AJAX anti-pattern. What benefit does AJAX provide if you're going to do that?

您的具体问题似乎依赖于假设的响应回来从你的AJAX请求是不是刚的数据。这种感觉我错了,从关注的角度来看的分离:我所期望的页面将所有它需要已经布局信息,Ajax响应本身提供不外乎哑数据/标记,并创造了JS事件处理程序请求缝制两个一起,MVC的风格。在这方面,我认为,是的,你做的太多了。

Your specific question seems dependant on the supposition that the response coming back from your AJAX request isn't "just" data. This feels wrong to me from a separation of concerns point of view: I would expect a page to have all the layout information it requires already, the AJAX response itself to provide nothing more than dumb data/markup, and the JS event handler which created the request to sew the two together, MVC style. In that respect I think, yes, you're doing too much.

(由面板,我的意思是一个逻辑设计元件 - 一菜单,一个色带,一个项目的元数据面板,等等。)

(by panel, I mean one logical design element - a menu, a ribbon, an item metadata panel, etc..)

编辑:现在,我想想,我想是这样的用户个人资料页面打破我的经验法则与这些选项卡点击的