7

インライン編集を使用して、データベース内のテキストをAJAXで更新しています。これは基本的にプロセスであり、ごく普通のことです。

  • テキストは編集できません
  • テキストをクリックすると、編集可能になります
  • 新しいテキストを入力します
  • 次に、クリックして更新されたテキストをデータベースに送信します
  • 次に、テキストを編集不可能な形式に戻します

私の質問は、いつ新しいデータでインターフェースを更新する必要があるかということです。ajax呼び出しの直前に更新する必要がありますか、それとも更新応答がデータベースから返されるのを待つ必要がありますか？

私の懸念：

  • インターフェースをすぐに更新せず、データベースからの応答を待つと、ajaxに付属する非同期の利点が失われます。
  • しかし、すぐに更新した場合、データベースの応答にエラーが発生した場合は、どういうわけか、すでに行った変更を追跡し、それを元に戻す必要があります。これは、はるかに手間がかかります。

では、この種のことは通常どのように行われるのでしょうか。

4

4 に答える 4

3

応答を待って、コールバックの結果として更新することは完全に合理的だと思います。そうしても、非同期アプローチが損なわれることはありません。ページ全体をブロックしたり、完全にリロードしたりしていないため、まだ完全に非同期です。

アプリ、特に帯域幅が制限されている可能性のあるモバイル アプリでは、多くの場合、フィールドが送信中であることを示すスピナーが表示されます。これは、アプリの他の部分を保持しません。モバイルビューを使用すると、スタックオーバーフローでさえこれを行います。非同期を維持し、データベースの戻り値に同期するには、コールバックに依存します。

于 2012-05-22T04:22:30.597 に答える
2

もちろん、ネットワークの問題を除いて、AJAX呼び出しは非常に高速です。個人的には、データベースからの応答を待つことで AJAX のメリットが失われることはないと思います。つまり、サーバー側の処理などのために遅くなる予定がない限り...

テキストフィールドを編集不可の状態に設定すると、ユーザーは自分の変更が受け入れられたと考え、サーバーがエラーを返し、値が元の状態に戻ったときに混乱する可能性があります。サーバーが戻るまで、フィールドを編集可能なままにします。

于 2012-05-22T04:16:25.387 に答える
0

あなたが言及したケースは、楽観的な UI の更新です。この場合、エラーなしでサーバー上で更新が実行されると (暗黙的に) 想定しています。

このアプローチの欠点は、次のシナリオにあります。

  1. ユーザーが編集不可能なテキストをクリックする
  2. テキストが編集可能になります
  3. 新しいテキストのユーザー タイプ
  4. ユーザーが送信をクリック
  5. UI が新しいテキストに変わり、編集できなくなります
  6. 返信が返される前に、ユーザーがブラウザ ウィンドウを閉じます (またはページから移動します) (変更が行われたと仮定します)。
  7. 次にユーザーがログインする (またはページに戻る) と、変更が適用されなかった理由について混乱します。

ただし、ajax の非同期の性質を使用して、この変更が実行されている間もユーザーがアプリ (またはページの残りの部分) を操作できるようにすることも必要です。

私たちが（私の職場で）それを行う方法は、通常、（ロングポーリングまたはhttpプッシュを使用して）

  1. ユーザーが編集不可能なテキストを操作する
  2. テキストが編集可能になります
  3. 新しいテキストのユーザー タイプ
  4. ユーザーが送信をクリック
  5. テキストを楽観的に更新する代わりに、サーバーからの何らかの応答を待っていることをユーザーに示すスピナー (テキストのみ) を表示します。このテキストを表示するページの一部のみを無効にしているため、ユーザーはページの残りの部分を操作するために ajax 呼び出しが戻るのを待つ必要がないことに注意してください。(実際、ページの複数の部分を並行して更新することをサポートする多くのケースがあります)。ブラウザ ウィンドウで誰かとチャットしているときに、同時にメールを受信する Gmail を考えてみてください。チャットを続けることができ、メール カウンターもインクリメントされます。両方とも同じページにありますが、互いに依存していません (または、何らかの方法で互いに待機しています)。
  6. 更新が完了すると、スピナー (通常は css - トグル クラスを使用して表示されます) を取り除き、要素の値を新しいテキストに置き換えます。

最後に、このようなことをしている場合は、サーバーが保留中のクラスをテキスト フィールドに追加することもサポートしていることを確認してください (スピナーが表示されます)。これは次の理由で行われます

  1. ユーザーがテキストを更新して送信する
  2. ユーザーはすぐに別のページに移動します
  3. その後、ユーザーは再び元のページに戻ります (更新がまだ完了していないと仮定します)。
  4. サーバーはフィールドが更新されていることを認識しており、保留中の css クラスをラベル/表示フィールドに追加できるため、スピナーがロードされたページが表示されます (一方、保留中のリクエストがない場合、スピナーは表示されません)。
  5. 最後に、長いポーラー メッセージがサーバーから返されると、スピナーが取り外され、現在の値が表示されます。
于 2012-06-06T17:45:15.257 に答える
0

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 呼び出しは非常に高速ですが、ページに表示されるデータを変更する前に、すべてが正常に行われたことを確認する必要があると思います。

于 2012-05-22T04:57:11.953 に答える