ajax|加载
在坛子里看见一贴子<如何用javascript显示二进制数据图片>看了他们的回复,没中要害,楼主的主要意思是后台入BinaryWrite()输出一张图片,Ajax接收时如何把它显示出来..回贴的五颜六色,众说风云..其实楼主的意思是要求图片数据接收没有完成以前保持"图片加载中..."的效果给用户,一旦数据完成接收则立即显示..
我们知道用数据库保存的二进制图片数据都是先通过后台读取数据,输入到客户端.在Asp.Net中我们用Response.BinaryWrite()生成图片给浏览器,在客户端直接<img src="xxx.aspx?id=xxxxxx>就OK了.如果是这样,干嘛要用Ajax啊,你说呢..接直调用不就行了.我们也知道用Javascript加载二进制图形数据很麻烦,而且绝不是好方法
下面是我实现的思路:
首先:后台输入图片是肯定的.我们要解决的是怎样才能知道数据接收完成了呢?完成之后数据还是二进制的数据,我们怎样才能输出到浏览器呢?呵呵.其实很简单利用Cache,同一个url请求会先调用Cache,接收xmlhttp对象返回就是接收完成了xhr.status=200,这个时候图片已经被下载到缓存中了直接<img src=url>图片直接显示出来了,因为相同URL所以浏览器直接调用Cache中的图片数据,记住哦,这里的URL要保持与xhr.open()里的url一样哦.下面给大家代码参考
function LoadImage(ElementID,id)
{
//ElementID <img>的ID
//id 请求的图片ID
var url="getimage.aspx?ID="+id+"&stamptime="+new Date().getTime(); //这里用new Date().getTime()可以使刷新图片
var xhrObject = GetXhrObject();
xhrObject.onreadystatechange=function event()
{
if(xhrObject.readystate==4)
{
if(xhrObject.status==200)
{
document.getElementById(ElementID).src=url;
}
}
}
xhrObject.open("get",url);
xhrObject.send(null);
}