AJAX responseText werden überschrieben

[OJMD]

Hallo zusammen,

ich beschäftige mich seit kurzen mit dem Thema AJAX.

Als Übung oder Idee möchte ich eine Webseite für mein Computerspiel erstellen. Hier werden alle meine Spiele Charakter aufgeführt. Jeder Charakter soll einen Update Button erhalten. Wenn dieser gedrückt wird, soll im Hintergrund eine API aufgerufen werden der die Daten dann in ein JSON File speichert, und als response Text dann zurückmelden das die Daten des entsprechenden Charakters aktualisiert wurden.

Soweit klappt das schon gut, mein Problem ist, dass ich mehr wie 10 oder 20 Charaktere habe. Wenn ich auf alle aktualisieren Buttons drücke, werden die Daten zwar alle aktualisiert aber der response Text wird anscheinend immer überschrieben und enthält nur die Information des letzten Aufrufes.

Ich denke das liegt daran, dass das API aufrufen und in File speichern ein paar Sekunden dauert.

function updateAPIdaten( cid ){
var erg = ''; 
var arr = [];


 if (window.XMLHttpRequest)
 {
  // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
  xmlhttp=new XMLHttpRequest();
 }
 else
 {
  // AJAX mit IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
      erg = xmlhttp.responseText;
      console.log( "Erg: " + erg );

      arr = erg.split("|");

     // UpdateShow( arr[1] );
     //document.getElementById( cid ).innerHTML= arr[0] + " -> " + arr[1];
  }
 }
 xmlhttp.open("GET","apidownload.php?cid="+cid ,true);
 xmlhttp.send();

}

Frage ist nur, gibt es eine Möglichkeit das trotzdem irgend wie umzusetzen?


Mit freundlichen Grüßen Oliver

[hellbringer]

Hampel nicht manuell mit XMLHTTP herum, sondern verwende etwas, das sich um all das kümmert. z.B. jQuery.

Wo hast du den Steinzeitcode überhaupt ausgegraben? Rechnest du wirklich mit Besucher, die IE5 und IE6 verwenden?

[OJMD]

Hallo hellbringer,

das war glaube der zweite Treffer bei Google. Und ich denke nicht das ich IE5-IE6 unterstützen muss.

Ich werde hier, wie du angeregt hast es mit jQuery versuchen. Aber wird das mein Problem lösen?


Mit freundlichen Grüßen ...

[hellbringer]

Ich werde hier, wie du angeregt hast es mit jQuery versuchen. Aber wird das mein Problem lösen?

Ich kann das Problem nicht nachvollziehen. Pro Request gibts einen Response. Da wird nichts überschrieben.

[OJMD]

Es klappt, vielen Dank hellbringer!!

<script>
$(document).ready(function(){    
    $("button").click(function(){        
            var id = this.id;        
            $.ajax({url: "apidownload.php?cid=" + id, success: function(result){
            $('#erg_'+ id).html(result);            
        }});
    });
});
</script> 

[Arne Drews]

jQuery macht an der Stelle nur Sinn, wenn es bereits eingebunden ist. Für so eine kleine Nichtigkeit muss man keine ganze Bibliothek laden.

[hellbringer]

jQuery macht an der Stelle nur Sinn, wenn es bereits eingebunden ist. Für so eine kleine Nichtigkeit muss man keine ganze Bibliothek laden.

Allein die Diskussion darüber erzeugt mehr Overhead als sie einfach zu verwenden.

[Arne Drews]

Also anstatt das anzusprechen, empfehlen wir jetzt immer, wenn irgendein Framework oder eine Library eine Funktionalität vereinfacht, diese/s auch zwingend komlpett einzubinden?!
Spannende Einstellung... Hätte das von Dir etwas fundamentierter erwartet...

[hellbringer]

Also anstatt das anzusprechen, empfehlen wir jetzt immer, wenn irgendein Framework oder eine Library eine Funktionalität vereinfacht, diese/s auch zwingend komlpett einzubinden?!
Spannende Einstellung... Hätte das von Dir etwas fundamentierter erwartet...

