Seitenwechsel mit Ajax und Live-Änderung der Seiten-URL im Browser

Wenn man eine Seite mit Ajax wechselt, steht man oft vor dem Problem, dass Benutzer dem tatsächlichen Link zur Seite nicht aufrufen können und sich im Prinzip vieles auf einer Seite abspielt.

Bei der Ajax-Technik ist es wichtig ein Fallback zu implementieren. Sprich: zuerst baut man den Seitenwechsel auf dem herkömmlichen Weg mit einem normalen Hyperlink auf und fängt diesen dann per JavaScript ab um den Inhalt der Seite dann mit einem netten Effekt nachzuladen.

Das könnte dann so aussehen:

$("a[rel='page']").click(function(e){
e.preventDefault();
 
$('#result').load('ajax-content.html', function() {
 window.history.pushState({path:'normaler-link.html'},'',normaler-link.html);
});
 
});