Gilles
Blogger
Ich werde das noch ein wenig weiter beschreiben :)Um serverseitig zu unterscheiden, welche antwort kommen soll.
Du erwartest ja den gleichen Inhalt wie bei dem normalen Seitenaufruf mit der Ausnahme, dass du von solch einem Quelltext wie dem folgendem....
HTML:
<html>
<head><title>Bla</title></head>
<body>
<h1>Meine Seite</h1>
<ul id="navigation"><li>News</li><li>Kontakt</li></ul>
<div id="content">
<h2>News</h2>
<p>Super Neuigkeiten</p>
</div>
</body>
</html>
... dann nur noch bei Ajax diesen teil brauchst
HTML:
<h2>News</h2>
<p>Super Neuigkeiten</p>
Und das rausfiltern der Überflüssigen informationen würde ich an deiner Stelle dann per PHP machen.
Deine Seite könnte dann so aussehen
HTML:
<?php
if($_GET['ajax'] != "true") {
?>
<html>
<head><title>Bla</title></head>
<body>
<h1>Meine Seite</h1>
<ul id="navigation"><li>News</li><li>Kontakt</li></ul>
<div id="content">
<?php
}
?>
<h2>News</h2>
<p>Super Neuigkeiten</p>
<?php
if($_GET['ajax'] != "true") {
?>
</div>
</body>
</html>
<?php
}
?>
Was JS Frameworks angeht, so erleichtern diese dir wirklich das Leben. Besonders was Ajax angeht. Bei deinem Vorhaben würde sich der Einsatz schon lohnen.
Die Schreibweise mit onclick gefällt mir persönlich ja nicht so gut, da JS Code in deinen HTML-Elementen stehen hast. Ich bevorzuge die Elemente von außen anusprechen.
Dafür gibst du deinen Elementen nur ein Indiez zum zuordnen wie einen Klassennamen. Zum Beispiel:
HTML:
<a href="index.php?page=news" class="ajaxLink">News</a>
Nehmen wir an du benutzt nun jQuery als Javascript Framework. So sähe dein JS so aus.
Code:
$(".ajaxLink").click(loadSite);
function loadSite() {
// this bezieht sich auf das Link-Element
$.ajax({
url: this.href,
data: "ajax=true",
success: function(result){
alert(result);
}
});
}
Wenn du Fragen zur Umsetzung hast kannst du diese gerne stellen