AJAX Функция автосохранения

Question

Какая библиотека javascript, или плагин, или расширение для библиотеки, которая реализовала функции автосохранения?

Конкретная необходимость заключается в том, чтобы иметь возможность «сохранять» сетку данных. Подумайте об автосохранении gmail и Google Documents.

Я не хочу изобретать велосипед, если его уже изобрели. Я ищу существующую реализацию магической функции автосохранения().

Автосохранение: нажатие на код сервера, который сохраняет постоянное хранилище, обычно это БД. Структура кода сервера выходит за рамки этого вопроса.

Обратите внимание, что я не ищу библиотеку Ajax, но библиотека/фреймворк выше уровня: взаимодействует с самой формой.

daemach представил реализацию поверх jQuery @http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [script host down]. Я не уверен, что он соответствует легким и хорошо спроектированным критериям.

Критерии

• стабильный, легкий, хорошо проектируемых
• сохраняет OnChange и/или ONBLUR
• экономит не чаще, чем заданное число миллисекунд
• обрабатывает множественные обновления, происходящие на то же время
• не сохраняет, если никаких изменений не произошло с момента последнего сохранения
• Сохраняет разные URL-адреса для каждого класса ввода

Answer 1

автосохранение должно быть довольно просто реализовать, и вы можете использовать один из основных структур, таких как JQuery или MooTools. Все, что вам нужно сделать, это использовать window.setTimeout(), когда ваш пользователь редактирует что-то, что должно быть автосохранено, и этот таймаут вызывается стандартными файлами AJAX фреймворков javascript.

Например (с 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 
    } 
} 

Answer 2

Я предлагаю вам использовать 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/.

Answer 3

Если вы ищете простой и легкий, я думаю, что самый легкий, который вы можете получить, это встроенная функция 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. 

Answer 4

Вы можете сэкономить на заданное время, с помощью тайм-аут, но, лучший метод может быть просто какой-то OnChange обработчика событий, так что, когда данные изменяются, если вы не сохранили в течение установленного промежутка времени, затем сохраните, но не сохраняйте при каждом нажатии клавиши.

Итак, перед тем, как вызвать функцию ajax, вы увидите, когда вы последний раз сохранили ее.

Это позволит вам сохранить только при необходимости, но с заданной скоростью. Итак, если вы хотите сэкономить каждые 5 минут, то независимо от того, какие изменения были внесены, если в течение 5-минутного окна вы сохранили изменения.

Выполнение вызова ajax тривиально, но jQuery может упростить его. К сожалению, чтобы получить то, что вы хотите, из того, что я видел, вам нужно будет просто реализовать свою собственную функциональность. Это сложно сделать в общем, так как разные люди могут захотеть сэкономить, если изменились только определенные поля. Таким образом, только потому, что я нажимаю на поле выбора, может не привести к функции сохранения, но может измениться что-то в текстовом поле.

Answer 5

synchronize - это jquery plugin, который добавляет функциональность вашей странице html, чтобы периодически автоматически отправлять запросы пользователя на сервер. (source code)

JavaScript и HTML пример:

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

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

полученный запрос Аякса после задержки по умолчанию 1s:

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

Answer 6

Не все, что вам понадобится таймер, который стреляет каждые х секунд? Функция обратного вызова выполняет обратную передачу AJAX на сервер формы с добавленным полем «autosave = true». Просто обработайте эту обратную передачу на сервере, и все готово.

Answer 7

Для простого автосохранения полой формы в печенье я использую этот большой плагин http://rikrikrik.com/jquery/autosave/ Она не отправляет данные на сервер, но если вы не нашли ничего лучше, проще обновить его funcitonalily, чем делать это с нуля ,

Answer 8

Я знаю, что этот вопрос старый, но я хотел бы включить код, который мне больше всего нравится. Я нашел его здесь: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

Вот код:

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

$commentBox.keypress(function() { 
    $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 миллисекунд.

Он также имеет статус давая пользователю знать, что изменения были сохранены или не