Browsermanipulation?

[djfabi]

Hallo,

jeder kenn es doch, man hat etwas gegoogelt, aber man findet nicht das gewünschte, so jetzt geht man in das SuchFeld und korrigiert seine Suche..
Was passiert?! Der Content wird kurz grau, und die Seite lädt irgentwie? Naja aufjedenfall wenn die Seite fertig geladen ist, ändert sich in der Domain der GET Content und wir zum gewünschten. So aber erst lädt die Seite, dann ändert sich die Domain, das kann man sehr gut sehen, wenn man eine langsame Verbindung über WLAN in seinem Zimmer hat
Also verhält sich die Seite nicht wie ein normaler link!

2.tes Beispiel: facebook
Man ist im Menü zum Beispiel auf Nachrichten, so jetzt klickt man auf Newsfeed (ich glaub das heißt so, aufjedenfall halt die Startseite) und was passiert? Ein facebook-typischer LadeScreen erscheint neben diesem Menüpunkt. Und auch erst dann, die Domain verändert sich. Aber alles lädt vorher irgentwie..

Ich hoffe ich konnte mich klar genug ausdrücken D

Also wie geht das? Über Hilfe wäre ich sehr erfreut! :)

 

[Tronjer]

Das geht mit AJAX.

 

[djfabi]

Okey, danke, gut das erstmal zu wissen
Kannst du mir auch eine konkretere Antwort geben? Also z.B. ein Link zu einer Seite mit einem Tutorial oder es mir etwas genauer erklären?
Danke aber erstmal :)

 

[Tronjer]

Vereinfacht gesagt geht bei AJAX um den Datenaustausch zwischen Browser und Server, ohne dass dazu die aktuelle Seite neu geladen werden muss. Damit lassen sich z.B. der Inhalt einer Datei in einen Container laden, Daten an ein PHP Script schicken, oder eine live Suche mit autocomplete ausführen. Ladeanimationen fügt man normaler Weise hinzu, um dem User zu signalisieren, dass gerade etwas passiert.

PHP-Variante mit Seitenrefresh zum Inkludieren von Content:

<div>
  <?php include 'seite.php'; ?>
</div>

Das selbe in AJAX mit Eventhandler ohne Refresh:

<div></div

$('foo').click(function() {
        $("div").load('seite.php');
    });

Es gibt etliche Tutorials zu der Thematik im Netz. Ich würde dir aber den Einstieg über jQuery AJAX empfehlen.

 

[Sentence]

Moin,
die URL veränderst du mit history.pushState()

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

Wenn du das veränderst, solltest du aber wissen was du tust

MfG

 

[djfabi]

Danke :)
Also Tronjer läuft bei deinem Beispiel so ab: Man klickt auf den Button, der Content wird via AJAX & jQuery geladen, und dann refreshed die Seite, der Content wird übernommen, aber die Domain ändert sich?

@Sentence: geht das in allen Browsern? Oder will das IE wieder nicht? -.-

 

[Tronjer]

Danke :)
Also Tronjer läuft bei deinem Beispiel so ab: Man klickt auf den Button, der Content wird via AJAX & jQuery geladen, und dann refreshed die Seite, der Content wird übernommen, aber die Domain ändert sich?

Du meinst die URL, und nein, die ändert sich nicht. Es wird ja nur Content in die aktuelle Seite nachgeladen.

 

[djfabi]

Ahh ok,
wie geht das hier denn:
Ich drücke einen Button. Der Content lädt in einen div(Für den Client sichtbar durch ladescreen). Wenn es fertig ist, dann wird die gewünschte Seite aufgerufen, und das ohne das da dann noch groß geladen werden muss. Also praktisch so wie ich es versucht habe zu beschreiben.
Also der button ist auf www.url.com/index.php und ich gelange dann auf www.url.com/impressum.php und das ohne dann zu laden.

Ich hoffe jz habe ich es richtig beschrieben
&& ich hoffe das ist überhaupt realisierbar ! O:

 

[Tronjer]

Ich drücke einen Button. Der Content lädt in einen div(Für den Client sichtbar durch ladescreen). Wenn es fertig ist, dann wird die gewünschte Seite aufgerufen, und das ohne das da dann noch groß geladen werden muss. Also praktisch so wie ich es versucht habe zu beschreiben.
Also der button ist auf www.url.com/index.php und ich gelange dann auf www.url.com/impressum.php und das ohne dann zu laden.

Das wäre ja ein Redirect. Dafür braucht es kein AJAX.

Du könntest einen Eventhandler bauen, der beim Klick eine Animation abspielt und anschließend den Redirect ausführt.

 

[djfabi]

OK ich hab nocheinmal gegooglet und bin auf folgendes Ergebnis gekommen:
Diese Seite -> History API - Dive Into HTML5

So und dazu das Beispiel: History API example - Dive Into HTML5

So und wenn man auf diese Previous und Next Button drückt, wird erst der Content geladen, dann die Domain gewechselt. :)

So ich werde mich jz mal durch dieses Tutorial durcharbeiten, und melde mich später wieder :)

@ Tronjer was genau bewirkt das denn?
Was ist ein Redirect ? :)