How to implement autosave for a web application

I have a web page that contains a table wherein you can edit every cell content. Typical size of this table is about 12 columns and 40 rows. This page is typically used by teachers to encode grades here in our area. But our area sometimes has poor connection, and what happens is sometimes, teachers would lose the encoding they did (they typically only save after encoding everything).

So right now, I am thinking of implementing an autosave feature. I think the solution I'm thinking is straight-forward: every time a cell gets edited and then loses focus, do an ajax request to save the data. At least that's what I'm thinking.

My concern is since there's a lot of people using this at the same time, wouldn't that be too heavy, every edit, access the DB and insert or update? And also, i've tried it a bit and the UI became a bit choppy when moving from one cell to another. My main question basically is, is there a pattern or guidelines I can use for implementing this?