Nachdem Applikationen wie zum Beispiel Ta-da List oder SoapBX XMLHttpRequest auf spannende Art und Weise verwenden, wollte auch ich das endlich versuchen. XMLHttpRequest erlaubt es, aus ECMA Script (Java Script) eine HTTP Abfrage zu starten und das Resultat derselben auch lesen zu können. Dies öffnet Tür und Tor für Rich Clients innerhalb der Web Browser. Ein grosser Vorreiter auf dem Gebiet ist GMail. Man kann gegen GMail haben, was man will, aber es ist so in etwa das "richeste" was ich in einem Browser unter Verwendung von HTML schon gesehen habe. Flash und Java sind für mich keine Alternativen.

Ich wollte nun eine kleine Todo-Liste bauen, welche XMLHttpRequest für schnelle Updates verwendet. Da nur Prototyp-mässig ohne wirklich gute Fehlerbehandlung und nur mit dem Firefox unter Linux getestet.

Der HTML Code im Body sieht wie folgt aus:

    

  • Eintrag eins
    •

Und das Java Script so:

var http;

/**


    

  • 

    Handler for the XMLHttpRequest used in submitTodo().
*/
function submitTodoHttpHandler() {
if (http.readyState == 4) {
// only if “OK”
if (http.status == 200) {
var todo_list = document.getElementById(’todos’);
var todo_input = document.getElementById(’todo_title’);
var id = http.responseText;
    

    var list_item =
todo_list.appendChild(document.createElement(’li’));
list_item.innerHTML = todo_input.value;
todo_input.value = ‘’;
todo_input.focus();
} else {
alert(“Could not execute the HTTP query. " +
http.statusText + " / " + http.status);
}
}
}
    

    • 



/**


    

  • This submits the todo item to the server. If everything works
    • 

  • alright, this returns false, so it can be used as an onSubmit
    • 

  • action handler. If there is a problem, it returns true thereby
    • 

  • triggering the usual form handler to save the item in the usual
    • 

  • way.
*/
function submitTodo() {
if(document.getElementById && window.XMLHttpRequest) {
title = document.getElementById(’todo_title’).value;
url = ‘/todo/create_js?title=’ + title;
http = new XMLHttpRequest();
http.onreadystatechange = submitTodoHttpHandler;
http.open(“GET”, url, true);
http.send(”");
return false;
} else {
return true;
}
}

Die Voraussetung ist dann, dass das Script /todo/create_js den Titel entgegennimmt, einen neuen Eintrag erstellt und die ID des Eintrags zurückliefert. Diese ID wird zwar momentan nicht verwendet, wird aber bei einer richtigen Applikation vonnöten sein um zum Beispiel den Edit Link zu erstellen.


Nun tippt man im Text-Feld einen Todo-Eintrag ein, bestätigt mit Enter (Form Submit muss ausgelöst werden, kann auch über einen Submit-Button gelöst werden) und der Eintrag wird ohne einen Page-Reload erstellt. Sobald der Eintrag fertig erstellt wurde, wird das Text-Feld geleert.


Habe nur kurz 30 Minuten daran gearbeitet, von daher ist das Script alles andere als perfekt. Richtige Anwendungen müssten noch mindestens folgenses implementieren, welches ich noch nicht gemacht habe:

  • Fehlerbehandlung
  • Eingabe-Feld sperren, während auf Server-Antwort gewartet wird
  • Umlaute und Spezialzeichen in der Eingabe dürfen keine Probleme verursachen