nicht angemeldet
AJAX request - Aufgerufenes soll Graphen produzieren
Hey, stehe gerade etwas auf dem Schlauch.
Habe eine html-Seite (sagen wir page.html), welche eine JS-funktion anstößt (button, Funktion MakeRequest()), die einen AjaxRequest zu einem php-Skript startet (batch.php). Jenes php-Skript öffnet eine CSV-Textdatei und baut mit dem Prototype-Framework einen svg-Graphen aus den Werten der Textdatei. Der standardmäßige Return des Prototype-Frameworks ist sowas wie:
<div id="whiteboard" style="width: 600px; height: 300px; background-color: rgb(255, 255, 255);"></div>
<script type="text/javascript">
var plot = new Graphic.SVGRenderer('whiteboard');
var draw = new Graphic.Rectangle(plot);
var axis = new Graphic.Polyline(plot);
var graph = new Graphic.Polyline(plot);
var arrows = new Graphic.Polygon(plot);
graph.addPoints([[0,300],[1,299.96585183021],[2,299.94515052668],[3,299.92648529846],[4,299.917975548],[5,299.92346822529],[6,299.91872320752],[7,299.90934438683],[8,299.90472781287],[9,299.901557704],[10,299.89961862772],[11,299.89478947374],[12,299.88591643614],[13,299.87562572107],[14,299.86912866702],[15,299.86483257116],[16,299.8625667872],[17,299.8639385857],[18,299.87082386942],[19,299.89220333109],[20,299.90687065505],[21,299.8869932123],[22,299.86833966968],[23,299.85580087617],[24,299.84974586856],[25,299.86198291774],[26,299.89239505999],[27,299.88735927465],[28,299.87489917722],[29,299.86675471812],[30,299.86398475211],[31,299.86618709516],[32,299.8661565788],[33,299.86258744532],[34,299.85813754406],[35,299.85132627662],[36,299.84414879388],[37,299.84165887517],[38,299.84083834024],[39,299.83909922666],...
(...)
}draw.setFill({r: 255, g: 255, b: 255, a:200});draw.setBounds(40, 10, 550, 250);plot.add(draw);
plot.add(axis);
plot.add(graph);
</script>
Es schiebt zunächst ein div raus, und füllt dann dieses Div mittels JS mit der Grafik. Ich weiß nun nicht, wie ich diesen return in meine ursprüngliche html-Seite kriege.
Normalerweise habe ich in der Funktion, die den Request verarbeitet, eine Methode "responseText" auf dem AjaxRequestObject, um die Rückgabe/Ausgabe des php-Skriptes anzuzeigen.
shematisch:
function MakeRequest(){
var req = AjaxRequestObject();
var method = 'GET';
var url = '/scaling.php/action/process/cc/'+cachecd;
var asynch = true;
req.open(method, url, asynch);
req.onreadystatechange = handleRequest();
}
function handleRequest(){
(...)
document.getElementById('ajaxcontent').innerHTML = req.responseText;
(...)
}
Aber dann wird der JS code ja nicht interpretiert. Ebenso wird ja ein vom batch.php zurückgegebenes "<script type='text/javascript' >alert('hier');</script>" nicht interpretiert, sprich es gibt kein Fenster.
Die Frage reduziert: wie kann ich von der batch.php produzierten JS-code ausführen?
Wenn das nicht geht, wie kann ich mein Problem lösen.
Viiiiielen Dank!
-
hi,
Die Frage reduziert: wie kann ich von der batch.php produzierten JS-code ausführen?
Script-Code, der per Ajax-Response kommt, kannst Du nur innerhalb der Callback-Funktion ausführen.
Hotti
-
hi,
Die Frage reduziert: wie kann ich von der batch.php produzierten JS-code ausführen?
Script-Code, der per Ajax-Response kommt, kannst Du nur innerhalb der Callback-Funktion ausführen.
Das klingt doch mal interessant. Was ist in diesem Zusammenhang die Callback-Funktion? Ich würde jetzt mal vermuten die handleRequest() Funktion?? Wenn ich das hinkriege, dann hab ich es ja eigentlich. Das div kann schon da sein, und dann füllt es die handleRequest zum Abschluss?!?
Bin für weitere Hilfestellung dankbar.
Grüße,xml = req.responseText;
wie weiter??
-
hi,
Das klingt doch mal interessant. Was ist in diesem Zusammenhang die Callback-Funktion?
Am Besten, gucks Dir mal an: Beispiel
Auf der Beispielseite findest Du gleich zwei "Einsätze" meiner kleinen alib.js und alibCore.js (einmal ein Seitenaufrufzähler und dann die Anwendung selbst, die auch ohne JS funktioniert).
Allerdings zeigt das Beispiel nicht, wie JSCode geschickt wird, zeigt jedoch schön, was die Callbackfunktion ist und wozu die dient: Einbau der Response ins DOM, damit der Browser das rendern kann.
Hotti
-
Hi, kann es sein, dass es der verkehrte Link war? Geht da gar nicht um Ajax und Callback... Habe nix gefunden.
Hört sich aber doch stark so an, als wenn die Callbackfunktion in meinem Fall die handleRequest() ist, die den responseText vom RequestObject empfängt.
Wie kriege ich da nun noch hin, dass die Rückgabe, handelt es sich um JS Code, interpretiert wird?
Grüße, Lspreee
hi,
Das klingt doch mal interessant. Was ist in diesem Zusammenhang die Callback-Funktion?
Am Besten, gucks Dir mal an: Beispiel
Auf der Beispielseite findest Du gleich zwei "Einsätze" meiner kleinen alib.js und alibCore.js (einmal ein Seitenaufrufzähler und dann die Anwendung selbst, die auch ohne JS funktioniert).
Allerdings zeigt das Beispiel nicht, wie JSCode geschickt wird, zeigt jedoch schön, was die Callbackfunktion ist und wozu die dient: Einbau der Response ins DOM, damit der Browser das rendern kann.
Hotti
-
-
-
-
Moin!
Hey, stehe gerade etwas auf dem Schlauch.
Habe eine html-Seite (sagen wir page.html), welche eine JS-funktion anstößt (button, Funktion MakeRequest()), die einen AjaxRequest zu einem php-Skript startet (batch.php). Jenes php-Skript öffnet eine CSV-Textdatei und baut mit dem Prototype-Framework einen svg-Graphen aus den Werten der Textdatei. Der standardmäßige Return des Prototype-Frameworks ist sowas wie:
...viel zuviel HTML-Code, der für Ajax nicht geeignet ist.
Das ganze HTML gehört schon von Anfang an in deine HTML-Seite, dann existiert auch schon direkt der Platz, wo die Grafik erscheinen wird.
Der Ajax-Request sollte nur die Daten als JSON besorgen, und wenn die Daten da sind, wird der Malprozess mit den Daten aufgerufen, und die Grafik erscheint.
JSON als Ergebnis von Ajax lässt sich nämlich prima handhaben. Und man muss dann auch nicht beliebiges Javascript evaluieren lassen, sondern kann sich drauf beschränken, das JSON zu parsen, siehe z.B.: https://developer.mozilla.org/en/Using_JSON_in_Firefox
- Sven Rautenberg
-
Moin!
Hey, stehe gerade etwas auf dem Schlauch.
Habe eine html-Seite (sagen wir page.html), welche eine JS-funktion anstößt (button, Funktion MakeRequest()), die einen AjaxRequest zu einem php-Skript startet (batch.php). Jenes php-Skript öffnet eine CSV-Textdatei und baut mit dem Prototype-Framework einen svg-Graphen aus den Werten der Textdatei. Der standardmäßige Return des Prototype-Frameworks ist sowas wie:
...viel zuviel HTML-Code, der für Ajax nicht geeignet ist.
Von welchem html-Code sprichst Du denn?
Das ganze HTML gehört schon von Anfang an in deine HTML-Seite, dann existiert auch schon direkt der Platz, wo die Grafik erscheinen wird.
Dort kann m.E. nur die div schon erscheinen, mit der ID whiteboard. Die Daten für die Graphik sind ja dynamisch.
Der Ajax-Request sollte nur die Daten als JSON besorgen, und wenn die Daten da sind, wird der Malprozess mit den Daten aufgerufen, und die Grafik erscheint.
Dies würde bedeuten in das Prototype Framework einzugreifen, richtig? Sagen wir mal, wenn das nicht in meiner Absicht liegt, kann man das dann anders lösen? Um das Framework zu nutzen muss dieser JavascriptCode irgendwann einmal ausgeführt werden, um die svg-Daten zu produzieren.
JSON als Ergebnis von Ajax lässt sich nämlich prima handhaben. Und man muss dann auch nicht beliebiges Javascript evaluieren lassen, sondern kann sich drauf beschränken, das JSON zu parsen, siehe z.B.: https://developer.mozilla.org/en/Using_JSON_in_Firefox
- Sven Rautenberg
-
Moin!
Moin!
Hey, stehe gerade etwas auf dem Schlauch.
Habe eine html-Seite (sagen wir page.html), welche eine JS-funktion anstößt (button, Funktion MakeRequest()), die einen AjaxRequest zu einem php-Skript startet (batch.php). Jenes php-Skript öffnet eine CSV-Textdatei und baut mit dem Prototype-Framework einen svg-Graphen aus den Werten der Textdatei. Der standardmäßige Return des Prototype-Frameworks ist sowas wie:
...viel zuviel HTML-Code, der für Ajax nicht geeignet ist.
Von welchem html-Code sprichst Du denn?
Von deinem.
Das ganze HTML gehört schon von Anfang an in deine HTML-Seite, dann existiert auch schon direkt der Platz, wo die Grafik erscheinen wird.
Dort kann m.E. nur die div schon erscheinen, mit der ID whiteboard. Die Daten für die Graphik sind ja dynamisch.
Nicht wirklich. Die Grafikausgabe setzt sich zusammen aus vorbereitenden Arbeiten mittels Javascript, und der dann generierten, wohl dynamischen, Datensammlung für die eigentliche Grafik. Die Grafikerstellung ist aber, davon gehe ich jedenfalls aus, fix, nur die Daten ändern sich.
Der Ajax-Request sollte nur die Daten als JSON besorgen, und wenn die Daten da sind, wird der Malprozess mit den Daten aufgerufen, und die Grafik erscheint.
Dies würde bedeuten in das Prototype Framework einzugreifen, richtig? Sagen wir mal, wenn das nicht in meiner Absicht liegt, kann man das dann anders lösen? Um das Framework zu nutzen muss dieser JavascriptCode irgendwann einmal ausgeführt werden, um die svg-Daten zu produzieren.
Ich kenne Prototype als Javascript-Framework, serverseitig tut das nix. Insofern ist Prototype nicht für dein derzeitiges HTML verantwortlich, sondern dort ist lediglich eine HTML+Javascript-Ausgabe versammelt, die eine Grafik malt, und die lädst du per Ajax, anstelle mit einem normalen Browser-Request.
Insofern vermute ich: Das Datensammeln und -ausgeben hat mit Prototype nichts zu tun und kann auch geändert werden (auf JSON), und wenn das so ist, dann kann auch das Einfügen der Daten in die Darstellungsroutine geändert werden (indem die Daten aus JSON als Parameter in eine Darstellungsfunktion eingefügt werden, welche dann alles tut, was zum Zeichnen der Grafik nötig ist).
Hat am Ende den Vorteil, dass die Datenmenge kleiner bleibt.
- Sven Rautenberg
-
Moin!
Moin!
Hey, stehe gerade etwas auf dem Schlauch.
Habe eine html-Seite (sagen wir page.html), welche eine JS-funktion anstößt (button, Funktion MakeRequest()), die einen AjaxRequest zu einem php-Skript startet (batch.php). Jenes php-Skript öffnet eine CSV-Textdatei und baut mit dem Prototype-Framework einen svg-Graphen aus den Werten der Textdatei. Der standardmäßige Return des Prototype-Frameworks ist sowas wie:
...viel zuviel HTML-Code, der für Ajax nicht geeignet ist.
Von welchem html-Code sprichst Du denn?
Von deinem.
Aso.
Das ganze HTML gehört schon von Anfang an in deine HTML-Seite, dann existiert auch schon direkt der Platz, wo die Grafik erscheinen wird.
Dort kann m.E. nur die div schon erscheinen, mit der ID whiteboard. Die Daten für die Graphik sind ja dynamisch.
Nicht wirklich. Die Grafikausgabe setzt sich zusammen aus vorbereitenden Arbeiten mittels Javascript, und der dann generierten, wohl dynamischen, Datensammlung für die eigentliche Grafik. Die Grafikerstellung ist aber, davon gehe ich jedenfalls aus, fix, nur die Daten ändern sich.
Ja. Der Knackpunkt ist "..., und der dann generierten, ...". Um dies zu generieren, muss der JS Code mal ausgeführt werden. Doch ein echo "<scri..." im mittels Ajax aufgerufenen php-Script wirft den Code ja nur zurück an die Funktion handleRequest, wo ich dat nich ausgeführt bekomme.
Der Ajax-Request sollte nur die Daten als JSON besorgen, und wenn die Daten da sind, wird der Malprozess mit den Daten aufgerufen, und die Grafik erscheint.
Ich verstehe das langsam. Aber ich würde doch gerne wissen, wie ich JS vom batch.php interpretieren kann. Bin mittlerweile auf ein flashbasiertes Chartplotting Framework umgestiegen, dass sich ebenfalls mit JS und xml sehr komfortabel steuern lässt. Sehr zu empfehlen: AmCharts
Hier mal ein Beispiel, wie dann demnächst mein Code aussieht:
<script type="text/javascript"> var params = { bgcolor:"#FFFFFF" }; var flashVars = { path: "/amcharts/amcharts/flash/", settings_file: "/amcharts/basicSamples/sampleData/mica_line_settings.xml", data_file: "/amcharts/basicSamples/sampleData/mica_line_data.xml" }; // change 8 to 80 to test javascript version if (swfobject.hasFlashPlayerVersion("8")) { swfobject.embedSWF("/amcharts/amcharts/flash/amline.swf", "chartdiv", "600", "400", "8.0.0", "../../amcharts/flash/expressInstall.swf", flashVars, params); } else { var amFallback = new AmCharts.AmFallback(); // amFallback.settingsFile = flashVars.settings_file; // doesn't support multiple settings files or additional_chart_settins as flash does // amFallback.dataFile = flashVars.data_file; amFallback.chartSettings = flashVars.chart_settings; amFallback.pathToImages = "/amcharts/amcharts/javascript/images/"; amFallback.chartData = flashVars.chart_data; amFallback.type = "line"; amFallback.write("chartdiv"); } </script>Ich weiß nicht, wie ich das alles in JSON packen soll und denke auch, es geht leichter. Da hier aber zusätzlich die eigentlichen Graphikdaten in den xml's liegen, kann ich die eher mit php bearbeiten/erstellen und die ganze Funktion kann von Anfang an in der handleRequest stehen...?!?
Dies würde bedeuten in das Prototype Framework einzugreifen, richtig? Sagen wir mal, wenn das nicht in meiner Absicht liegt, kann man das dann anders lösen? Um das Framework zu nutzen muss dieser JavascriptCode irgendwann einmal ausgeführt werden, um die svg-Daten zu produzieren.
Ich kenne Prototype als Javascript-Framework, serverseitig tut das nix. Insofern ist Prototype nicht für dein derzeitiges HTML verantwortlich, sondern dort ist lediglich eine HTML+Javascript-Ausgabe versammelt, die eine Grafik malt, und die lädst du per Ajax, anstelle mit einem normalen Browser-Request.
... wo er eben nicht interpretiert wird :(
Insofern vermute ich: Das Datensammeln und -ausgeben hat mit Prototype nichts zu tun und kann auch geändert werden (auf JSON), und wenn das so ist, dann kann auch das Einfügen der Daten in die Darstellungsroutine geändert werden (indem die Daten aus JSON als Parameter in eine Darstellungsfunktion eingefügt werden, welche dann alles tut, was zum Zeichnen der Grafik nötig ist).
Hat am Ende den Vorteil, dass die Datenmenge kleiner bleibt.
Da hast Du bestimmt Recht.
- Sven Rautenberg
-
-
-
Habe eine html-Seite (sagen wir page.html), welche eine JS-funktion anstößt (button, Funktion MakeRequest()), die einen AjaxRequest zu einem php-Skript startet (batch.php). Jenes php-Skript öffnet eine CSV-Textdatei und baut mit dem Prototype-Framework einen svg-Graphen aus den Werten der Textdatei.
Es schiebt zunächst ein div raus, und füllt dann dieses Div mittels JS mit der Grafik. Ich weiß nun nicht, wie ich diesen return in meine ursprüngliche html-Seite kriege.
Aber dann wird der JS code ja nicht interpretiert. Ebenso wird ja ein vom batch.php zurückgegebenes "<script type='text/javascript' >alert('hier');</script>" nicht interpretiert, sprich es gibt kein Fenster.
Die Frage reduziert: wie kann ich von der batch.php produzierten JS-code ausführen?
Also ich habe nun zwei Wege gefunden, von denen ich aber überhaupt nicht weiß, wie sauber sie sind. Vielleicht nochmal eine Hilfe...
Der return soll jetzt mal ein einfaches alert("hier kommt JS vom batch"); Also JS, und das soll interpretiert werden.
-
Das Script (das per AJAX aufgerufen wird) schreibt:
echo "alert('hier kommt JS vom batch');"
In der Callback-Funktion steht dann nicht mehr
document.getElementById('ajaxcontent').innerHTML = req.responseText;
sondern
eval(req.responseText); -
Das Script (das per AJAX aufgerufen wird) schreibt:
echo "<script type='text/javascript' defer='defer'>alert('hier kommt JS vom batch');</script>";
und in der Callback-Funktion:
~~~javascript var div=document.createElement("div");
div.innerHTML=responseText;
document.body.appendChild(div);
Dit funktioniert hier jetzt. Welcher Weg ist besser? Grüße -