我正在使用内联编辑来使用 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 更新。在这种情况下，您（隐式地）假设更新将在服务器上执行，没有任何错误。
此方法的缺点是以下方案
- 用户点击不可编辑的文本
- 文本变为可编辑
- 用户在新文本中键入
- 用户点击发送
- UI 将更改为新文本并使其不可编辑
- 用户在回复返回之前关闭浏览器窗口（或离开页面）（假设已执行更改）
- 下次用户登录（或返回页面）时，他们会对为什么更改不适用感到困惑！
但是，你还希望使用 ajax 的异步特性，并确保用户在执行此更改时仍可以与应用（或页面的其余部分）进行交互。
我们这样做的方式（在我的工作场所）通常是（使用长轮询或http推送）
- 用户与不可编辑的文本交互
- 文本变为可编辑状态
- 用户在新文本中键入
- 用户点击发送
- 我们没有乐观地更新文本，而是显示某种微调器（仅在文本上），向用户指示我们正在等待服务器的某种响应。请注意，由于我们仅禁用显示此文本的页面部分，因此用户不必等待 ajax 调用返回即可与页面的其余部分进行交互。（事实上，我们有很多情况支持并行更新页面的多个部分）。想想Gmail，您可能正在浏览器窗口中与某人聊天，同时收到电子邮件。聊天可以继续，电子邮件计数器也会增加。它们都在同一页面上，但不相互依赖（或以任何方式等待对方）
- 更新完成后，我们取出微调器（通常使用 css - 切换类显示）并用新文本替换元素的值。
最后，如果您正在执行此类操作，请确保您的服务器还支持向文本字段添加挂起类（这将导致出现微调器）。这样做的原因如下
- 用户更新文本并提交
- 用户立即导航到其他页面
- 然后用户再次返回到原始页面（让我们假设更新尚未完成）
- 由于您的服务器知道该字段正在更新，并且可以将挂起的 css 类添加到标签/显示字段中，因此页面会加载一个微调器。（另一方面，如果没有挂起的请求，则不会显示微调器）
- 最后，当长轮询器消息从服务器返回时，微调器将被删除并显示当前值