DIV CSS 佈局教程網

Ajax加載圖片
編輯: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);
}


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved