Using Java Script to pass data

Question

How can I pass data from client to server?

I have a very simple text editor created on a site and every few minutes or so I would like to send the information that has been typed in back to the server as a text file. I am trying to create an effect similar to the live type of googleWave.

Speed and efficiency isn't all that important at the moment. A quick and dirty way would be suffice.

Answer 1

Have a look at Ajax. Or at a Simple example.

From Wikipedia:

With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages.

Answer 2

You're going to want to use AJAX for this. Additionally, you would just need to start a JavaScript timer using setInterval, which would specify the delay between saves. When the interval delay is reached, an AJAX call would be made that would pass up the current value of the text editor.

Answer 3

The technology is called AJAX. Simply, AJAX enables you to make an HTTP request in javascript. When made asynchronously, the request is processed in background (in its own thread) and when finished, a callback function specified by you is executed.

While it is always good idea to know how things are done through the native browser API, javascript libraries such as popular jQuery save you plenty of lines of code. Sample code:

var editor = $('#editor');

/* Hijack regular form submission and send the data via AJAX
   by listening 'submit' event. */
editor.submit(function() {
    $.post(editor.attr('action'), editor.serialize(), function() {
        // code to be executed after successfull request
    });
    return false;
});

/* Auto-submit the form once per minute by firing 'submit' event. */
setInterval(function() {
    editor.submit();
}, 1000 * 60);

HTML:

<form id="editor" action="/path/to/your/save/handler" method="post">
    <fieldset>
        <textarea name="content" cols="70" rows="30"></textarea>
        <button type="submit">Save</button>
    </fieldset>
</form>

Answer 4

You could also look into writing the data into localStorage on a timer (if the browser supports it)