JS/AJAX: Bilder über ein Formular ohne Neuladen der Seite generieren

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/js_ajax_bilder_ueber_ein_formular_ohne_neuladen_de_201325/page_1 - zur Vollversion wechseln!

jives schrieb am 03.11.2008 um 18:59

Ich habe eine Webapplikation, welche unter anderem Bilder je nach Benutzeranfrage über ein Formular generiert. Nachdem sich nach dem Abschicken des Formulars aber der Rest der Seite nicht ändert, möchte ich um Traffic und Zeit zu sparen und eine angenehmere Bedienung zu ermöglichen NUR das Bild neu laden.

Die Idee war, per AJAX (jQuery) ein POST-Request an das Bild-Script zu schicken und gleich darauf das Bild zu laden und ans DOM anzuhängen, mit SRC vom Bild-Script. Das geht aber leider nicht, da natürlich die Daten ja an den AJAX-Request zurück gesendet werden, und mit Binärdaten fang ich da nicht viel an

Leider fällt mir überhaupt kein anderer Ansatz ein. Vielleicht könnte das Umsteigen auf GET funktionieren, in dem ich dann einfach nur die SRC des Bildes umschreibe, aber leider bin ich mir da nicht sicher und ich muss unter Umständen einen Haufen Daten (2-3 Arrays mit bis zu 25 Einträgen) zum Script schaufeln, was mit GET relativ schwierig werden könnte.

Hat jemand eine Idee, wie ich das Ganze Problem am besten lösen kann?
Würde mich über jeden Ansatz und Tipp in die richtige Richtung freuen

ica schrieb am 03.11.2008 um 20:03

wieso erzeugst nicht einfach serverseitig das bild (von mir aus in einem temp ordner) und zeigst es dann per javascript an?! du sendest einfach per click via ajax wie dein bild aussehen soll, kriegst zurück wann es fertig ist und wo es liegt und ladest es dann einfach.

wieso sollten die daten des bild-scriptes ans aufrufer script zurückgesendet werden? kannst ja zurückschicken was du willst.

http://www.rodsdot.com/ee/scriptingRemoteImages.asp

hoffe ich hab dich richtig verstanden.

jives schrieb am 03.11.2008 um 22:41

Genau das will ich machen

Also war die Idee wohl nicht prinzipiell falsch, nur die Ausführung war nicht ok. Ich hatte ungefähr folgendes Script (mit jQuery v1.2.6)

Code:

$(function() {  
     $(".submit").click(function() {

     var dataString = foobar;

     $.ajax({
          type: "POST",
          url: "./index.php?/graph",
          data: dataString,
          success: function()
          {
               $('#graph').append('<img src="./index.php?/graph" />');    
          }
     });

     return false;
});

Ungefähr, weil ich das genaue Script bzw. das verhalten dieses Scripts erst morgen wieder prüfen und posten kann. Das Script ist halt schon sehr jQuery-spezifisch.
Leider bekomme ich hier ein leeres Bild - meinem Verständnis nach, weil ich hier ja praktisch zwei mal das Script aufrufe, aber nur ein mal POSTe und die Antwort auf die POST-Daten ins Leere läuft. Das serverseitige Script funktioniert, ich hab die Antwort (das Bild) bereits als "String" in einem Popup anzeigen können. Nur dass ich die Bilddaten in die success-function bekomme nutzt mir eben nichts, ich muss ja direkt in den img-Tag streamen.

Irgend etwas dürfte ich noch nicht ganz durchschaut haben glaube ich - JS und AJAX sind leider fast völliges Neuland für mich.

Edit: Ah, ich glaub ich hab deinen Post falsch verstanden. Ich glaub so wars gemeint: Das serverseitige Script könnte ja nur die URI zum Bild zurückliefern, das ich dann ganz normal per append anhänge.
Das sollte funktionieren - leider dürfen die Bilder aber nicht für jeden zugänglich sein, der zufällig die richtige URI in den Browser tippt - was sie bei der Lösung aber wären bzw. sein müssten

ica schrieb am 03.11.2008 um 23:00

Zitat von jives
Edit: Ah, ich glaub ich hab deinen Post falsch verstanden. Ich glaub so wars gemeint: Das serverseitige Script könnte ja nur die URI zum Bild zurückliefern, das ich dann ganz normal per append anhänge.
Das sollte funktionieren - leider dürfen die Bilder aber nicht für jeden zugänglich sein, der zufällig die richtige URI in den Browser tippt - was sie bei der Lösung aber wären bzw. sein müssten

nunja, eine eindeutige uid sollte nicht so schnell erratbar sein - aber ich hab keine ahnung um was für bilder es sich handelt und wie kritisch die sind...evtl. mit einer session lösbar? aber du könntest vermutlich auch ein base64 encodiertes bild zurückliefern und per javascript decodieren und als src setzen. ob das geht weiss ich zwar nicht, aber wenn ja gibts sicher was per google.

wie soll dein script funktionieren? versteh nicht ganz wo du da ein bild setzt.

jives schrieb am 03.11.2008 um 23:17

Zitat von ica
nunja, eine eindeutige uid sollte nicht so schnell erratbar sein - aber ich hab keine ahnung um was für bilder es sich handelt und wie kritisch die sind...evtl. mit einer session lösbar?

Die Bilder werden sowieso gecached (nur greift hier bisher eben nur das serverseitige Script zu), und bekommen für diesen Zweck eh einen eindeutigen, netten Namen in Form eines MD5-Hashes

So kritisch sind die Daten aber eh nicht - ich war bzw. bin eher aus Prinzip mit Security through Obscurity nicht ganz glücklich

Zitat von ica
aber du könntest vermutlich auch ein base64 encodiertes bild zurückliefern und per javascript decodieren und als src setzen. ob das geht weiss ich zwar nicht, aber wenn ja gibts sicher was per google.

Meines Wissens nach geht das nur mit dem data: URI Schema, welches von meinem heiß geliebten IE nicht unterstützt wird. Darüber hinaus ist meines Wissens nach die maximale Dateigröße laut RFC 48kB.

Zitat von ica
wie soll dein script funktionieren? versteh nicht ganz wo du da ein bild setzt.

Die Zeile

Code:

$('#graph').append('<img src="./index.php?/graph" />');

soll in das Element mit der id "graph" ein Bild mit der angegeben Quelle "anhängen", was zumindest mit einem herkömmlichen (statischen) Bild gelingt (oder gelingen sollte - ich hab das Script nur schnell runtergetippt um die Idee zu verdeutlichen).