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 Int...
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.
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+" "
}
}
}
