Feste Links mit Ajax

[Rhambo Tern]

Hallo. Ich habe es mit diesem Video hinbekommen, Seiten dynamisch laden zu lassen. Allerdings landet man, wenn man die Seite neu lädt, oder zum Beispiel http://internetseite.de/#!/profil als URL eingibt, wieder auf der Startseite. Kann ich es irgendwie machen, dass ich einen Link (http://internetseite.de/#!/profil) vergeben kann, bei dem man auf der richtigen Seite und nicht bei der Startseite landet?

Vielen Dank,
Rhambo Tern.

 

[Tronjer]

Schon, aber nicht per jQuery Ajax, oder zumindest wäre das nicht der richtige Ansatz.

ich habe mir das Video jetzt nicht angeschaut, aber Ajax ist eine Methode, mit der sich Teile einer Webseite nachladen lassen, ohne dass dabei ein Seitenrefresh durchgeführt oder eine andere Seite geladen wird.

Für auf JavaScript basierende Webseiten gibt es spezielle Frameworks, die serverseitig agieren und so genannte Routen setzen.

Pseudocode:

when('/index', {
  templateUrl: 'index.html'
}).
when('/index/:contact', {
  templateUrl: 'partials/contact.html',
}).
otherwise({
redirectTo: '/index'
});

Hier würde der Server direkt bei Eingabe der URL im Browser die gewünschte Seite ausliefern.

Wenn dich das Thema serverseitiges JavaScript interessiert, schau dir mal das hier an.
http://angularjs.org/

 

[Rhambo Tern]

AngularJS scheint mir aber ein sehr umfangreiches Thema zu sein. Eventuell wäre es doch dann einfacher, normale HTML-Seiten zu erstellen und dann mit include() Dropdown-Menü, etc. einzubinden oder gibt es sonst noch einfachere Möglichkeiten? (Bei jQuery Mobile funktioniert es ja auch...)

 

[Tronjer]

Sicher geht es auch per include(), das ist der herkömmliche Weg mit Apache/PHP. Die alternative Route würde über NodeJS als Server und ein MV* Framework wie Angular oder Backbone führen.

Der spezifische Unterschied zwischen PHP und JavaScript besteht darin, dass im ersten Fall der die Kommunikation zwischen Client und Server unidirektional verläuft. Das heißt, der User submitted zumeist irgendwelche Formulardaten, auf die der Server ein Datenbank-Query ausführt und das gewünschte Ergebnis mit einem Seitenreload zurückliefert. Ajax bietet zwar die Möglichkeit, den kompletten Reload zu umgehen, ändert aber nichts daran, dass der Server nie von selber tätig wird, sondern stets auf den Request des Clients wartet.

Mit JavaScript lässt sich eine Realtime Kommunikation aufbauen, bei welcher der Server auf jede Änderung reagiert, ohne dass der User dazu einen Button drücken müsste.

Der simpelste Weg eines bidirektionalen Bindings zwischen Daten (Model) und und deren Ausgabe (View) wäre folgender Code:

<div ng-app>
  <input type="text" ng-model="data.text">
  <h1>{{data.text}}</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

Bei jeder Eingabe innerhalb des Input-Feldes wird ein Event gefired, welches den Feldinhalt zum Model schickt, und das Model sendet diesen sofort an den View zurück, wo er in der <h1> interpoliert wird. Model und View überwachen sich hier gegenseitig, und in Verbindung mit NodeJS und einer Datenbank lässt sich daraus eine Realtime Verbindung stricken.