當對數據庫進行AJAX編輯時，是否應該使用新數據立即更新界面

Question

我正在使用內聯編輯來使用AJAX更新數據庫中的文本。這是基本的過程中，很平常的東西：

• 文本是不可編輯
• 我單擊該文本，就變成可編輯的
• 我鍵入新的文本
• 然後單擊以更新的文本發送到數據庫
• 然後返回文本不可編輯的格式

我的問題是，當我應該更新爲新數據的接口？我應該在ajax調用之前立即更新它，還是應該等待更新響應從數據庫中返回？

我擔心的：

• 如果我不立即更新界面，迫不及待地想從數據庫的響應，那麼我已經失去了帶有AJAX異步利益。
• 但是，如果我立即更新它，那麼如果數據庫響應有錯誤，我不知何故必須跟蹤我已經做出的更改，並將其反轉，這是更多的工作。

那麼這種事情通常是怎麼完成的呢？

Answer 1

我認爲完全合理的等待響應和更新作爲回調的結果。這樣做不會減損異步方法。它仍然完全異步，因爲您沒有阻止整個頁面或完全重新加載它。

在應用程序中有很多次，特別是在帶寬可能有限的移動應用程序中，我會看到一個微調錶明該字段正在提交。這不包含應用程序的任何其他部分。即使在使用移動視圖時，即使是stackoverflow也會這樣做。依靠回調來保持異步並仍然同步到數據庫返回值。

Answer 2

AJAX調用非常快，當然除了網絡問題。就我個人而言，我不認爲你會因爲等待數據庫的迴應而失去AJAX的好處。也就是說，除非您計劃因爲服務器端處理而導致速度變慢......

現在，如果您要將文本字段設置爲不可編輯狀態，用戶可能會認爲他的更改已被接受並且當服務器返回錯誤並且該值恢復到其原始狀態時將會感到困惑。我會離開該領域可編輯直到服務器返回。

Answer 3

如果您使用的是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調用非常快，但是在更改頁面上顯示的數據之前，我猜你必須確保一切正常，否則用戶可能會離開頁面而不知道他們是否已經完成了編輯。

Answer 4

您提到的情況是樂觀的UI更新。在這種情況下，您假設（暗示）更新將在服務器上執行而沒有任何錯誤。

這種方法的缺點是具有以下情形

1. 用戶點擊不可編輯的文本
2. 文本成爲新的文本編輯
3. 用戶類型
4. 用戶點擊發送
5. 用戶界面更改爲新文本並使其不可編輯
6. 用戶關閉瀏覽器窗口（或導航離開（假設已執行更改）
7. 下一次用戶登錄（或返回到頁面）時，他們對該更改不適用的原因感到困惑！

但是，您還希望使用ajax的異步性質，並確保用戶仍然可以與您的應用程序（或頁面的其餘部分）進行交互，因爲正在執行此更改。

的方式，我們做到這一點（在我工作的地方）通常會（使用長輪詢或HTTP推送）

1. 用戶與非可編輯的文本
2. 文本變爲可編輯
交互在新的文本
3. 用戶類型
4. 用戶點擊發送
5. 而是更新文本的樂觀，我們表現出一定的微調（僅限於文本）的指示，以我們正在等待某種重的用戶從服務器響應。請注意，由於我們只是禁用顯示此文本的頁面部分，用戶不必等待ajax調用返回以便與頁面的其餘部分進行交互。 （事實上​​，我們有很多情況支持並行更新頁面的多個部分）。想想你可能在瀏覽器窗口中與某人聊天的Gmail，同時你會收到一封電子郵件。聊天可以繼續，電子郵件計數器也會增加。兩者都在同一頁面上，但不依賴於彼此（或以任何方式彼此等待）
6. 更新完成後，我們拿走微調器（通常使用css-toggle類顯示）和用新文本替換元素的值。

最後，如果您正在做這樣的事情，請確保您的服務器也支持向文本字段添加未處理的類（這將導致微調器出現）。這是由於以下原因

1. 用戶更新文本完成並提交
2. 用戶立即導航到不同的頁面
3. 用戶然後回來再原來的頁面（讓我們假設更新不但完整）
4. 由於您的服務器知道該字段正在更新，並且可以向標籤/顯示字段添加一個未決的css類，因此該頁面會加載一個微調器。（在另一方面，如果沒有掛起的請求會出現顯示任何微調）
5. 最後，當長輪詢消息來自服務器返回的微調被拿掉，當前值顯示