Ajax - Seite nachladen

dope_dope

Hi Leute,

ich habe eine Seite gebaut wo oben der Header, Links die Navi und Rechts der Content-Bereich ist, jeweils in einem eigenen <div>. Jetzt möchte ich dass wenn ich auf einen Link in der Navi klicke die entsprechende Datei (php-datei) per Ajax im Content-Bereich nachgeladen wird. So dass sich nur der Content-Bereich verändert und der Rest nicht (Eigentlich wie anno mit Frames...).
Das ganze soll mit IE6, IE7 und Firefox kompatibel sein. und am Besten wäre es wenn während des Nachladens noch ein Ladebalken angezeigt wird.

Im Internet finde ich entweder nur englische Beispiele oder solche, die entweder gar nicht oder nur in manchen Browsern funktionieren. Kennt ihr ein Tutorial speziell für meinen Anwendungsfall bzw. könnt ihr mir erklären wie ich das machen kann?
Allgemeine Einführungen in Ajax habe ich schon öfter gelesen aber meistens klappen die Beispiele nicht oder sind Sachen die mir für meinen Fall nichts bringen.

thx, MFG, dope_dope

Reyx

Wieso willst du einem framfreiem Layout durch eine "frameartige" Technik wieder etliche Nachteile der Frames einverleiben?

dope_dope

Bisher mache ich es mit PHP include(), aber dabei wird ja immer die gesamte Seite neu geladen. Mit ajax ist es möglich nur den Teil nachzuladen der auch wirklich neugeladen werden muss und das möchte ich erreichen.

Da es mit PHP include genau das gleiche ist weiß ich nicht ganz was du mit deinem frame-kommentar sagen willst.

index.php
<html>
....

<div>
Navigation:
<li><a href="index.php?site=bla.html">bla</a></li>
usw..
</div>

<div>
Content:
<?php
   include $site;
?>
</div>

</html>

Ich möchte jetzt dass ich in der Navi auf einen Link klicke und anstatt dass der Browser index.php komplett neuläd und include $site macht, einfach sofort die aktuell includete Site durch die neue (per Klick ausgewählte) Seite ersetzt ohne dabei index.php neuzuladen.

Reyx

Und genau davon würde ich strengstens abraten, weil das
1. nicht der Einsatzzweck von Ajax ist.
2. du deine Webseite von JavaScript abhängig machst, und zwar bedingungslos.
3. du dir ganz viele Nebeneffekte der "Frames" einhandelst (beispiel: Kein Bookmarking mehr, kein direktes Anspringen der einzelnen Seiten mehr möglich, kein "Open in New Window" mehr möglich etc. etc. etc.)

Du kannst es natürlich machen, aber ich würde dir einfach zu einer anderen Lösung, eben z.B. mit Hilfe von PHP, raten. Dann bist du nicht von JavaScript abhängig und musst dich nicht mit den ganzen Nachteilen abgeben. Was spricht denn deiner Meinung nach dagegen? Wieso willst du index.php nicht neu laden?

dope_dope

Die einzelnen Seiten können doch weiterhin per index.php?site=... angesprochen werden und somit auch gebookmarkt werden.

Es geht ja auch bisher super mit php, aber ich würde gerne die Möglichkeit nutzen nur das nachzuladen was ich auch wirklich brauche. Hauptpunkt ist das es einfach schicker ist wenn an Stelle die komplette Seite neuzuladen kurz ein Ladebalken kommt und dann der neue Inhalt einfach da ist.

Was ist denn dann der Einsatzzweck von Ajax?

Reyx

Der (ein) Einsatzzweck von Ajax ist durch Kombination von Client- und Servertechnik Webanwendung benutzerfreundlicher zu machen. Trotzdem darf imho Ajax ausschließlich für optionale Features gebraucht werden, niemals für essentielle (beispiel: Forum -> Schon wärend des Schreibens können die Daten validiert werden. Schön. Aber wenn es nicht geht ist es auch nicht tragisch, denn der Server macht es noch einmal).

Über Geschmack lässt sich bekanntlich streiten. Ich fände es jedenfalls unschön, wenn ich auf einer einzigen Seite durch die gesamte Internetpräsenz navigiere (und ja, so wäre das bei JavaScript, denn die geladene Seite wird eben nicht aktualisiert; so weiß der Benutzer also auch nie, wo er sich überhaupt befindet).

Außerdem halte ich deinen "Ladebalken" sowieso für redudant. Das ist Schnickschnack, den kein Benutzer wirklich braucht; schön anzusehen vielleicht, aber nicht praktisch! Mich hat es z.B. bei Plesk immer wahnsinnig aufgeregt, dass die gesamte Seite mit einem solchen "Ladebalken" gesperrt ist, bis sie komplett geladen wurde. Und wenn ich mich schnell weiter klicken will, bin ich trotzdem gezwungen auf jede noch so bescheuerte Graphik zu warten, bis sie geladen ist -> Grausam! Und JavaScript ausschalten kann ich auch nicht, weil dann die ganze Sache nicht mehr funktioniert ...

Große Rede langer Sinn: JavaScript für Dinge die zwar schön sind, aber nicht zum Besuchen der Seite gebraucht werden! Das ist meine Meinung und die vieler anderer auch, aber natürlich ist es auch nicht viel mehr!

mantiz

So, jetzt nochmal meine Meinung, damit nicht alle gegen Dich wettern.

Ich finde AJAX einfach nur super. Leider wird es nicht von jedem unterstützt und man muss sich überlegen, wo man es einsetzt. Ich bin sehr für barrierefreiheit, was sich mit AJAX ein wenig beisst.

Aber wenn Du es optional machen würdest, dann wäre alles in Ordnung, denke ich. Wenn die einzelnen Seiten sowieso schon einzeln aufrufbar sind, dann würde ich die Seite soweit lassen, dass man ohne JS navigieren kann.

Per JS kann man dann Links, etc. ändern, damit "normal" navigiert, sondern nur der Content ausgetauscht wird. Hier würde ich aber zusätlich noch die Möglichkeit bieten in einem Cookie, oder zumindest, wenn es einen Login gibt, dann dort, zu speichern, ob der Besucher AJAX verwenden möchte oder nicht.

Bei aktiviertem JS kann es ruhig default sein, aber es muss abwählbar sein.

Ansonsten: Nehmt ruhig mehr AJAX, das ist geil.

Shade Of Mine

Man sollte nur immer ueberlegen: lohnt es sich?

doppelte arbeit wofuer? ajax bietet hier nichts was ich nicht ohne ajax genauso machen kann. folglich: wozu ajax verwenden?

mantiz

Es ist einfach schön. Wobei dies sicherlich Geschmacksache ist.

Ich arbeite z.B. mit einer Template-Klasse, um dynamischen Content anzuzeigen. Das Problem dabei ist, dass obwohl die Template-Klasse recht schnell ist, ich ob_content arbeite, was dazu führt, dass erst Output an den Client geschickt wird, wenn dieser komplett verfügbar ist, wenn das Script mal etwas länger, sagen wir 0,5s läuft, dann merkt man das deutlich beim surfen. Plötzlich ist die nächste Seite nicht sofort da, sondern man bekommt erstmal eine hässliche weiße Seite, bevor der neue Content angezeigt wird.

Mit AJAX kann man an dieser Stelle schön eine Lade-Animation anzeigen.

Eine andere Sache, was jetzt nicht die Welt sein dürfte, aber trotzdem, ist die Tatsache, dass man nur da benötigte nachlädt, d.h. das Menu, der Head, etc., was ja sowieso schon da ist muss nicht mit Hilfe von PHP wieder mit verwendet werden, um eine (größere) Seite zu bauen, ich brauche ja nur den Content-Bereich, der sich ändert. Evtl. färbt sich noch der Menupunkt, den ich geklickt habe, aber das geht per JS ja ziemlich bequem.

Wenn ich ein Formular habe, dann kann ich die Daten zu speichern an den Server schicken, dort werden diese validiert und evtl. in einer DB gespeichert, wenn etwas mit den Daten nicht stimmt, dann muss ich diese nicht wieder in die Formular-Seite einbauen und mich um die korrekte Darstellung kümmern, damit der User diese ändern kann, denn am Formular hat sich ja gar nichts geändert.
Fehlermeldung auswerfen, evtl. Korrekturen vornehmen, wenn diese erwünscht ist und fertig.