ajax的返回数据的类型有五中，，在研究three的loader的时候，突然发现ajax返回的数据还有arrayBuffer数据类型，以前我只知道返回文本，，于是我查阅资料，总结了一下，，以下是我的总结：

responseType的值如下五中：

《1》“ ”和  "text"           字符创（默认）   

《2》“arraybuffer”        ArrayBuffer 对象  二进制数据

《3》 “blob”                 blob 对象 （经常用于fileReader对象读取文件的值）

《4》  “document”     document 对象

《5》   “json”             json对象

对于字符串的我们已经经常用了，，这节我们讲解arraybuffer：  实现three的loader的原理，这里以TGALoader为例：

//  content[ offset ++ ] | content[ offset ++ ] << 8, 位运算  <<的优先级高于 | ，
    // 运算过程   192 | 3 << 8  ===》  192 | 768  ，   3<<8  ===  3 *Math.pow(2,8);

     var offset = 0,
        header = {
            id_length: content[ offset ++ ],
            colormap_type: content[ offset ++ ],
            image_type: content[ offset ++ ],
            colormap_index: content[ offset ++ ] | content[ offset ++ ] << 8,
            colormap_length: content[ offset ++ ] | content[ offset ++ ] << 8,
            colormap_size: content[ offset ++ ],
            origin: [
                content[ offset ++ ] | content[ offset ++ ] << 8,
                content[ offset ++ ] | content[ offset ++ ] << 8
            ],
            width: content[ offset ++ ] | content[ offset ++ ] << 8,
            height: content[ offset ++ ] | content[ offset ++ ] << 8,
            pixel_size: content[ offset ++ ],
            flags: content[ offset ++ ]
        };
     var canvas = document.createElement("canvas");
     canvas.width = header.width;
     canvas.height = header.height;
     var ctx = canvas.getContext("2d");
     var imageData =  ctx.createImageData(header.width,header.height);

     //  将读取的image数据赋值给imageData

    var width = header.width;
    var i =0;
    pixel_size = header.pixel_size >> 3;
    pixel_total = header.width * header.height * pixel_size;
    //arraybuffer的截取方法返回一个新的arraybuffer

    var image =  content.subarray(offset);

    for ( var y = 0; y !== header.height; y += 1 ) {
        for ( var x = 0; x !== width; x += 1, i += 4 ) {
            imageData.data[ ( x + width * y ) * 4 + 2 ] = image[ i + 0 ];
            imageData.data[ ( x + width * y ) * 4 + 1 ] = image[ i + 1 ];
            imageData.data[ ( x + width * y ) * 4 + 0 ] = image[ i + 2 ];
            imageData.data[ ( x + width * y ) * 4 + 3 ] = image[ i + 3 ];
        }
    }

    ctx.putImageData( imageData, 0, 0 );
    document.body.appendChild(canvas);

希望对大家有用，，喜欢的话，请关注我！！！！