Javascript Refresh

Ein Javascript Refresh ist eine des Basisfunktionen die jeder Webentwickler können muss. Als Entwickler sucht man immer wieder über Suchmaschinen nach solchen Code Schnipsel. Ich habe mir aus aktuellem Anlass angesehen wie man unter Javascript einen Page Reload durchführt und wie sich die Technik in den letzten Jahren verändert hat.

Javascript Refresh

Ein einfacher Javascript Refresh einer Webseite funktioniert so:

location.reload();

Die reload Funktion lädt das DOM Dokument neu. Technisch gesehen ist das die selbe Funktion wie der Reload Button im Browser. Das bedeutet es wird im Browser die Seite komplett neu geladen. Es werden keine Formulardaten an den Server geschickt. Diese Funktion wird von allen modernen Browsern unterstützt und kann mit einem Parameter aufgerufen werden:

• true
  die Seite wird neu vom Server aufgerufen. Der Seitenaufbau ist damit langsamer, dafür hat man garantiert die aktuellen Daten.
• false
  die Seite wird aus dem Cache neu aufgerufen. Je nach Einstellungen werden so Ressourcen vom lokalen Cache geholt, der Seitenaufbau ist viel schneller.

Geschichte

Der Javascript Refresh hat auch eine Geschichte. Die Funktion gibt es erst seit Javascript 1.2, davor konnte man die selbe Funktion mit:

window.location.href = "http://example.com";

erreichen. Diese Funktion gab es in Version 1.0, welche auch einen Eintrag in der History erzeugte. Damit konnte man etwas unüblich mit der Zurück Taste des Browsers die selbe Seite neu laden.

window.location.replace("http://example.com");

In Version 1.1 wurde dieses Verhalten geändert und die selbe Seite wurde in der History nicht mehr abgelegt.

jQuery

Auch bei der Verwendung von jQuery ist die Sache nicht anders. jQuery bietet keine zusätzliche Funktion zum aktualisieren einer Webseite an. Man kann einen Eventhandler an ein DOM Element mit der ID „elementid“ folgendermaßen definieren:

$('#elementid').click(function(){
    location.reload();
});

Klickt man mir der Maustaste oder über ein Touch Gerät dieses Element an wird der Event und damit der Neuaufbau der Seite ausgeführt.

Ajax

Der Reload der kompletten Webseite (also ein neuer Request an den Server) ist eigentlich ein Relikt aus der Frühzeit des Webs. Moderne Technologien wie Ajax ermöglichen es Seiten zu erstellen die nie vollständig neu geladen werden müssen. Gute Entwickler setzen vermehrt auf diese Technik, da dadurch der Traffic zum Server geringer wird und die Benutzererfahrung auf der Webseite durch schnellere Reaktionszeit verbessert wird.

Fazit

In diesem Basisartikel zum Javascript Refresh habe ich mich intensiv mit der Frage beschäftigt, wie man eine Webseite durch Javascript neu lädt. Obwohl die Funktion sehr einfach ist können viele Webentwickler diese nicht. Vor allem die Parameter zur Steuerung ob die Seite aus dem Cache geladen wird oder nicht wird oft nicht korrekt verwendet.

Wie und wo setzt ihr den Page reload ein? Welche Gründe gibt es auf modernen Webseiten die komplette Seite neu zu laden?