Tim Tepaße: Javascript mit YUI- Wie speichere ich die Daten?

Beitrag lesen

Hallo,

Da mehrere Leute damit arbeiten sollen, wäre es natürlich toll, wenn jemand eine Idee hätte, wie man so eine Seite speichern könnte? Es sind ja keine Formulardaten.

Mit Ajax/XMLHttpRequest kannst Du den HTTP POST Request an den Server nach Gutdünken zusammenbasteln. Also kannst Du auch wunderbar Nicht-Formularzeugs an den Server schicken und dort mit einer beliebigen serverseitigen Programmiersprache verarbeiten und speichern. Mal so dahinskizziert:

1. Du musst erstmal die HTML-Playlist in eine leicht verarbeitbare Datenstruktur kriegen. Eine Playlist ist per Definition eine geordnete Liste, also nimmt man ein einfaches Array, das Dinger enthält. Deine spezielle Playliste kann Lieder, Pausen und eine Zugabe enthalten, also verschiedene Typen. Ich würde diese ganz einfach in anonymen Objekten verpacken. In Javascript direkt hingeschrieben sähe Deine Datenstruktur wohl ungefähr so aus:

~~~javascript var playlist = [
      { type : "song",
        id   : "li2_1" },
      { type : "pause",
        length : "15" },
      { type : "song",
        id   : "li2_2" },
      { type : "zugabe }
  ];

  
Songs werden hier mal einfach per ID definiert, in der Annahme, dass das serverseitige Programm schon eine Zuordnung aller möglichen IDs zu konkreten Songs besitzt. Andere Dinge in der Liste werden dann über den Eintrag „type“ im Objekt identifiziert.  
  
2\. Um diese Datenstruktur zu kriegen, gehst Du einfach die HTML-Playlist in einer Schleife durch und packst immer das passende Objekt in das Array. Ein Beispiel für so eine Schleife findest Du übrigens genau in dem [Yahoo Beispiel](http://developer.yahoo.com/yui/examples/dragdrop/dd-reorder.html), die Methode showOrder().  
  
3\. Um diese Datenstruktur über die Leitung senden zu können, musst Du die Objektstruktur im Speicher wieder in Text verwandeln können. Ein passendes Format dafür ist [JSON](http://www.json.org/), das zufälligerweise fast genauso aussieht wie obige direkte Notation. Gängige JS-Bibliotheken haben oft eine Möglichkeit, Datenstrukturen direkt in JSON zu verwandeln. Bei YUI hab ich da direkt nichts gefunden, [hier (unten)](http://www.json.org/js.html) ist eine Standalone-Lösung. (Es gingen auch andere Formate)  
  
4\. Zum Senden von HTTP Requests, ohne dass die Seite neu geladen wird, nimmt man das [XMLHttpRequest-Objekt](http://developer.apple.com/internet/webcontent/xmlhttpreq.html). Bei YUI ist das im [YUI Connection Manager](http://developer.yahoo.com/yui/connection/) gekapselt; dort ist es die Methode asyncRequest(). Diese kriegt bei POST-Requests als viertes Argument einen String namens postBody – der dann Dein JSON-String wäre. Interpretiere ich das [Beispiel](http://developer.yahoo.com/yui/examples/connection/post.html) richtig, ist es offenbar sehr empfehlenswert, den JSON-String vorher noch mit  [encodeURI()](http://de.selfhtml.org/javascript/objekte/unabhaengig.htm#encode_uri) in das passende Transportformat zu bringen.  
  
5\. Auf dem Server nimmt nun das Skript den Post-Request entgegen, dekodiert den JSON-String mit einer [JSON-Bibliothek](http://gggeek.altervista.org/sw/article_20061113.html) in richtige PHP-Datenstrukturen und kann dort weiterverarbeiten und gespeichert werden. Eventuell gibt das Skript auch irgendwas zurück. In der Seite wäre ein visuelles Highlight für den Erfolg des Speicherns ja ganz praktisch.  
  
  
Tim