Ein Blick auf die Facebook-Javascript-Navigation10 Mrz

AJAX ist keine neue Technologie, aber in den letzten Jahren hat sie deutlich an Popularität gewonnen. Durch den Einsatz von asynchronen Requests an den Server ist es möglich unnötig viel Traffic zu sparen – und zwar immens viel unnötigen Traffic. Ein AJAX-Request kann sich auf die wichtigen Dinge einer Seitenänderung konzentrieren, beispielsweise das Laden eines neuen Inhalts oder der Wechsel eines Bildes. Und das alles ohne die gesamte Seite selbst neu zu laden. Das kann schon einiges an Bildern oder Berechnungen sparen.
Allerdings gibt es auch Javascript-Kritiker. Die Sprache sei alt, zum Teil unsicher oder nicht barrierefrei. Vor allem das letzte Argument ist für viele ausschlaggebend, für ihre Seiten kein Javascript zu verwenden. Eine Navigation mit AJAX hätte nämlich auch Nachteile – wenn man es nicht richtig anwendet.

Facebook - Startseite

Die Lösung

Bei aktiviertem Javascript werden also Links verändert und AJAX-Requests ermöglicht. Deaktiviertes Javascript soll die Navigation aber nicht unmöglich machen, so dass man nun die gewohnten Links erhält und auf stets eine neue Seite weitergeleitet wird.
Mit jQuery ist das eigentlich ein Kinderspiel:

jQuery(function($) {
 
  $("a").click(function() {
    return false;
  });
});

Mit $(“a”) greift jQuery auf alle Links im Quelltext zu. Die Funktion click() erwartet eine Funktion (die das durchführt, was bei einem Klick auf einen Link geschehen soll) und gibt einen boolschen Wert zurück. Dieser entscheidet darüber, ob die Seite nach dem Klick neu geladen werden soll oder nicht. Man sieht hier schon: an dieser Stelle wäre ein AJAX-Request möglich und return false; sorgt dafür, dass es kein Neuladen der Seite gibt. $(“a”) ist selbstverständlich auf Links mit speziellen Klassen einschränkbar, so dass nur ausgewählte Links ein AJAX-Request durchführen, die anderen dagegen können weiterhin eine normale Navigation ermöglichen: $(“a.ajax”).

AJAX-Requests sind mit jQuery auch kein Problem mehr:

jQuery(function($) {
 
  $("a").click(function() {
  $.ajax({
    url: "get.php",
    data: {get: $(this).attr("hash").substr(1)},
    type: "GET",
    dataType: "HTML",
    success: function(content) {
      $("div#content").hide().html(content).fadeIn();
    },
    error: function() {
      alert("Ajax request failed.");
    }
  });
 
    return false;
  });
});

Im ersten Moment vielleicht etwas überwältigend, aber bei einem genaueren Blick ist die Funktion doch sehr gut durchdacht: Die URL gibt an, an welche Adresse der Request gesendet werden soll. In diesem Fall habe ich die Datei “get.php” genannt. In dieser soll mit Hilfe eines Parameters der Inhalt beispielsweise aus einer Datenbank gelesen und ausgegeben werden. Wenn das geklappt hat, dann wird die Funktion unter success aufgerufen. Diese erhält das Ergebnis der aufgerufenen Seite als Parameter. Die Funktion fügt das Ganze dann schön in eine div-Box mit der Id content ein, wobei die Box erst unsichtbar, dann der Inhalt eingefügt und schließlich die Box wieder angezeigt wird. Im Falle eines Fehlers werden wir über eine Alert-Box informiert.

So weit so gut. Die Benutzer mit deaktiviertem Javascript haben kein Problem, denn die jeweiligen Links können ja stets auf die richtige Seite verweisen. Allerdings können Benutzer mit aktiviertem Javascript ihre Links nicht an Freunde weitergeben, denn in der URL-Zeile steht nun ja kein Link mehr – alles wurde asynchron abgewickelt. Ich habe bewusst die Zeile “data: {get: $(this).attr(“hash”).substr(1)},” noch nicht erwähnt. Der AJAX-Request läuft nämlich über den aktuellen Anker der Seite. jQuery gibt uns den Anker über attr(“hash”) zurück. Außerdem können wir diesen auch modifizieren. Wieso also nicht alle Links über solche Hashs definieren. Unser Link sieht folgendermaßen aus: index.php?get=news#news. Der Benutzer ohne aktiviertes Javascript wird also auf eine gewöhnliche Seite mit einem Anker weitergeleitet. Dagegen lädt der Benutzer mit aktiviertem Javascript über den Anker “#news” get.php?get=news und erhält aber keine neue URL. Dies können wir nun aber noch ganz einfach ändern:

jQuery(function($) {
 
  $("a").click(function() {
  $.ajax({
    url: "get.php",
    data: {get: $(this).attr("hash").substr(1)},
    type: "GET",
    dataType: "HTML",
    success: function(content) {
      $("div#content").hide().html(content).fadeIn();
    },
    error: function() {
      alert("Ajax request failed.");
    }
  });
 
    $(location).attr("hash", $(this).attr("hash"));
 
    return false;
  });
});

Damit wird der aktuelle Anker verändert und der Link ist aktuell, so dass ihn ein Benutzer Freunden weitergeben kann. Allerdings passiert beim Laden dieses Links noch nichts. Zu Beginn muss also auch so getan werden, als wäre ein Klick ausgeführt worden:

jQuery(function($) {
  if($(location).attr("hash")){
    $("a[hash="+$(location).attr("hash")+"]").click();
  }
});

Sieht auch wieder komplizierter aus, als es ist: Es wird ganz einfach ein Klick auf das Linkelement ausgeführt, das den selben Anker, wie der aktuell aufgerufene Link besitzt. Damit kommen wir wieder zum AJAX-Request und die Seite wird korrekt geladen.

Man kann damit natürlich noch viel mehr rumspielen – Links in verschiedene Bereiche aufteilen, mehrere AJAX-Requests je nach Typ durchführen usw usf. Mit Javascript (jQuery!) sind beinahe keine Grenzen gesetzt!

2 Kommentare zu "Ein Blick auf die Facebook-Javascript-Navigation"

1. Alex B. sagt:

   10. März 2010 um 16:28

   Sehr schöner Beitrag!
   Eine Sache hätte ich da noch: Die Aktion (beim Klick) mit einem “return false” zu unterdrücken ist nicht immer gut. jQuery bietet da auch noch eine Andere Möglichkeit.

   $("a").click(function(event) {
     event.preventDefault();
   }
2. Julian sagt:

   10. März 2010 um 19:09

   Ah, sehr praktisch. Das kannte ich in dem Zusammenhang noch gar nicht, vielen Dank!