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

<li id="eins">Erster Listenpunkt</li>
<li id="zwei">Zweiter Listenpunkt</li>
<li id="drei">Dritter Listenpunkt</li>

2

Den Inhalt dieser Datei werden Sie gleich per jQuery nachladen. Fügen Sie dazu fol-
gende Zeile in Ihren jQuery-Codeblock ein:

$('button').on('click', function(){
$('#ergebnis').load('./beispiel.html');
});

Wenn Sie nun auf den Button klicken, wird jQuery eine http-Verbindung zum Web-
server herstellen, die Datei beispiel.html herunterladen und deren Inhalt in das Ele-
ment #ergebnis einfügen (Abbildung 2.28). Dies geschieht mit der Methode .load() ,
der Sie lediglich den Namen der zu ladenden Datei übergeben müssen.

Abbildung 2.28 Das Ergebnis der AJAX-Abfrage im Browser

Mit dieser Methode ist es außerdem möglich, nur Teile einer Datei in Ihr Dokument
einzufügen. Fügen Sie dazu direkt nach dem Dateinamen ein Leerzeichen und die id
des entsprechenden Bereichs an:

$('#ergebnis').load('./beispiel.html #zwei');

jQuery fügt nun lediglich den zweiten Listenpunkt in ihr Dokument ein (Abbildung
2.29).

Abbildung 2.29 Mit jQuery lassen sich auch Teile des Abrageergebnisses ausgeben.