Ein interessantes Thema, das ich letztens für eine Seite brauchte, die komplett auf AJAX laufen sollte. Auf der Suche nach einer Lösung stieß ich fast auf jeder zweiten Seite auf ”geht nicht, aus Sicherheitsgründen”. Stimmt leider nur fast, denn Servername wie IP oder Domain lassen sich wirklich nicht ändern, sondern höchstens nur die Parameter und/oder Hash, aber das reicht uns ja.
Wofür die URL ändern?
Wichtig ist, dass jede Unterseite einer Homepage direkt aufgerufen werden kann z.B. über ein Lesezeichen, über einen Link auf einer anderen Homepage, den Browser Verlauf oder natürlich auch durch Suchmaschinen. Sollte eine Homepage jede Unterseite per AJAX anfordern, ist dieses nur temporär und lokal, also auf den aktuellen Besucher begrenzt und auch nur so lange er nicht die Seite neu lädt. Wir müssen also einen Weg finden und die URL ändern, sodass dieser Link auch direkt geöffnet werden kann.
Welche Möglichkeiten gibt es?
Die erste Möglichkeit, die wir momentan im “New Twitter” finden, ist Parameter in dem Hash einer URL zu parken wie twitter.com/#!/twitter/following, der sog. Hash-Hack. Alles nach dem Doppelkreuz (und Ausrufezeichen) sind Parameter. Die Idee mit dem Ausrufezeichen scheint wohl von Google zu kommen. Aber das kann auch nur Zufall sein, denn die Idee ist wirklich gut um Querverweise und Parameter zu unterscheiden.
Wird eine URL aufgerufen, dann läuft diese zunächst durch den Parser einer Homepage und diese lädt dann aus den Parametern die entsprechende Unterseite, etc. Und jede URL, die bis zum Hash wert gleich ist, wird von Browsern grundsätzlich nicht neu geladen – das ist der Trick.
Also ganz normal mit HTML Ankern, oder Javascript:
<a href="#!/var1/var2/">Foolink</a> <span onclick="window.location.hash='!/var1/var2/';">Foolink2</span> <!-- Achtung, hier kein Doppelkreuz! -->
Nützlich hierfür ist das jQuery Plugin “BBQ” von Ben Alman.
Möglichkeit zwei ist momentan nur HTML5-fähigen Browsern vorbehalten. Benutzt wird dieses schon auf Facebook und sollte der Browser nicht HTML5 fähig sein, springt wieder der Hash-Hack ein. Dieser Code setzt eine neue Seite in der Browser History:
window.history.pushState(new Object(), "Titel", "/neue-url");
Für uns interessant ist hier der letzte Parameter, hier kommt nämlich die neue URL ins Spiel. Paramter #2 ist nicht der Seitentitel, wie man vielleicht vermuten mag, sondern soll – laut w3 – nur den momentanen Status beschreiben. Der erste Parameter ist eine eindeutige Zuweisung und kann ein Object, int, string etc sein.
w3 gibt hier ein sehr gutes gutes Beispiel, wie man auch gleichzeitig den Titel ändert:
<!DOCTYPE HTML>
<!-- this starts off as http://example.com/line?x=5 -->
<title>Line Game - 5</title>
<p>You are at coordinate <span id="coord">5</span> on the line.</p>
<p>
<a href="?x=6" onclick="go(1)">Advance to 6</a> or
<a href="?x=4" onclick="go(-1)">retreat to 4</a>?
</p>
<script>
var currentPage = 5; // prefilled by server
function go(d) {
history.pushState(currentPage, 'Line Game - ' + currentPage, '?x=' + currentPage);
setupPage(currentPage + d);
}
onpopstate = function(event) {
setupPage(event.state);
}
function setupPage(page) {
currentPage = page;
document.title = 'Line Game - ' + currentPage;
document.getElementById('coord').textContent = currentPage;
document.links[0].href = '?x=' + (currentPage+1);
document.links[0].textContent = 'Advance to ' + (currentPage+1);
document.links[1].href = '?x=' + (currentPage-1);
document.links[1].textContent = 'retreat to ' + (currentPage-1);
}
</script>
Demnächst werde ich noch einen Artikel schreiben, wo ich das ganze weiter ausführe und eine Seite komplett auf AJAX erstelle, denn es gibt noch mehr Dinge zu beachten: Was wenn ein Browser mal kein Javascript unterstützt…?
to be continued, mfG Henning
[...] [...]
Supi, hat mir echt weitergeholfen.
Nun ist der Artikel schon was älter … gibt’s jetzt einen Artikel wie im letzten Satz beschrieben?
Hallo Niklas,
nein, den gibt es noch nicht. Ich weiß, dass ich zwischendurch damit angefangen habe. Bisher habe ich darüber aber keinen Artikel erstellt.
Ich würde dir ja jetzt gerne einen Link geben, aber bei Google habe ich jetzt nichts vergleichbares gefunden.
Bleib am Ball, ich werde sicher noch einen Artikel dazu verfassen!
mfG Henning
Hallo Henning,
guter Artikel da habe ich wieder etwas gelernt
Kannst du mir sagen ob/wie es möglich ist den über
Foolinkangehängten Parameter wieder auszulesen. Über PHP dürfte es ja nicht möglich sein, weil die Seite nicht neu geladen wird und mit JavaScript kenne ich mich nicht genug aus.Wäre nett wenn du mir ein wenig weiterhelfen könntest
Viele Grüße
Alex
Hallo Alex,
die Parameter kannst du nach der Übergabe in die URL wieder auslesen mit “window.location.hash”. Allerdings ist dort alles nach der Raute gespeichert.
Die Parameter musst du selbst in seine Einzelteile zerlegen, sprich: Das Ausrufezeichen löschen und den String an allen Slashes teilen.
Dies ist nur mit Javascript möglich, der Hash wird nie mit zum Server übertragen.
mfG Henning
vielleicht kann es ja jemand gebrauchen:
Javascript
$(document).ready(function () {
if (window.location.hash == '') {
window.location.hash = '!/home/';
}
$.history.init(pageload);
});
function pageload(hash) {
if (hash) getPage();
}
function getPage() {
$('.loading').show();
var usedHashA = window.location.hash;
var usedHashB = usedHashA.substr(3, usedHashA.length);
var usedHashC = usedHashB.substr(0, usedHashB.length - 1);
$.ajax({
url: "loader.php",
type: "GET",
data: 'data='+usedHashC,
cache: false,
success: function (html) {
$('.loading').hide();
$('#loadercontent').html(html);
$('#loadercontent').fadeIn(100);
}
});
}
Mit diesem Script wird der aktuelle Hash ausgelesen und per ajax an die datei loader.php gesendet.
dort kann man dann per $_GET die datein auslesen z.B mit explode(‘/’, $_GET['data']);
So hat man alle werte die übergeben werden.
Der Content wird dann in ein z.B DIV geladen
zusätzlich wird bei jedem seitenaufruf noch die .loading aufgerufen womit z.B ein ladebalken angezeigt werden kann.
Benötigt wird Jquery und das History Plugin von hier:
http://tkyk.github.com/jquery-history-plugin/
Viel Spaß damit und Grüße aus Österreich.
Besten Dank für die Erläuterungen! Hat mir wahrscheinlich viel Zeit erspart bei einem anderen Problem!