处理来自XMLHttpRequest的图像(使用HTML和Javascript)

Question

我正在使用XMLHttpRequest从服务器获取图像(从第三方服务器小程序本地运行)

甲简化的代码版本如下所示.

图像以JPEG格式返回,返回的标题显示"content-type = image/jpg".我可以通过Firebug for Firefox查看信息.

但是我有一个可怕的时间能够在网页上显示实际图像,因为它是从服务器返回的图像数据而不是图像位置的uri.

从返回的数据中显示此图像的正确方法是什么？我应该使用<span>标签,<img>标签还是<magical-show-image-from-data>标签？

function getXML(url, postData, requestStateChangeHandler){        
    if(window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {//Code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = requestStateChangeHandler;

    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader('Content-Type', 'text/xml');
    xmlhttp.setRequestHeader('Cache-Control', 'no-cache');
    xmlhttp.send(postData);
}


function requestStateChangeHandler(){
    if (xmlhttp.readyState == 4) 
    {
        if(xmlhttp.status == 200)
        {
            document.getElementById('results').innerHTML = xmlhttp.responseText;
        }
        else
            dump("Error loading page\n");
    }
}

Answer 1

您可以使用内嵌图像

在服务器端编码您在base64中的响应

在PHP使用base64_encode("your data")
和在JavaScript中

result = document.getElementById('results');
result.innerHTML = '<img src="data:image/gif;base64,' + xmlhttp.responseText + '"/>';