HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 67

var button = document.createElement('button');
var text = document.createTextNode('Klick mich!');
button.appendChild(text);
document.getElementsByTagName('h1')[0].appendChild(button);

2

Abbildung 2.25 Ausgabe im Browser

Zunächst legen Sie ein Button-Element und ein Textelement an. Der Textknoten
wird an das Button-Element angefügt. Anschließend ermitteln Sie mit getElements-
ByTagName()[0] das erste Auftreten des h1 -Elements im Dokumentenbaum und fügen
das soeben erstellte Button-Element daran an. Sie benötigen also vier Zeilen Java-
Script-Code, um ein HTML-Element zu erzeugen. Ganz schön viel, oder? Wie Sie dies
mit weniger Code erledigen, werden Sie im Verlauf dieses Kapitels lernen.

Zunächst aber zur Verwendung von AJAX. AJAX steht für A synchronous J avaScript
A nd X ML und ermöglicht es, neue Daten vom Server nachzuladen, ohne die kom-
plette Webseite neu aufzubauen. Eine einfache Anfrage an den Server benötigt etwa
13 Zeilen Code:

var xmlHttp = null;
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
xmlHttp = null;
}
if (xmlHttp) {
xmlHttp.open('GET', 'beispiel.html', true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
}
};
xmlHttp.send(null);
}

Listing 2.15 Das Nachladen von Daten mit AJAX