201021Aug

JavaScript: Ajax-Inhalt durch Deep-Links darstellen

Der Artikel bei Impressive Webs ist zwar schon etwas älter, aber vielleicht kann er bei dem einen oder anderen Web-Projekt behilflich sein. In dem Beitrag geht es um die Umsetzung von Deep-Links in JavaScript- und Ajax-Anwendungen. Das bedeutet, dass bestimmte Inhaltsbereiche über einen Hash-Link (#-Zeichen) abgerufen und dargestellt werden können. In dem Artikel wird die Programmierung einer solchen Funktionalität in JavaScript beschrieben.

Deep Linking in JavaScript and Ajax Applications

Neben dem eigentlichen JavaScript-Teil ist auch die Umsetzung der eigentlichen Seite interessant: Hier wurde eine PHP-Datei geschrieben, die verschiedene Inhalte per GET-Parameter im Stil von "?view=employee1" darstellt. Durch JavaScript wird anschließend der Teil "?view=" durch das Hash-Zeichen "#" ersetzt, so dass entsprechende Deep-Links entstehen, die bei einem direkten Aufruf den referenzierten Inhalt darstellen. Auf der Demo-Seite kann die Funktionalität angesehen werden.
Das Ganze lässt sich auch sehr einfach mit jQuery umsetzen, falls mit der Bibliothek gearbeitet wird. Hier wird der Ajax-Inhalt in den Container mit der ID "ajaxcontent" geladen:

  • $(document).ready(function(){
  • function ajaxHashContent(ajaxFile) {
  • $("#ajaxcontent").load(ajaxFile);
  • }
  •  
  • ajaxHashContent(location.hash.substr(1) + ".html");
  • });

Voraussetzung ist natürlich, dass die Ajax-Dateien die Endung ".html" besitzen und sich im gleichen Verzeichnis befinden.

RSS-Feed abonnieren Bookmark bei Del.icio.us