Das "komplett einbinden" sind 30kB. Wenn aus einem CDN eingebunden, dann meist schon vom Browser gecached. Wegen so einem Fliegenschiss fang icht nicht an mir Alternativen zu überlegen. Jede Minute, die man dafür verwendet, ist IMHO verschwendete Zeit, die man auch sinnvoller nutzen könnte. Ob jetzt jQuery oder eine andere Lib ist nebensächlich. Soll jeder das verwenden, mit dem er sich wohl fühlt. Aber jQuery kennen und können schon die meisten. Man findet massenweise Doku, Tutorials, Bücher, Forenbeiträge, usw. dazu.

Man muss nicht jedesmal das Rad neu erfinden. Und selbst wenn heutige Browser schon wesentlich komfortabler sind als so Unfälle wie IE5, IE6, usw. ist nativer JavaScript-Code meist doch noch umfangreicher und unübersichtlicher. Kann man natürlich alles in eigene Funktionen auslagern, aber im Endeffekt beginnt man dann damit eine eigene Lib zu schreiben. Also wozu nicht gleich eine verwenden, die schon existiert, umfangreich getestet wurde und mit der sich Millionen von Software-Entwicklern auskennen?

[Dormilich]

Ich werf mal noch die Fetch API (https://developer.mozilla.org/en-US/...PI/Using_Fetch) ins Rennen, die ist ähnlich kompakt wie jQuery und existiert nativ auch in allen Browsern (außer IE).

[Arne Drews]

Wegen so einem Fliegenschiss fang icht nicht an mir Alternativen zu überlegen.Jede Minute, die man dafür verwendet, ist IMHO verschwendete Zeit, die man auch sinnvoller nutzen könnte.

Dann nutze es halt sinnvoll, es geht ja hier nicht um Dich oder mich.

Ob jetzt jQuery oder eine andere Lib ist nebensächlich. Soll jeder das verwenden, mit dem er sich wohl fühlt.

Ganz genau, deshalb habe ich das nochmal erwähnt, dass es auch nativ nicht viel mehr Aufwand ist. Dein Beitrag #7 widerspricht dieser Argumentation und ist einfach überflüssig.

Aber jQuery kennen und können schon die meisten. Man findet massenweise Doku, Tutorials, Bücher, Forenbeiträge, usw. dazu.

"Können" ist relativ. Ich behaupte, dass viele die jQuery "können", kaum einen Plan von JavaScript haben. Ich finde es ganz einfach problematisch, die Basics nicht zu kennen.

Man muss nicht jedesmal das Rad neu erfinden. Und selbst wenn heutige Browser schon wesentlich komfortabler sind als so Unfälle wie IE5, IE6, usw. ist nativer JavaScript-Code meist doch noch umfangreicher und unübersichtlicher.

Ansichtssache, ich finde das nicht immer gleich unübersichtlicher. Klar hast Du ein paar Zeilen mehr manchmal, aber für immer wiederkehrende Dinge kann man sich auch kleine Helfer basteln.
Ein Beispiel, weil man häufig sieht, dass gerade Anfänger jQuery allein schon wegen der Selektion schick findet:

Kurze Funktion im jQuery-Style selbst gestrickt:

$ = (q) => { _e = document.querySelectorAll(q); return _e.length > 1 ? _e : _e[0]; };

und voilá schon ist die Selektion ähnlich wie in jQuery für meine JS-Scripte nativ verfügbar:

$('div > button')

und genau so kann man sich auch den XMLHttpRequest "aufhübschen" ( hier prinzipiell angedeutet! ):

$.ajax = ( url ) => {
    // hier das Request-Gedöns ( mach jQuery im Background auch nicht viel anders )
};

Ist zwar nur der Ansatz, aber relativ problemlos umsetzbar.

Kann man natürlich alles in eigene Funktionen auslagern, aber im Endeffekt beginnt man dann damit eine eigene Lib zu schreiben. Also wozu nicht gleich eine verwenden, die schon existiert?

Da gebe ich Dir recht, das muss man wirklich nicht tun. Obiges Beispiel war nur gedacht, um zu zeigen, dass jQuery & Co. in vielen Fällen überflüssig sind. Aber Du sprichst im Bezug auf diese Diskussion von Overhead, das ist die Antwort auf Deine letzte Frage.

Damit aber der Overhead hier - wie Du ja richtig schreibst - nicht zu groß wird, belasse ich das mit diesem Beitrag dabei.
Ob Du selber den Overhead noch erweitern willst, liegt bei Dir...