AJAX下載和顯示遠端圖片（案例實戰）

在 JavaScript 中，當 XMLHttpRequest 物件的 responseType 屬性設定為 arraybuffer 時，伺服器端響應資料將是一個 ArrayBuffer 物件。

目前，Firefox 8+、Opera 11.64+、Chrome 10+、Safari 5+ 和 IE 10+ 版本瀏覽器支援將 XMLHttpRequest 物件的 responseType 屬性值指定為 arraybuffer。

範例

下面範例設計在頁面中顯示一個“下載圖片”按鈕和一個“顯示圖片”按鈕，單擊“下載圖片”按鈕時，從伺服器端下載一幅圖片的二進位制資料，在得到伺服器端響應後建立一個 Blob 物件，並將該圖片的二進位制資料追加到 Blob 物件中，使用 FileReader 物件的 readAsDataURL() 方法將 Blob 物件中儲存的原始二進位制資料讀取為 DataURL 格式的 URL 字串，然後將其儲存在 IndexDB 資料庫中。

單擊“顯示圖片”按鈕時，從 IndexDB 資料庫中讀取該圖片的 DataURL 字串，建立一個 img 元素，然後將該 URL 字串設定為 img 元素的 src 屬性值，在頁面上顯示該圖片。

<script>
    window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
    window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
    window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
    window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
    window.URL = window.URL || window.webkitURL;
    var dbName = 'imgDB';
    var dbVersion = 20191017;
    var idb;
    function init () {
        var dbConnect = indexedDB.open (dbName, dbVersion);
        dbConnect.onsuccess = function (e) {
            idb = e.target.result;
        };
        dbConnect.onerror = function () { console.log('資料庫連線失敗'); };
        dbConnect.onupgradeneeded = function (e) {
            idb = e.target.result;
            var tx = e.target.transaction;
            tx.onabort = function (e) {
                console.log('物件倉庫建立失敗');
            };
            var name = 'img';
            var optionalParameters = {
                keyPath : 'id',
                autoIncrement : true
            };
            var store = idb.createObjectStore (name, optionalParameters);
            console.log('物件倉庫建立成功');
        };
    }
    function downloadPic () {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'image/1.png', true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function (e) {
            if (this.status == 200) {
                var bb = new Blob([this.response]);
                var reader = new FileReader();
                reader.readAsDataURL (bb);
                reader.onload = function (f) {
                    var result = document.getElementById("result");
                    //在indexDB資料庫中儲存二進位制資料
                    var tx = idb.transaction(['img'], "readwrite");
                    tx.oncomplete = function () { console.log('儲存資料成功'); }
                    tx.onabort = function () { console.log('儲存資料失敗'); }
                    var store = tx.objectStore ('img');
                    var value = { img : this.result };
                    store.put (value);
                }
            }
        };
        xhr.send();
    }
    function showPic () {
        var tx = idb.transaction (['img'], "readonly");
        var store = tx.objectStore ('img');
        var req = store.get(1);
        req.onsuccess = function () {
            if (this.result == undefined) {
                console.log("沒有符合條件的資料");
            } else {
                var img = document.createElement ('img');
                img.src = this.result.img;
                document.body.appendChild (img);
            }
        }
        req.onerror = function () {
            console.log("獲取資料失敗");
        }
    }
</script>
<body onload="init()">
    <input type="button" value="下載圖片" onclick="downloadPic()"><br />
    <input type="button" value="顯示圖片" onclick="showPic()"><br />
    <output id="result"></output>
</body>

操作步驟

1) 當使用者單擊“下載圖片”按鈕時，呼叫 downloadPic() 函數，在該函數中，XMLHttpRequest 物件從伺服器端下載一幅圖片的二進位制資料，在下載時將該物件的 responseType 屬性值指定為 arraybuffer 物件。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'image/1.png', true);
xhr.responseType = 'arraybuffer';

2) 在得到伺服器端響應後，使用該圖片的二進位制資料建立一個 Blob 物件。然後建立一個 FileReader 物件，並且使用 FilReader 物件的 readAsDataURL() 方法將 Blob 物件中儲存的原始二進位制資料讀取為 DataURL 字串，然後將其儲存在 IndexDB 資料庫中。

3) 單擊“顯示圖片”按鈕時，從 IndexDB 資料庫中讀取該圖片的 DataURL 格式的 URL 字串，然後建立一個用於顯示圖片的 img 元素，然後將該 URL 字串設定為 img 元素的 src 屬性值，在該頁面上顯示下載的圖片。

在瀏覽器中預覽，單擊頁面中“下載圖片”按鈕，指令碼從伺服器端下載圖片並將該圖片二進位制資料的 DataURL 格式的 URL 字串儲存在 indexDB 資料庫中，儲存成功後在彈出的提示資訊框中顯示“儲存資料成功”，效果如下圖所示。