XMLHTTP request Ergebnis in aktuellem Div

[bart1708]

Hallo,
ich möchte mehrere XMLHTTP Requests ausführen und die Rückgabe in das aktuelle Div schreiben. Kann ich das mit einer JS-Funktion lösen?

Ungefähr so:

HTML:
<div id="temperatur_anzeige" onload="holeDaten('temperatur','temperatur_anzeige');"></div>
// holt Daten aus current.php?show=temperatur
<div id="ort_anzeige" onload="holeDaten('location','ort_anzeige');"></div>
// holt Daten aus current.php?show=location

Ergebnis z. B.:
<div id="temperatur_anzeige">28.8</div>
<div id="ort_anzeige">Berlin</div>

Kann ich das auch so lösen, das die per HTTP Request geholten Daten an Ort und Stelle, unabhängig vom DIV-ID ausgegeben werden, also ähnlich wie bei include() in PHP? Die Nutzung von include fällt weg, weil zuerst der Standort per JS abgefragt wird.

Danke für die Hilfe.

[molily]

Hallo,

<div id="temperatur_anzeige" onload="holeDaten('temperatur','temperatur_anzeige');"></div>

Kleine Anmerkung: Das load-Ereignis passiert nicht bei div-Elementen, sondern dokumentweit beim window-Objekt. Dieser Code in onload wird wahrscheinlich nicht ausgeführt.

Hintergrund siehe:
http://molily.de/js/event-handling-grundlagen.html
http://molily.de/js/event-handling-onload.html

Kann ich das auch so lösen, das die per HTTP Request geholten Daten an Ort und Stelle, unabhängig vom DIV-ID ausgegeben werden

Ja. Wenn du das zentral löst, kannst du das Element einfach an die Funktion übergeben:

// Beim erfolgreichen Einlesen des Dokuments, starte automatisch XHR-Requests:  
document.addEventListener('[link:http://molily.de/js/event-handling-onload.html#domcontentloaded@title=DOMContentLoaded]', function() {  
  // Quelle -> Zielelement  
  ladeDaten('temperatur', document.getElementById('temperatur_anzeige'));  
  ladeDaten('ort',        document.getElementById('ort_anzeige'));  
});  
  
var ladeDaten = function(typ, element) {  
  // Sende XMLHttpRequest  
  var xhr = new XMLHttpRequest();  
  xhr.open('GET', '/current.php?show=' + typ);  
  xhr.onload = function() {  
    // Im Success-Callback wird das Element dann mit der Serverantwort gefüllt.  
    // Das geht z.B. mit innerHTML oder textContent, je nachdem, ob der Server  
    // HTML oder einfachen Text zurückgibt:  
    element.innerHTML = xhr.responseText;  
  };  
  xhr.send();  
};

Das Beispiel ist ungetestet und auf neuere Browser ausgelegt.

Grüße
Mathias