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

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren