nicht angemeldet
Daten vom Server übernehmen
JürgenBDer 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>
-
Tach!
Wie kann ich die Daten aus myAjax.responseText so übernehmen, dass sie als BMP- Datei akzeptiert werden und die Bilddatei dargestellt wird?
Nicht im src-Attribut vom Image, denn da wird eine URL erwartet, von der das Bild geladen wird. Diese URL kann aber auch eine
data:…-URL sein.Ich fände es einfacher, ein Image-Objekt zu erstellen, dessen src auf die URL zeigt, dann holt sich der Browser das Bild von selbst. Wenn du auf die Fertigstellung reagieren möchtest, kannst du das im load-Event tun. Der Server sollte entsprechende Cache-Header mitsenden, wenn du das Laden aus dem Cache verhindern möchtest.
dedlfix.
-
Hallo,
IDs müssen eindeutig sein!
Was liefert
myAjax.responseTextdenn? Steht da der Dateiname drin?Gruß
Jürgen -
Wie kann ich die Daten aus myAjax.responseText so übernehmen, dass sie als BMP- Datei akzeptiert werden und die Bilddatei dargestellt wird?
Setze responseType auf ArrayBuffer. Im AjaxCallback mache daraus einen Blob und aus dem Blob einen BlobURL, dieser kann direkt dem src= zugewiesen werden.
Alternative: responseType Text und die Binary als Base64 senden, damit kommt src= auch zurecht.
MfG
-
In diesem Falle, wenn ich
myAjax.responseType="ArrayBuffer";setze, geht eine Anfrage an den Server: GET /BM6%EF%BF%BD HTTP/1.1. diese wird ausgelöst durch die JavaScript- zeile
pic.src=myAjax.responseText;
-
Ne so einfach ist das nicht, guck mal hier wie das gemacht wird. MfG
-
-