Hallo miteinander, folgendes Problem: Ich möchte mittels AJAX Daten von meinem Server abrufen, die dann clientseitig verschiedene Javascript-Funktionen aufrufen. -> Was für Möglichkeiten gibt es, das recht einfach durchzuführen? Die händische Variante wäre wohl, den Funktionsnamen und die Parameter auszulesen und in einer if/elseif-Kette die entsprechende Funktion zu rufen. Dann habe ich gelesen, dass es die eval-Funktion gibt, die eine Zeichenkette als JavaScript-Code ausführt, ich könnte dort also direkt den Funktionsaufruf reinschreiben. Es wird allerdings davon abgeraten. Dann gibts noch die "new Function"-Methode, bin mir aber nicht sicher, ob man damit auf bestehende Variablen zugreifen kann. Kann man sich mittels JSON auf Objektebene was basteln? Wie würdet ihr das machen? Es geht am Schluss um vielleicht 20 bis 50 Funktionen. Vielen Dank schonmal! PS: Bin Anfänger in der Web-Thematik.
Ich würde mir mal das Thema "Websocket" ansehen. Das hat aber nur Sinn, wenn du vorher schon mal in anderen Programmiersprachen mit TCP-Sockets gearbeitet hast ...
Danke schonmal. Ich war zwar eher auf die Datenebene aus (ich nehm an bei Websockets besteht das gleiche Problem?). Aber ich schau mir da auf jeden Fall mal an.
Die Datensätze, die als JSON vom Server abgerufen werden, haben einfach ein String Property wie z. B. "type". Für die Typen existiert ein Dictionary (== JS Objekt), das die Funktionen zuordnet, z. B.:
1 | // Global |
2 | var responseHandler = { |
3 | "type1": function (data) { ... }, |
4 | "type2": function (data) { ... }, |
5 | ... |
6 | }; |
7 | ... |
8 | |
9 | // Im AJAX callback |
10 | responseHandler[response.type](response.data); |
Grüße
OK, das funktioniert schonmal, Code siehe unten. Wenn ich jetzt mehrere Funktionsaufrufe mitschicken möchte, wie müsste das aussehen? Klar, ich könnte fkt2Name und fkt3Name definieren, dann wäre aber die Anzahl an Funktionen ja fest. Übertragener Text:
1 | { "fktName": "showStatus2","fktParam": {"aText": "Test12"} } |
Script:
1 | function statusCall() { |
2 | xmlhttp=new XMLHttpRequest(); |
3 | xmlhttp.onreadystatechange= statusResponse; |
4 | xmlhttp.timeout = 4000; |
5 | //xmlhttp.ontimeout= timeoutEvent; |
6 | //xmlhttp.onerror= errorEvent; |
7 | xmlhttp.open("GET","/status",true); |
8 | xmlhttp.send(); |
9 | } |
10 | |
11 | var responseHandler = { |
12 | showStatus, |
13 | showStatus2 |
14 | }; |
15 | |
16 | function statusResponse() { |
17 | if (xmlhttp.readyState==4 && xmlhttp.status==200) { |
18 | var response = JSON.parse( xmlhttp.responseText ); |
19 | responseHandler[response.fktName](response.fktParam); |
20 | } |
21 | } |
22 | |
23 | function showStatus(params) { |
24 | statusPanel.textContent = params.aText; |
25 | statusPanel.style.visibility = "visible" |
26 | } |
OK, ich habs :) Hier der Response-Text:
1 | { "fkts": [ |
2 | {"fktName": "showStatus", |
3 | "fktParam": {"aText": "Test12"} }, |
4 | {"fktName": "showStatus2", |
5 | "fktParam": {"aText": "Hallo"} } ]} |
und die Verarbeitung:
1 | function statusResponse() { |
2 | if (xmlhttp.readyState==4 && xmlhttp.status==200) { |
3 | var response = JSON.parse( xmlhttp.responseText ); |
4 | for (var ii in response.fkts) |
5 | {responseHandler[response.fkts[ii].fktName](response.fkts[ii].fktParam);} |
6 | } |
7 | } |
Bei neuem Code würde ich fetch() verwenden und nicht XMLHttpRequest: https://developer.mozilla.org/de/docs/Web/API/Fetch_API/Using_Fetch
Das ist ja maximal kryptisch. Viel einfacher: JSON:
1 | { |
2 | "calls": [ |
3 | [ "showStatus", "arg1", "arg2" ], |
4 | [ "machWas", { "someObject": "some value"} ], |
5 | [ "keineParameter" ] |
6 | ] |
7 | } |
Und im Handler:
1 | const response = JSON.parse(...); |
2 | response.calls.forEach((call) => { |
3 | const [fn, ...args] = call; |
4 | responseHandler[fn](...args); |
5 | }
|
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.