• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wann AJAX sinnvoll einsetzen?

P

P51D

Mitglied
Hallo miteinander

Ich arbeite mich gerade etwas in das Thema AJAX ein und sehe hierbei eigentlich sehr viele Möglichkeiten. Nur, was ist sinnvoll und was nicht? Bis jetzt habe ich nur hinweise auf kleine Änderungen einer Seite gefunden.

Was spricht dagegen, wenn man z.B die aktuell angezeigte Seite in einem div über AJAX änder? Also die Links zu den Seiten dann nicht mehr "Links" sind, sondern einfache JavaScript aufrufe. Somit würde die ganze Seite nicht neu geladen, sondern nur das "Textfeld" mit der aktuellen Seite.

Ich habe bei einem Projekt bis jetzt über PHP und GET gearbeitet, um den Seiteninhalt zu ändern. Wäre dafür AJAX brauchbar? Auch wenn die Seite eine Auflistung von Thumbnails mit Galerie ist (<= 100 Bilder)?

Besten Dank für die Nachhilfe
MFG
P51D
 
Werbung:
Das hängt davon ab. Suchmaschinen führen kein Ajax aus, dann müsstest du trotzdem eine Alternative ohne Ajax zur Verfügung stellen.
 
Erstmals besten Dank für die Antwort.

Dann müsste ich die ganze Seite eigentlich doppelt haben? Einmal mit AJAX für den Benutzer und dann normal für die Suchmaschinen? Klingt irgendwie nicht sinnvol.

Aber wie siets denn aus, wenn die einzelnen Seiten in einer MySQL DB verpackt sind? Die wird ja dann auch nicht von Suchmaschinen "durchforstet", oder?
 
Werbung:
Nicht nur Suchmaschinen führen kein AJAX aus, auch ein paar (oder sind es mehr???) normale Browser-Benutzer lehnen noch immer Javascript ab, womit auch AJAX deaktiviert ist.
 
Du musst deine Webseite für den Einsatz von AJAX nicht verdoppeln. Kapsel die anzuzeigenden Inhalte in Funktionen (die wiederum z.B. Datenbankabrufe enthalten könnten) und greife sowohl bei der Anzeige im Web als auch beim Zugriff per AJAX auf diese Funktionen zu. Damit musst Du nicht "alles" doppelt pflegen und hast gleichzeitig eine für Besucher wie Maschinen ansehnliche Webseite.

Eine genauere Antwort könnte man ggfs. geben, wenn Du beschreibst was Du genau machen willst. Nicht jedes scheinbare Einsatzgebiet für AJAX ist auch sinnvoll.

Suchmaschinen durchforsten keine Datenbanken. Wie könnten sie auch. Sie haben ja keine Datenbankzugangsdaten. Suchmaschinen durchforsten höchstens das was Du ihnen auf Basis Deiner Datenbankdaten bereitstellst.
 
Wie schon gesagt wurde empfiehlt es sich No-Script Variante für Suchmaschinen und Benutzer mit deaktivierten Javascript zu erstellen (Wie gehabt) und einer Ajax Variante.
Die Ajax Variante sollte deine Links beim Laden der Seite mit einem onclick-Handler belegen. Dieser lädt dann die Seite im Link, jedoch nur den Hauptteil.
Wenn du Fragen bezüglich der Umsetzung hast, stelle sie einfach. Es ist keine ganze simple Logik, wenn du das ganze dynamisch gestalten willst, sollte aber dennoch in 3-4 Stunden umgesetzt werden können.
 
Werbung:
Gilles schrieb:
Wenn du Fragen bezüglich der Umsetzung hast, stelle sie einfach. Es ist keine ganze simple Logik, wenn du das ganze dynamisch gestalten willst, sollte aber dennoch in 3-4 Stunden umgesetzt werden können.
Zum Vergrößern anklicken....

Allso, ich weiss gar nicht was ich fragen soll. Ich möchte die Seite über ein Template gestallten können. Der gesammte Inhalt wird in einer Datenbank gespeichert. Die entsprechende Seite wird dann über GET angezeicht. Aber soll ich jetzt das ganze im a-Tag über href oder mittels onclick und ajax lösen? Beides kombinieren erscheint mir irgendwie nicht sinnvoll. Könnte mann aber vorrangig feststellen ob Javascript aktiviert ist und dann ein entsprechendes Menü von PHP ausgeben lassen?
Zweitens stellt sich mir jetzt die Frage, wie ich in Zusammenhang mit der Datenbank die Seite Suchmaschinenfreundlich machen soll. Das Menu kann ich ja in einer xml Datei abspeichern, aber der Inhalt??

mermshaus schrieb:
Hashbang-URIs sind grausam und eine der schlechtesten Ideen der letzten Zeit. Zum Glück haben sie das inzwischen sauber hinbekommen:

