Demo asynchroner AJAX Listview mit asynchroner Datenausgabe, Sortierung und Daten-Paging
Dieses Beispiel erfordert JavaScript und einen DOM-fähigen Browser, der das XMLHttpObject unterstützt (z.B. ab Internet Explorer 7.x, Firefox 2.x, Safari 3.x, Opera 8.5, Netsacpe 7.1).
Wenn Sie diese Meldung sehen können, ist in Ihrem Browser die Ausführung von JavaScript deaktiviert oder Ihr Browser unterstützt die o.g. Technologien nicht.
Anhand dieses über JavaScript erzeugten DHTML-Controls wird demonstriert, wie Daten asynchron vom Server geladen, und sukzessive als Datentabelle ausgegeben werden. Das Verhalten der Datenausgabe ähnelt dabei dem, einer an eine XML-Dateninsel gebundenen Tabelle im Internet Explorer, ist jedoch in einer allgemeinen Routine browserunabhängig implementiert.
Das asynchrone Laden und der asynchrone Aufbau der Datentabelle verhindern, dass nach einer erneuten Datenabfrage die gesamte Seite solange für Benutzereingaben blockiert wird, bis das Control komplett neu berechnet ist. Um dieses flüssige Benutzerverhalten besonders bei grösseren Datenmengen zu gewährleisten, werden zudem nur die Nutzdaten in Form eins XML-Dokumentes vom Server geladen, und das für die Datentabelle erforderliche HTML-Markup erst hier erzeugt und in das DOM der Seite eingefügt. Dies reduziert die Menge der zum Client übertragenen Daten deutlich. Da das gesamte Control aus DOM-Elementen besteht, können neben reinen Zeichendaten auch HTML-Fragmente in Datenzellen ausgegeben werden.
Die gesamte Logik des Controls ist auf den Server in eine ASP.NET-Seite verlagert, wo die Filterung, Sortierung und das Paging der Daten durchgeführt wird. Als Datenquelle dient für dieses Beispiel ein XML-Dokument mit 1.000 Datenelementen, das serverseitig über eine XSL-Transformation sortiert wird.
Da das Control in einer UTF-8 codierten Umgebung verwendet wird, können natürlich auch diverse Zeichensätze zusammen in einer Datentabelle dargestellt werden. Hier z.B. zusätzlich Kyrillisch und Japanisch.