JavaScript - Funktionsaufruf über AJAX-Response

[Maxe (Gast)]

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.

[Frank E. (Firma: Q3) (qualidat)]

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 ...

[Maxe (Gast)]

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.

[noname (Gast)]

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.:

// Global
var responseHandler = {
    "type1": function (data) { ... },
    "type2": function (data) { ... },
    ...
};
...

// Im AJAX callback
responseHandler[response.type](response.data);

Grüße

[Maxe (Gast)]

@noname
Vielen Dank, das hört sich gut an.

[Maxe (Gast)]

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:

{ "fktName": "showStatus2","fktParam": {"aText": "Test12"} }

Script:

function statusCall() {
  xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange= statusResponse;
  xmlhttp.timeout = 4000;
  //xmlhttp.ontimeout= timeoutEvent;
  //xmlhttp.onerror= errorEvent;
  xmlhttp.open("GET","/status",true);
  xmlhttp.send();
}

var responseHandler = {
  showStatus,
  showStatus2
};

function statusResponse() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    var response = JSON.parse( xmlhttp.responseText );  
    responseHandler[response.fktName](response.fktParam);    
  }
}

function showStatus(params) {
    statusPanel.textContent = params.aText;
    statusPanel.style.visibility = "visible"
}

[Maxe (Gast)]

OK, ich habs :)

Hier der Response-Text:

{ "fkts": [
  {"fktName": "showStatus",
  "fktParam": {"aText": "Test12"} },
  {"fktName": "showStatus2",
  "fktParam": {"aText": "Hallo"} } ]}

und die Verarbeitung:

function statusResponse() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    var response = JSON.parse( xmlhttp.responseText );
    for (var ii in response.fkts)  
    {responseHandler[response.fkts[ii].fktName](response.fkts[ii].fktParam);}    
  }
}

[temp (Gast)]

Bei neuem Code würde ich fetch() verwenden und nicht XMLHttpRequest:

https://developer.mozilla.org/de/docs/Web/API/Fetch_API/Using_Fetch

[Bastler (Gast)]

Das ist ja maximal kryptisch. Viel einfacher:

JSON:

{
  "calls": [
    [ "showStatus", "arg1", "arg2" ],
    [ "machWas", { "someObject": "some value"} ],
    [ "keineParameter" ]
  ]
}

Und im Handler:

  const response = JSON.parse(...);
  response.calls.forEach((call) => {
    const [fn, ...args] = call;
    responseHandler[fn](...args);
  }