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

Question

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

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

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

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

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

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

Критерии

• стабильный, легкий, хорошо спроектированный
• сохраняет при изменении и / или при размытии
• сохраняет не чаще, чем заданное количество миллисекунд
• обрабатывает несколько обновлений, происходящих одновременно
• не сохраняет, если с момента последнего сохранения не произошло никаких изменений
• сохраняет в разные 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

Я знаю, что этот вопрос старый, но я хотел бы включить код, который мне нравится больше всего. Я нашел это здесь: 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 миллисекунд.

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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'}}" />

результирующий запрос Ajax после задержки по умолчанию, равной 1 с:

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

Answer 7

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

Я бы посоветовал вам использовать 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/.