- History API - Dive Into HTML5
Zum Vergrößern anklicken....

Was sind Hashbang-URL's? Da habe ich nichts sinnvolles gefunden...

Besten Dank
MFG
 
Werbung:
P51D schrieb:
Allso, ich weiss gar nicht was ich fragen soll. Ich möchte die Seite über ein Template gestallten können. Der gesammte Inhalt wird in einer Datenbank gespeichert. Die entsprechende Seite wird dann über GET angezeicht. Aber soll ich jetzt das ganze im a-Tag über href oder mittels onclick und ajax lösen? Beides kombinieren erscheint mir irgendwie nicht sinnvoll.
Zum Vergrößern anklicken....
Warum nicht? Das ist die einfachste Lösung. Du musst halt nur bei der Übertragung mittels AJAX einen Parameter mitgeben, damit deine Serveranwendung weiß, dass sie nur einen Teil der Daten übertragen muss.

P51D schrieb:
Zweitens stellt sich mir jetzt die Frage, wie ich in Zusammenhang mit der Datenbank die Seite Suchmaschinenfreundlich machen soll. Das Menu kann ich ja in einer xml Datei abspeichern, aber der Inhalt??
Zum Vergrößern anklicken....
Das hat alles nichts miteinander zu tun. Hinten raus kommt HTML. Eine Suchmaschine braucht HTML und kann nichts mit JS anfangen, deshalb brauchst du einen fallback auf eine reine HTML Seite, bei einer AJAX Anwendung, die indiziert werden soll.
Wie du das Menü abspeicherst ist hier unerheblich.
 
Hashbang-URLs/„…die Seite Suchmaschinenfreundlich machen soll…“: Das haben wir im Grunde in Posts #7 und #8 beredet.
 
OK, habe ich das jetzt richtig verstanden: Es gibt 2 Varianten, damit die Suchmaschinen die Seite durchforsten können und dann nur eine für die Benutzer, welche JavaScript deaktiviert haben?
User und Suchmaschine...(hierbei nehme ich mal an, dass der onClick Priorität hat)
HTML: 
<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32'); return false">foo 32</a>
nur Suchmaschine...
HTML: 
www.example.com/index.html#key=value,
wobei hier der Seiteninhalt vom Server zurückgegeben wrid?

Dann ist mir noch eine andere Frage in den Sinn gekommen:
AJAX läd die Seite ja nicht neu. Wie wird dann das mit dem "Zurück-Button" des Browsers gelöst? Annahme ich komme von Google auf die Seite, schaue mir 5 weitere Unter-Seiten an, und möchte nun einen Schritt zurück. Wenn AJAX genutzt wurde, lande ich ja wieder bei Google. Oder muss ich da selber ein Zurück-Button erstellen der über JavaScript die vorherige Seite wieder anzeigt?
 
Werbung:
Das Thema ist leider ziemlich unübersichtlich.

Die Idee hinter den #!-URLs hinsichtlich Suchmaschinen geht wie folgt.

Ich finde als Suchmaschine einen Link wie diesen:

HTML: 
<a href="http://www.example.com/index.html#!page=contact">Contact me!</a>

Ich stelle fest, dass dieser Link die Zeichen "#!" enthält und tue beim Folgen des URL so, als stünde dort stattdessen "?_escaped_fragment_=", also komplett:

HTML: 
<a href="http://www.example.com/index.html?_escaped_fragment_=page=contact">Contact me!</a>

Warum das Umschreiben? Der Fragment Identifier (alles ab dem "#"-Zeichen) ist nicht Teil eines HTTP-Requests. Er wird von einem Client nicht mit an den Server übertragen.

Beim Klick auf einen Link zu [noparse]http://www.example.com/index.html#!page=contact[/noparse] ruft der Client also den URL [noparse]http://www.example.com/index.html[/noparse] ab. Der Teil #!page=contact wird erst clientseitig per JavaScript ausgelesen und führt zu einem weiteren Ajax-Request, um den entsprechenden Inhalt zu holen, der sich hinter #!page=contact verbirgt.

Genau dieser Schritt kann aber von Suchmaschinen nicht mehr durchgeführt werden. Sie sehen immer nur die Seite index.html ohne weitere Angaben, würden also nicht zwischen #!page=contact und #!page=news unterscheiden können.

Deshalb müssen sie diesen eindeutigen Hilfs-URL mit ?_escaped_fragment_= generieren und hoffen, dass der Server für diesen Fall exakt dieselbe Seite bereits serverseitig generiert und zurückliefert, die normalerweise erst per Ajax nachgeladen würde.

