試しに

#!shebang.jp : prototype.js をちゃんと使ってみる。 ここのeditable.jsをちょっといじってみました。画面表示時に事前に保存したデータを表示する機能を追加してみました。まあ、大したことをしてる訳ではないですけどね＾＾；
変更点は、initializeの中にデータロードを行うソースを付け加えただけです。
この変更より、cgi作るのに手間取ったのはナイショ。cgiがヘッダーを返さないとonSuccessハンドラが実行されないようです。cgi側のソースは割愛と。

var Editable = Class.create();

Editable.prototype = {
  initialize: function(text, url) {
    this.view = $(text);
    this.url = url;
    Element.show(this.view);
    this.editor = document.createElement('input');
    this.editor.type = "text";
    Element.hide(this.editor);
    this.view.parentNode.appendChild(this.editor);
    Event.observe(this.view, 'dblclick', this.showEditor.bindAsEventListener(this), false);
    Event.observe(this.editor, 'blur', this.editDone.bindAsEventListener(this), false);
    
    var parameters = encodeURIComponent(this.view.id)
    new Ajax.Request(this.url, {
      method: 'post',
      asynchronous: true,
      parameters: parameters,
      onLoading: function() {
        this.view.innerHTML = "now loading...";
      }.bind(this),
      
      onComplete: function(originalRequest) {
        this.view.innerHTML = originalRequest.responseText;
      }.bind(this)
    });
  },

  showEditor: function() {
    Position.clone(this.view, this.editor);
    this.editor.value = this.view.innerHTML;
    Element.toggle(this.view, this.editor);
    Field.focus(this.editor);
  },

  editDone: function() {
    Element.toggle(this.view, this.editor);
    var parameters = encodeURIComponent(this.view.id) + "=" + encodeURIComponent(this.editor.value);
    new Ajax.Request(this.url, {
      method: 'post',
      asynchronous: true,
      parameters: parameters,
      onLoading: function() {
        this.view.innerHTML = "saving...";
      }.bind(this),
      onSuccess: function() {
        this.view.innerHTML = this.editor.value;
      }.bind(this)
    });
  }
};