javascript - AJAX 自動保存機能

Question

自動保存機能を実装した、最適な JavaScript ライブラリ、ライブラリのプラグインまたは拡張機能は何ですか?

具体的に必要なのは、データグリッドを「保存」できることです。gmail と Google Documents の自動保存を考えてみてください。

車輪がすでに発明されている場合、車輪を再発明したくありません。魔法の autoSave() 関数の既存の実装を探しています。

自動保存: 永続ストレージ (通常は DB) に保存するサーバーコードへのプッシュ。サーバーコードフレームワークは、この質問の範囲外です。

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

daemach は、jQuery @ http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [スクリプトホストダウン]の上に実装を導入しました。ただし、軽量でよく設計された基準を満たしているとは確信していません。

基準

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

score 50 · Accepted Answer

自動保存は非常に簡単に実装でき、jquery や mootools などの主要なフレームワークの 1 つを使用できます。ユーザーが自動保存する必要があるものを編集したら、 window.setTimeout() を使用し、そのタイムアウトで javascript フレームワークの標準 AJAX を呼び出すだけです。

例 (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
    }
}

score 21 · Accepted Answer

この質問が古いことは承知していますが、私が最も気に入っているコードを含めたいと思います。ここで見つけました： 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 ミリ秒を超えて書き込みを停止すると、保存されます。

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

score 4 · Accepted Answer

タイムアウトを使用して設定した時間を節約することもできますが、データが変更されたときに一定時間内に保存していない場合は、onchange イベントハンドラーを使用することをお勧めします。保存しますが、キーストロークごとに保存しないでください。

したがって、ajax 関数を呼び出す前に、最後にいつ保存したかを確認します。

これにより、必要なときにのみ保存できますが、あらかじめ決められたレートで保存できます。したがって、5 分ごとに保存する場合は、どのような変更が行われたかに関係なく、その 5 分間のウィンドウ内で変更が行われた場合は保存します。

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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/にあります。

score 0 · Accepted Answer

シンプルで軽量なものをお探しなら、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.

score 0 · Accepted Answer

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

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

javascript - AJAX 自動保存機能

8 に答える 8

Related

Reference