AJAX läd die Seite ja nicht neu. Wie wird dann das mit dem "Zurück-Button" des Browsers gelöst? Annahme ich komme von Google auf die Seite, schaue mir 5 weitere Unter-Seiten an, und möchte nun einen Schritt zurück. Wenn AJAX genutzt wurde, lande ich ja wieder bei Google.
Zum Vergrößern anklicken....

Durch Änderung des Fragment Identifiers (die tauchen in der History auf).
 
Dein Beitrag bezieht sich jetzt auf Variante 2?
Das ganze sieht für mich nicht mehr wirklich nach AJAX aus, da ja immer wieder die Hauptseite geladen wird.
Ich bin noch nicht ganz so bewandert mit JS, aber wie wird nachträglich von der URL aus die Seite ermittelt und geladen? Über location.href oder so?
Und was ist der Fragment Identifier, respektive wie kann man den setzen und verändern?
 
Zuletzt bearbeitet:
Dein Beitrag bezieht sich jetzt auf Variante 2?
Zum Vergrößern anklicken....

Mein Beitrag sollte nur erklären, wie "#!"-URLs und Suchmaschinen „zusammenarbeiten“.

Das ist ein Weg solche Ajax-Geschichten umzusetzen. Ein anderer wäre es, einfach eine Seite zu programmieren, die ohne Ajax funktioniert, und entsprechende JS-Event-Handler für die Links „unobtrusive“ hinzuzufügen.

Wie gesagt, das Thema ist etwas unübersichtlich.

Das ganze sieht für mich nicht mehr wirklich nach AJAX aus, da ja immer wieder die Hauptseite geladen wird.
Zum Vergrößern anklicken....

Das Verändern des Fragment Identifiers löst keinen Reload aus.

Ich bin noch nicht ganz so bewandert mit JS, aber wie wird nachträglich von der URL aus die Seite ermittelt und geladen? Über location.href oder so?
Und was ist der Fragment Identifier, respektive wie kann man den setzen und verändern?
Zum Vergrößern anklicken....

Fragment Identifier lesen (und vermutlich auch setzen): window.location.hash

Du hast ein onload-Script, das sich window.location.hash schnappt und als Parameter im Ajax-Request mitschickt, um an die passenden Daten zu kommen.
 
Werbung:
mermshaus schrieb:
Wie gesagt, das Thema ist etwas unübersichtlich
Zum Vergrößern anklicken....

Wir diskutieren wahrscheindlich aneinander vorbei: Welches Thema meinst du?

Variante 1 wäre aber auch möglich? Und ein onClick mit href kombiniert macht keine Probleme? Oder ist die Variante mit #! besser geeignet? Wobei erscheint mir die 2. Version etwas aufwendiger.
 
Das Thema, wie man eine Seite mit Ajax erstellt, ist etwas unübersichtlich. Zum Beispiel geht diese Suchmaschinengeschichte irgendwie davon aus, dass du JS nicht unobtrusive verwendest.

Deine Varianten 1 und 2 sind mir nicht völlig klar.
 
Ich würde ja immer noch sagen, dass man auf No-Script variante aufsetzt.
Heisst du hast ja evtl schon deine Links zu den ganzen Seiten.
Nun musst du nur noch eine Funktion in deiner Seite einbauen sodass sie nicht nur index.php?site=news versteht sondern auch index.php?site=news&ajax=true
Sobald ajax=true mitgesendet wird, soll nur der Hauptteil der Seite zurückgegeben werden.
Dann musst du nur noch Klick-Events auf deine Links legen, die dann ein Ajax-Request ausführen. Das ajax=true sollte natürlich nur dann mitgesendet werden, wenn JS aktiv ist.
Benutzt du irgend ein JS Framework wie jQuery?
 
Werbung:
Die Varianten wären diese:
P51D schrieb:
HTML: 
<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32'); return false">foo 32</a>
Zum Vergrößern anklicken....
mermshaus schrieb:
HTML: 
<a href="http://www.example.com/index.html#!page=contact">Contact me!</a>
Zum Vergrößern anklicken....

@Gilles
Ja, die bisherigen Links sehen so aus:
HTML: 
<a href="index.php?page=home">Home</a>
Ergänzt mit einem onClick-Event würde dann ja die oben genannte Variante 1 herauskommen. Hierbei müsste nur noch eine Funktion hinzugefügt werden, die mir die asynchrone Anfrage an den Server und das ändern des Inhaltes übernimmt.
Wieso muss dann noch "ajax=true" mitgegeben werden? Der onClick-Event kommt ja vor dem href, wodurch das AJAX Priorität hätte. Falls aber JS deaktiviert ist, würde der bisherige Link zum Zuge kommen.
Bis jetzt nutze ich kein Framework, da ich nur kleinere Funktionen erstellen musste. Bieten diese etwas mehr Freiheiten?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben