Ajax Back-Button / Zurück

[Forumsgast]

Hallo liebe Helfer,

ich weiß, dieses Thema wurde schon oft behandelt (auch hier im Forum)...trotzdem stehe ich ganz am Anfang, finde keinen Ansatz und weiß nicht, wie und wo ich beginnen soll:

Ich möchte einen funktionierenden Back-Button in meiner Web-Applikation unterbringen. Es kann auch eine Schaltfläche sein und muss nicht zwingend über die Browser-Schaltflächen funktionieren. Bookmarking und Suchseiten-Crawling müssen auch nicht funktionieren.
Ich habe mir schon jQuery Address - Deep linking for the masses angeguckt und verstehe ehrlich gesagt nicht, wie ich es einbinden muss bzw. ob es überhaupt meinen Zweck erfüllt (selbst anhand der Beispiele nicht).

Ich verwende als Request Methode POST und vom Server kommen die Daten als XML zurück, welches ich dann entsprechend auswerte. In der Adressleiste ändert sich dabei erstmal gar nichts. Ein JavaScript Schnipsel dazu:

$(document).on('change', '#select_box', function()
{
  var ajax_obj = $.ajax(
  {
    type: 'POST',
    url: 'test_request.php',			
    data: $('#form').serialize(),
    success: function(xml)
                 {
                   processXml(xml);
                 }
  });
  return false;
});

In diesem Beispiel werden alle Formulareingaben beim Ändern einer Select-Box zum Server gesandt.

Wie gesagt, ich weiß gar nicht, wo ich ansetzen soll und freue mich über Beispiele, Denkanstöße und Tipps.

Vielen Dank,
Phantomias

[Forumsgast]

Benutz ne fertige lib wie history.js: https://github.com/balupton/History.js/

[Forumsgast]

Danke für deine Antwort.
Dort liegt mein Problem: Ich möchte eine fertige Library verwenden, wie z.B. jquery address, aber ich habe Probleme mit der Implementierung. Die Beispiele mit Ajax, die ich gesehen habe, sind alle anders aufgebaut. Ich vermute also, dass ich meine Ajax Anfragen ändern muss, damit es überhaupt klappt!?

[Forumsgast]

Ich kenne jQuery address nicht, jedoch tut historyjs genau das, was du in deinen Anforderungen oben beschreibst. Schau mal in das github wiki - Adapter für jQuery kommt mit.

[Forumsgast]

Danke nochmals.
Es tut mir leid, ich hab's zwar versucht, aber ich verstehe die Arbeitsweise von history.js nicht.
Ich habe mir dieses Beispiel angeguckt:
http://balupton.github.com/jquery-aj...l?anchor=yummy
Dort und auch in den Beispielen anderer Plug-ins sind die Links meist ähnlich wie diese aufgebaut:

<ul id="menu">
    <li><a href="./pages/apricots.html" class="ajaxy ajaxy-page">Learn about Apricots</a></li>
    <li><a href="./pages/bananas.html" class="ajaxy ajaxy-page">Lean about Bananas</a></li>
    <li><a href="./pages/coconuts.html" class="ajaxy ajaxy-page">Learn about Coconuts</a></li>
    <li><a href="./pages/durians.html#yummy" class="ajaxy ajaxy-page">Learn about Durians</a></li>
</ul>

Allerdings habe ich keine HTML-Seiten, die in dieser Art verlinkt sein können, sondern arbeite bis jetzt wie oben beschrieben (meist noch nicht einmal mit einem <a>-Element). Deswegen kam ich zu der Meinung, ich müsste meinen generellen Seiten / Ajax-Aufbau verändern, aber ich weiß nicht wie und in welcher Form.
Bis jetzt ist es so (beispielhaft beschrieben).
Ich befinde mich z.B. auf einer Seite index.php und dort starte ich einen Ajax-Request, der z.B. die Datei test_request.php adressiert. Diese greift mit den entsprechenden, per Ajax übertragenen Daten, auf eine Datenbank zu und schickt die Daten als XML zurück. Dort verarbeite ich das xml-Object mit Hilfe von Javascript (z.B. Aufbau einer Tabelle mit den Daten aus der Datenbank).
Ich habe bis jetzt nur in dieser Form mit Ajax gearbeitet und weiß anscheinend einfach nicht genug, um die Plug-Ins überhaupt zu verstehen...

[Forumsgast]

Mhm, ne. Eigentlich musst du nur history.pushState bedienen (Status objekt, Titel sowie Adresse). Historyjs nimmt dir die crossbrowser Implementierung ab.

Dabei unbedingt beachten, dass dein Server für die URL auch dann sinnvoll antworten sollte, wenns kein AJAX-Request ist (x-requested-width header zur Unterscheidung ansehen).

=> https://developer.mozilla.org/en/DOM...rowser_history