Chức năng tự động AJAX

Question

Thư viện javascript hoặc plugin hoặc tiện ích mở rộng tốt nhất cho thư viện, đã triển khai chức năng tự động lưu là gì?

Nhu cầu cụ thể là có thể 'lưu' lưới dữ liệu. Hãy nghĩ đến tính năng tự động lưu vào Gmail và Google Documents.

Tôi không muốn phát minh lại bánh xe nếu nó đã được phát minh. Tôi đang tìm một cài đặt hiện có của hàm autoSave() huyền diệu.

Tự động lưu: đẩy tới mã máy chủ lưu vào lưu trữ liên tục, thường là DB. Khung máy chủ mã nằm ngoài phạm vi của câu hỏi này.

Lưu ý rằng tôi không tìm kiếm thư viện Ajax, nhưng thư viện/khuôn khổ cao hơn một cấp: tương tác với chính biểu mẫu đó.

daemach giới thiệu triển khai trên đầu trang của jQuery @http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [lưu trữ tập lệnh xuống]. Tôi không tin rằng nó đáp ứng các tiêu chí nhẹ và được thiết kế tốt mặc dù.

Tiêu chuẩn

• ổn định, trọng lượng nhẹ, cũng thiết kế
• tiết kiệm onChange và/hoặc onBlur
• tiết kiệm không thường xuyên hơn sau đó một số lượng nhất định của mili giây
• xử lý nhiều thông tin cập nhật xảy ra tại cùng thời gian
• không lưu nếu không có thay đổi nào xảy ra kể từ lần lưu cuối cùng
• lưu vào các url khác nhau cho mỗi lớp đầu vào

Answer 1

Tự động lưu thực hiện khá đơn giản và bạn có thể sử dụng một trong các khung chính như jquery hoặc mootools. Tất cả những gì bạn cần làm là sử dụng window.setTimeout() khi người dùng của bạn chỉnh sửa nội dung nào đó cần được lưu tự động và có thời gian chờ đó gọi là các công cụ AJAX chuẩn AJAX.

Ví dụ (với 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

Tôi khuyên bạn nên sử dụng jQuery. Phần "tiết kiệm" vẫn phải được thực hiện trên backend, tất nhiên, nhưng jQuery làm cho việc gửi các yêu cầu AJAX một cách dễ dàng.

Nếu bạn có một ASP.NET phụ trợ, bạn chỉ có thể gọi một WebMethod và nộp chuỗi liên quan (nội dung của một textbox, vv) tại một thời điểm cụ thể:

[WebMethod] 
public void AutoSave(String autoSaveContent) 
{ 
// Save 
} 

Yêu cầu jQuery để gọi đây phương pháp sẽ là:

$.ajax({ 
type: "POST", 
contentType: "application/json; charset=utf-8", 
url: "AutoSaveService.asmx/AutoSave", 
data: "{textBoxToAutosaveText}", 
dataType: "json" 
}); 

Đó là tất cả. Bạn có thể tìm thấy jQuery tại http://jquery.com/.

Answer 3

Nếu bạn đang tìm kiếm đơn giản và nhẹ, tôi nghĩ rằng trọng lượng nhẹ nhất bạn có thể nhận được là sử dụng chức năng tích hợp sẵn của JavaScript setTimeout(). Sử dụng nó kết hợp với sự lựa chọn của bạn về khuôn khổ cho AJAX, và bạn tốt để đi.

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

Bạn có thể tiết kiệm một thời điểm định sẵn, bằng cách sử dụng thời gian chờ, nhưng, một phương pháp tốt hơn có thể là chỉ có một số loại onchange xử lý sự kiện, do đó khi dữ liệu được thay đổi, nếu bạn chưa lưu trong một khoảng thời gian đã đặt, sau đó lưu, nhưng không lưu vào mọi lần gõ phím.

Vì vậy, bạn hãy xem để xem lần cuối bạn lưu, trước khi gọi hàm ajax.

Điều này sẽ cho phép bạn chỉ lưu khi cần, nhưng với tốc độ được xác định trước. Vì vậy, nếu bạn muốn lưu mỗi 5 phút, sau đó bất kể những thay đổi đã được thực hiện, nếu một thay đổi được thực hiện trong cửa sổ 5 phút mà bạn lưu.

Thực hiện cuộc gọi ajax là không đáng kể, nhưng jQuery có thể đơn giản hóa nó. Thật không may, để có được những gì bạn muốn, từ những gì tôi đã thấy, bạn sẽ cần phải chỉ cần thực hiện chức năng của riêng bạn. Rất khó để làm theo cách tổng quát vì những người khác nhau có thể muốn lưu nếu chỉ một số trường nhất định được thay đổi. Vì vậy, chỉ vì tôi nhấp vào một hộp chọn có thể không dẫn đến chức năng lưu, nhưng thay đổi một cái gì đó trong một hộp văn bản có thể.

Answer 5

synchronize là jquery plugin thêm chức năng vào trang html của bạn để định kỳ tự động gửi đầu vào của người dùng quay lại máy chủ. (source code)

JavaScript và HTML mẫu:

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

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

kết quả yêu cầu ajax sau độ trễ mặc định là 1s:

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

Answer 6

Không phải là tất cả các bạn cần một bộ đếm thời gian mà bắn mỗi x giây? Hàm gọi lại sẽ thực hiện gửi lại AJAX tới máy chủ của biểu mẫu với trường "autosave = true" được thêm vào. Chỉ cần xử lý postback này trên máy chủ và bạn đã hoàn tất.

Answer 7

Đối với tự động lưu đơn giản các trường biểu mẫu trong cookie tôi sử dụng plugin tuyệt vời này http://rikrikrik.com/jquery/autosave/ Nó không gửi dữ liệu đến máy chủ, nhưng nếu bạn không tìm thấy bất cứ điều gì tốt hơn, thật dễ dàng để nâng cấp nó funcitonalily hơn làm điều đó từ đầu .

Answer 8

Tôi biết rằng câu hỏi này là cũ, nhưng tôi muốn bao gồm một mã mà tôi thích nhất. Tôi tìm thấy nó ở đây: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

Đây là mã:

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); 
}); 

Nó tiết kiệm sau khi người dùng ngừng viết cho hơn 750 mili giây.

Nó cũng có một tình trạng để cho người dùng biết rằng những thay đổi đã được lưu hay không