function renderNote(row) {
  // renders the note somewhere
}
function reportError(source, message) {
  // report error
}

function renderNotes() {
  db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)', 
      []);
    tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {
      for(var i = 0; i < rs.rows.length; i++) {
        renderNote(rs.rows[i]);
      }
    });
  });
}

function insertNote(title, text) {
  db.transaction(function(tx) {
    tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ],
      function(tx, rs) {
        // …
      },
      function(tx, error) {
        reportError('sql', error.message);
      });
  });
}
Download the image in the background so that when the user clicks on "image" the image will appear on the page instantaeously without having to go back to the server. With the small size of usable image, this could download in the backgroud several data objects without noticeable delay.

image three blind mice

Using the HttpRequest Object

Status: span id=A1

Status text: span id=A2

Response:
span id=A3

When you click here, the javascript program will upload the contents of an xml file (note.xml) onto the page in its designated area of the page. No small feat. Try it, click Get XML.
button onclick=loadXMLDoc('note.xml') Get XML button