Der folgende Code soll zwei images abbilden. Er läuft über meinen selbst geschriebenen localhost- Server. Die Bilddaten werden geliefert entweder über die GET- Anforderung "bild1.bmp" oder durch "getpicinit".
Auf der Serverseite wird dann in beiden Fällen genau dieselbe Datei zurückgeliefert, aber es kommt zu mit nicht erklärlichen Fehlern. Die id='test'- Zeile liefert den Alternativtext (Datei kann nicht geladen werden). Die Art der Fehlermeldungen auf meinem Server bzw in der Firefox- console ist dabei abhängig vom Wert für "responseType". Allerdings komme ich mit keinem Wert für "responseType" zum angestrebten Ergebnis. (Wenn der responseType zum Beispiel ='text' ist, geht eine Anfrage an den Server (GET /NULL)).
Wie kann ich die Daten aus myAjax.responseText so übernehmen, dass sie als BMP- Datei akzeptiert werden und die Bilddatei dargestellt wird?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table { border: 2px solid black; }
tr { border: 2px solid black; }
td {
border: 1px solid black;
vertical-align: top;
}
body { background-color: #d8d8a8; }
mytext {;}
</style>
<script type="text/javascript">
function getdata(triggername, idname){
var myAjax = new XMLHttpRequest();
//myAjax.responseType="moz-chunked-text"; Anforderung an Server: //GET /NULL
//myAjax.responseType="";//Fehler im Server, Anforderung "GET /BM6%..." (unbekanntes Dokument)
//myAjax.responseType='text'; //wie zuletzt
//myAjax.responseType="arraybuffer";//Fehlermeldung in console: InvalidStateError: responseText is only available if responseType is '', 'document', or 'moz-chunked-text'. getdata/myAjax.onreadystatechange
//myAjax.responseType="blob"; // wie zuletzt
myAjax.onreadystatechange=function(){
if (myAjax.readyState==4 && myAjax.status==200){
if (triggername=="getpicinit") {
pic=new Image();
//pic.src=myAjax.responseText;
//pic.src='bild1.bmp'; //mit dieser Zeile wird ein Bild angezeigt
pic.src=myAjax.responseText;
//console.log("if getpicinit");
//console.log(idname);
document.getElementById(idname).src=pic.src;
}
}
};
myAjax.open("GET", triggername, true);
console.log("getriggert "+triggername);
myAjax.send();
}
getdata("getpicinit", "test");
</script>
</head>
<body>
<h1>Beispiel</h1>
<img id="test" alt="Datei kann nicht geladen werden" />
<h1>Beispiel 2</h1>
<img id="test" src='bild1.bmp' alt="Datei kann nicht geladen werden" />
</body>
</html>