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

Cover Internet Magazin 6/2010
Praxis-Knowhow für Web-Profis

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: Wordpress als CMS einsetzen: Stabil, ausgereift,…
Inhaltsverzeichnis Internet Magazin 7/2010
Praxis-Knowhow für Web-Profis

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: HTML5 & CSS3 schon jetzt: Alle neuen Features ohne…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen eine mobile Webseite oder App erstellen? jQuery Mobile bietet Funktionen und Optik, die für die mobile Nutzung unverzichtbar sind. Zudem…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihre mobile Webseite übersichtlich gestalten? Wir zeigen Ihnen, wie Sie mit jQuery Mobile ganz einfach Listen, Buttons und eine…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihrer mobilen Webseite ein individuelles Aussehen geben oder beim Laden der Seite eine Meldung anzeigen lassen? Wir zeigen Ihnen, wie Sie…