Функциональные возможности автосохранение Аякс

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

конкретные нужно уметь сохранить таблицу данных. Подумайте об автосохранении документов gmail и Google.

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

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

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

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

критерии

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

8 ответов


автосохранение должно быть довольно простым в реализации, и вы можете использовать одну из основных фреймворков, таких как jquery или mootools. Все, что вам нужно сделать, это использовать окно.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 () {
    $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 миллисекунд.

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


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

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

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

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


для простого автосохранения полей формы в cookies я использую этот отличный плагин 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"
});  

вот и все. Вы можете найти примеры http://jquery.com/ .


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


синхронизация это плагин 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 после задержки по умолчанию 1s:

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

Если вы ищете простой и легкий, я думаю, что самый легкий вы можете получить с помощью встроенного JavaScript