web-dev-qa-db-ja.com

AJAX自動保存機能

自動保存機能を実装しているjavascriptライブラリ、またはライブラリへのプラグインまたは拡張機能の中で最高のものは何ですか？

具体的なニーズは、データグリッドを「保存」できるようにすることです。 GmailとGoogleドキュメントの自動保存について考えてみましょう。

すでに発明されているホイールを再発明したくありません。魔法のautoSave（）関数の既存の実装を探しています。

自動保存：永続ストレージ（通常はDB）に保存するサーバーコードにプッシュします。サーバーコードフレームワークはこの質問の範囲外です。

私はAjaxライブラリーを探しているのではなく、より高いレベルのライブラリー/フレームワークを探していることに注意してください。フォーム自体と対話します。

daemachはjQuery @ http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [script Host down]の上に実装を導入しました。軽量でよく設計された基準を満たしているとは思いません。

基準

  • 安定した、軽量、よく設計された
  • onChangeおよび/またはonBlurを保存します
  • 一定のミリ秒よりも頻繁に節約することはありません
  • 同時に発生する複数の更新を処理する
  • 最後の保存以降に変更が発生していない場合は保存されません
  • 入力クラスごとに異なるURLに保存します
javascriptajaxsynchronize
28
antony.trupe

自動保存は実装がかなり簡単で、jqueryやmootoolsなどの主要なフレームワークのいずれかを使用できます。ユーザーが自動保存する必要のある何かを編集し、そのタイムアウトでJavaScriptフレームワーク標準AJAXのものを呼び出すようになったら、window.setTimeout（）を使用するだけです。

例（jqueryを使用）：

var autosaveOn = false;
function myAutosavedTextbox_onTextChanged()
{
    if (!autosaveOn)
    {
        autosaveOn = true;

        $('#myAutosavedTextbox').everyTime("300000", function(){
             $.ajax({
                 type: "POST",
                 url: "autosavecallbackurl",
                 data: "id=1",
                 success: function(msg) {
                     $('#autosavenotify').text(msg);
                 }
             });
        }); //closing tag
    }
}
47
jrista

私はこの質問が古いことを知っていますが、私が最も好きなコードを含めたいと思います。私はそれをここで見つけました： http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

これがコードです：

var $status = $('#status'),
    $commentBox = $('#commentBox'),
    timeoutId;

$commentBox.keypress(function () { // or keyup to detect backspaces
    $status.attr('class', 'pending').text('changes pending');

    // If a timer was already started, clear it.
    if (timeoutId) clearTimeout(timeoutId);

    // Set timer that will save comment when it fires.
    timeoutId = setTimeout(function () {
        // Make ajax call to save data.
        $status.attr('class', 'saved').text('changes saved');
    }, 750);
});

ユーザーが750ミリ秒以上書き込みを停止した後に保存されます。

また、変更が保存されたかどうかをユーザーに知らせるステータスもあります。

18
Claudio Shigueo Watanabe

タイムアウトを使用して設定時間を節約することもできますが、より良い方法は、ある種のonchangeイベントハンドラーを用意して、データが変更されたときに、設定時間内に保存しなかった場合に、保存しますが、キーストロークごとに保存しないでください。

そのため、ajax関数を呼び出す前に、最後に保存した日時を確認します。

これにより、必要な場合にのみ、所定のレートで保存することができます。したがって、5分ごとに保存したい場合は、何が変更されたかに関係なく、その5分のウィンドウ内で変更が行われた場合は保存します。

Ajax呼び出しを行うのは簡単ですが、jQueryはそれを簡略化できます。残念ながら、私が見たものから、あなたが望むものを得るためには、あなたはあなた自身の機能を実装する必要があるだけです。特定のフィールドのみが変更された場合、別の人が保存したい場合があるため、一般的な方法で行うことは困難です。したがって、選択ボックスをクリックしたからといって、保存機能につながらない可能性がありますが、テキストボックスで何かを変更すると、可能性があります。

3
James Black

Cookieのフォームフィールドの単純な自動保存には、この素晴らしいプラグインを使用します http://rikrikrik.com/jquery/autosave/ サーバーにデータを送信しませんが、何も見つからない場合ゼロからアップグレードするよりも、機能的にアップグレードする方が簡単です。

1
Antony Harder

X秒ごとに起動するタイマーがすべてではないですか？コールバック関数は、「autosave = true」フィールドが追加されたフォームのサーバーへのAJAX=ポストバックを実行します。サーバーでこのポストバックを処理するだけで完了です。

0
Naren

JQueryを使用することをお勧めします。もちろん、「保存」部分はバックエンドで実行する必要がありますが、jQueryはAJAXの送信を簡単に要求します。

ASP.NETバックエンドがある場合、WebMethodを呼び出して、指定された間隔で関連する文字列（テキストボックスのコンテンツなど）を送信できます。

[WebMethod]
public void AutoSave(String autoSaveContent)
{
 // Save
}

このメソッドを呼び出すjQueryリクエストは次のようになります。

$.ajax({  
type: "POST",  
contentType: "application/json; charset=utf-8",  
url: "AutoSaveService.asmx/AutoSave", 
data: "{textBoxToAutosaveText}",  
dataType: "json"
});

それで全部です。 jQueryは http://jquery.com/ にあります。

0
Alex

シンプルで軽量なものを探しているなら、JavaScriptの組み込みsetTimeout()関数を使用するのが最も軽量だと思います。選択したAJAXのフレームワークと組み合わせて使用​​すれば、問題ありません。

function autoSave()
{
  $.get(URL, DATA); // Use any AJAX code here for the actual autosaving. This is lightweight jQuery.
  setTimeout("autoSave()", 60000); // Autosaves every minute.
}
autoSave(); // Initiate the auto-saving.
0
James Skidmore

synchronize は jqueryプラグイン で、htmlページに機能を追加して、ユーザー入力を定期的に自動的にサーバーに送り返します。 （ ソースコード ）

JavaScriptとHTMLのサンプル：

<script>
  $("input").synchronize();
</script>

<input type="text" value="initial_value" 
       class="{url:'/entity.cfc?method=updateDescription',data:{ID1:'1',ID2:'2'}}" />

デフォルトの1秒の遅延後に生じるajaxリクエスト：

http://localhost/entity.cfc?method=updateDescription&value=update_value&preVal=initial_value&ID1=1&ID2=2
0
antony.trupe