JavaScript - Funktionsaufruf über AJAX-Response

Maxe Gast #6246984
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
noname Gast #6247378
Lesenswert?
• ▲
▼ 
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
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Maxe Gast #6248024
Lesenswert?
• ▲
▼ 
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
}
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Maxe Gast #6248184
Lesenswert?
• ▲
▼ 
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
}
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Bastler Gast #6248984
Lesenswert?
• ▲
▼ 
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
  }
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt. Bitte hier nur auf die ursprüngliche Frage antworten, für neue Fragen einen neuen Beitrag erstellen.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.