Einfach dynamisch

Teil 7: Tipps & Tricks für Ajax

Inhalte austauschen

Zum Abschluss zeigen wir Ihnen noch, wie Sie nicht nur eine Menüstruktur dynamisch gestalten können, sondern auch Inhalte wechseln, ohne die Seite neu aufzubauen oder ein Iframe einzusetzen.

Die HTML-Seite gestaltet sich wieder wie gewohnt sehr übersichtlich: Neben der Integration einer Javascript- und einer CSS-Datei werden drei Links generiert und ein weiterer Bereich für die Inhalte zur Verfügung gestellt.

<?
break;
case "11":
?><?php
$sql="SELECT * FROM spieler WHERE
Zuordnung = '11'";
$erg = mysql_query($sql);
while($inf = mysql_fetch_
array($erg)){
echo "<li class=\"dhtmlgoodies_sheet.
gif\"><a href=\"#\">".$inf["Vorname"]." ".$inf["Nachname"]."</a></li>";
}
?>

Beim Aufruf der Funktion createPage() wird eine URL auf die anzuzeigende Datei mitgegeben sowie der Bereich, in welchem die Inhalte dargestellt werden sollen. Sie können nicht nur lokale Dateien aufrufen sondern auch auf extern gespeicherte Seiten verlinken.

Nachdem wie gewohnt eine Überprüfung auf XML-/Ajax-Kompatibilität stattgefunden hat, wird über die folgende Funktion loadpage() die externe HTML-Seite geladen.

function loadpage(xmlHttp,
containerid){
if (xmlHttp.readyState == 4 &&
(xmlHttp.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).
innerHTML=xmlHttp.responseText
}

Dabei wird überprüft, ob das Laden der lokalen Datei fertig ist und ob in diesem Fall auch die URL vorhanden ist (xmlHttp.status==200) oder ob es sich um eine externe Http-Anfrage handelt. In beiden Fällen wird der Inhalt der Seite im rechten Bereich der Seite dargestellt, bei dem die Identifikation über die Container-ID stattfand.

Ajax: Tipps & Tricks

© Archiv

Eine dynamische Navigation auf Basis von Datenbankeinträgen: Ajax macht es einfach.

Sie können jede externe Seite auch über zentrale CSS- und Javascript-Dateien versorgen. Da sich innerhalb der Spielerdateien keine vollständige HTML-Seite befindet, sollten Sie aber einen anderen Weg gehen, die Zusatzdaten zu implementieren.

Es steht Ihnen innerhalb der zentralen JavasScript- Datei eine Funktion loadobj() zur Verfügung, welche ergänzend bei der Definition der einzelnen Seiten integriert und aufgerufen werden kann.

<a href="javascript:createPage
('source/toni.htm', 'SpalteRechts' ); loadobjs('fussballer.css', 'fussballer.js');">Luca Toni</a>

Die Funktion loadobjs() beinhaltet folgende Funktionen:

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (geladeneObj.indexOf(file)==-1){
if (file.indexOf(".js")!=-1){
fileref=document.createElement
('script')
fileref.setAttribute("type",
"text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){
fileref=document.createElement("link")
fileref.setAttribute("rel",
"stylesheet");
fileref.setAttribute("type",
"text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head")
.item(0).appendChild(fileref)
geladeneObj+=file+" "
}
}
}

Mehr zum Thema

Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Amazon Blitzangebote
Technik-Deals

Die Highlights der Amazon Blitzangebote - heute mit Weihnachts-Angebote-Woche, Netgear-NAS, 57 Prozent auf Heimkino-Produkte und mehr.
Tipps zum leisen PC
Tipps und Tricks

Die Komponenten eines PCs erzeugen Hitze. Lüfter sorgen meist für eine lästige Geräuschkulisse. Mit unseren Tricks wird Ihr PC flüsterleise.
SSD Mythen Tipps
Solid State Disk

SSD-Tuning - was ist wahr, was ist falsch? Wir verraten, welche SSD-Mythen Sie vergessen können und welche Tipps wirklich helfen.
Urlaubsbilder
Fotografieren im Sommer

Von Sommerlicht bis Sonnernuntergang: Unsere 7 Tipps verraten, wie Sie Urlaubsfotos richtig machen und schöne Bilder mit nachhause bringen.