AJAX 자동 저장 기능

AJAX 자동 저장 기능

자동 저장 기능을 구현한 최고의 Javascript 라이브러리 또는 라이브러리에 대한 플러그인 또는 확장 기능은 무엇입니까?

특히 데이터 그리드를 '저장'할 수 있어야 합니다.gmail과 Google Documents의 자동 저장을 생각해 보세요.

바퀴가 이미 발명되었다면 재발명하고 싶지 않아요.magic auto Save() 함수의 기존 구현을 찾고 있습니다.

자동 저장: 영구 저장소(일반적으로 DB)에 저장하는 서버 코드에 푸시합니다.서버 코드 프레임워크는 이 질문의 대상이 아닙니다.

Ajax 라이브러리가 아니라 보다 높은 수준의 라이브러리/프레임워크를 찾고 있습니다: 폼 자체와 상호 작용합니다.

daemach는 jQuery @ http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html 위에 구현을 도입했습니다.[스크립트호스트 다운]가볍고 잘 만들어진 기준에 부합하는지 확신이 안 서네요.

기준

• 안정적이고, 가볍고, 잘 설계되어 있다
• onChange 및/또는 onBlur 저장
• 절약 빈도는 일정 시간(밀리초)보다 낮습니다.
• 동시에 발생하는 여러 업데이트를 처리합니다.
• 마지막 저장 후 변경이 없는 경우 저장되지 않습니다.
• 입력 클래스별로 다른 URL에 저장

자동 저장은 구현이 매우 간단하며 jquery나 mootool과 같은 주요 프레임워크 중 하나를 사용할 수 있습니다.사용자가 자동 저장해야 할 것을 편집한 후 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
    }
}

오래된 질문인 것은 알지만, 제가 가장 좋아하는 코드를 추가하고 싶습니다.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밀리초 이상 쓰기를 중지한 후 저장됩니다.

또한 변경 내용이 저장되었는지 여부를 사용자에게 알리는 상태도 있습니다.

타임아웃을 사용하여 설정 시간을 절약할 수 있지만, 더 좋은 방법은 데이터가 변경되었을 때 설정 시간 내에 저장되지 않은 경우 저장하되 모든 키 입력에 대해 절약하지 않는 것입니다.

마지막으로 저장한 시간을 확인한 후 ajax 함수를 호출합니다.

이렇게 하면 필요한 경우에만 미리 정해진 속도로 저장할 수 있습니다.따라서 5분마다 저장해야 하는 경우 변경 내용에 관계없이 5분 이내에 변경이 이루어진 경우 저장해야 합니다.

ajax 콜의 발신은 간단하지만 jQuery를 사용하면 간단하게 할 수 있습니다.유감스럽게도 원하는 것을 얻으려면 제가 본 바로는 자신만의 기능을 구현해야 합니다.특정 분야만 변경되면 다른 사람들이 저장하기를 원할 수 있기 때문에 일반적인 방법으로는 어렵다.따라서 선택 상자를 클릭하는 것만으로 저장 기능으로 연결되지 않을 수 있지만 텍스트 상자에서 내용을 변경하면 됩니다.

쿠키의 폼 필드의 간단한 자동 저장을 위해 이 훌륭한 플러그인 http://rikrikrik.com/jquery/autosave/을 사용합니다.데이터를 서버로 전송하지 않지만, 더 나은 것을 찾지 못하면 처음부터 업그레이드하는 것보다 더 쉽게 업그레이드할 수 있습니다.

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/ 에서 구할 수 있습니다.

x초마다 켜지는 타이머만 있으면 되는 거 아니야?콜백 함수는 "callback=true" 필드가 추가된 폼의 서버로 AJAX 포스트백을 수행합니다.서버에서 이 포스트백을 처리하기만 하면 됩니다.

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에된 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.

언급URL : https://stackoverflow.com/questions/931252/ajax-autosave-functionality