我使用的是内联编辑,更新与AJAX数据库中的文本。 这是基本的过程中,很平常的东西:
- 文本是不可编辑
- 我单击该文本,就变成可编辑的
- 我键入新文本
- 然后单击以更新的文本发送到数据库
- 然后返回文本不可编辑格式
我的问题是,当我应该更新为新数据的接口? 我应该Ajax调用之前立即更新,或者我应该等待更新响应从数据库返回?
我的顾虑:
- 如果我不立即更新界面,迫不及待地想从数据库的响应,那么我已经失去了带有AJAX异步利益。
- 但是,如果我马上更新,那么如果数据库响应有错误,我总得要跟踪我已经作出的改变,扭转它,这是很多更多的工作。
因此,如何在这样的事情通常做什么?
我认为这是完全合理的等待响应和更新作为回调的结果。 这样做不会从异步方法得出。 它仍然是完全异步,因为你不会阻止整个页面或完全重新加载它。
时代在大量的应用程序,尤其是在移动的人在带宽可能是有限的,我会看到一个微调,表明该字段被提交。 这是站不住脚的应用程序的任何其他部分。 即使计算器做到这一点,当我用手机查看。 为了保持异步,目前仍在继续回调依靠同步到数据库的返回值。
AJAX调用是相当快的,除了当然的网络问题。 就个人而言,我不认为你会等待来自数据库的响应失去AJAX的好处。 也就是说,除非你打算,因为服务器端处理等正在缓慢...
现在,如果你要设置文本字段到一个不可编辑的状态下,用户可能会认为他的更改已经生效,并在服务器返回一个错误,该值恢复到原来的状态就会手忙脚乱。 我会离开现场,直到编辑服务器返回。
如果您在使用jQuery这是很简单,但如果您使用的是自制的Ajax调用脚本,你必须添加一些机制,看看是否一切都好还是坏。
$.ajax({
url: '/ajax/doSomething.php',
type: 'POST',
dataType: 'json',
data: {
'q': $("#editableText").val()
},
success: function(json) {
$("#editableText").html(json.value);
},
error: {
alert('something went wrong!');
}
})
所以,当你的doSomething.php返回true或false,我们的Ajax调用根据它做一些事情。
是Ajax调用是相当快的,但改变页面上显示的数据之前,我想你必须确保一切正常,否则用户可能会离开页面不知道是否已经做了编辑与否。
你所提到的情况下是一个乐观的UI更新。 在这种情况下,我们假定你是(implictly),该更新将在服务器上没有任何错误进行。
这种方法的缺点是具有以下情形
- 用户点击不可编辑的文本
- 文本变为可编辑
- 在新的文本用户类型
- 用户点击发送
- 用户界面更改为新的文本,并使其不可编辑
- 用户关闭浏览器窗口(或从页面导航离开)回复以往任何时候都回来了(假设进行的变化)
- 下一次在用户登录(或回来页)他们是困惑,为什么改变并不适用!
然而,你也想使用Ajax的异步特性,并确保用户仍然可以与您的应用程序(或页面的其余部分)作为正在执行这一变化相互作用。
在路上,我们做到这一点(在我工作的地方)通常会(使用长轮询或HTTP推送)
- 用户与非可编辑的文本交互
- 文本变为可编辑
- 在新的文本用户类型
- 用户点击发送
- 相反,更新文本的乐观,我们表现出一定的微调(仅限于文本)的指示,以我们正在等待某种来自服务器的响应的用户。 请注意,由于我们只禁用显示该文本的用户不必等待Ajax调用,以便与页面的其余部分进行交互返回页面的只是一部分。 (事实上,我们有一个支持并行更新页面的多个部分很多情况下)。 相信Gmail,你可能会有人在浏览器窗口中聊天,并在同一时间你收到一封电子邮件。 聊天可以继续下去的电子邮件计数器也递增。 他们两人都是在同一页上,但不互相依赖(或以任何方式互相等待)
- 当更新完成后,我们带走的微调(这通常是使用CSS显示 - 拨动类),并用新的文本替换元素的价值。
最后,如果你正在做这样的事情确保你的服务器也有增加挂起类文本字段支持(这将导致一个微调出现)。 这是由于以下原因做
- 用户更新文本并提交
- 用户立即导航到不同的页面
- 用户然后回来再原来的页面(让我们假设更新尚未完成)
- 由于您的服务器知道该字段被更新,并可以添加待处理CSS类标签/显示领域的页面出现装载了微调。(在另一方面,如果不存在悬而未决的要求就没有显示微调)
- 最后,当长轮询消息从服务器返回的微调器取下,并显示当前值
文章来源: When doing AJAX edit to the database, should I update the interface immediately with the new data