mozilla
您的搜索结果

    Sending and Receiving Binary Data

    使用JavaScript类型数组接受二进制数据

    可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document", 和 "text". response属性的值会根据responseType属性的值的不同而不同, 可能会是一个 ArrayBuffer, Blob, Document, string,或者为NULL(如果请求未完成或失败)

    下例读取了一个二进制图像文件,并且由该文件的二进制原生字节创建了一个8位无符号整数的数组.

    var oReq = new XMLHttpRequest();
    oReq.open("GET", "/myfile.png", true);
    oReq.responseType = "arraybuffer";
    
    oReq.onload = function (oEvent) {
      var arrayBuffer = oReq.response; // 注意:不是oReq.responseText
      if (arrayBuffer) {
        var byteArray = new Uint8Array(arrayBuffer);
        for (var i = 0; i < byteArray.byteLength; i++) {
          // 对数组中的每个字节进行操作
        }
      }
    };
    
    oReq.send(null);
    

    除了上面的方法,还可以使用 BlobBuilder API 直接将arraybuffer数据添加进一个Blob对象中, 由于该API还在试验阶段,所以需要加上特定的前缀:

    var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;
    var oReq = new XMLHttpRequest();
    oReq.open("GET", "/myfile.png", true);
    oReq.responseType = "arraybuffer";
    
    oReq.onload = function(oEvent) {
      var blobBuilder = new BlobBuilder();
      blobBuilder.append(oReq.response);
      var blob = blobBuilder.getBlob("image/png");
      // ...
    };
    
    oReq.send();
    
    

    Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) XMLHttpRequest对象添加了一个私有的非标准属性mozResponseArrayBuffer,在Gecko 6 (Firefox 6 / Thunderbird 6 / SeaMonkey 2.3)之后不应该再使用了.

    在老的浏览器中接受二进制数据

    下面的load_binary_resource()方法可以从指定的URL那里加载二进制数据,并将数据返回给调用者.

    function load_binary_resource(url) {
      var req = new XMLHttpRequest();
      req.open('GET', url, false);
      //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
      req.overrideMimeType('text/plain; charset=x-user-defined');
      req.send(null);
      if (req.status != 200) return '';
      return req.responseText;
    }
    

    最为奇妙的操作在第五行,该行重写了默认的MIME类型,强制浏览器将该响应当成纯文本文件来对待, 使用一个用户自定义的字符集.这样就是告诉了浏览器,不要去解析数据,直接返回未处理过的字节码.

    var filestream = load_binary_resource(url);
    var abyte = filestream.charCodeAt(x) & 0xff; // 扔掉的高位字节(f7)
    

    上例从请求回来的二进制数据中得到偏移量为x处的字节.有效的偏移量范围是0到filestream.length-1.

    查看 使用XMLHttpRequest下载文件 了解详情,查看下载文件.

    发送二进制数据

    XMLHttpRequest对象的send方法已被增强,可以通过简单的传入一个ArrayBuffer, Blob, 或者 File对象来发送二进制数据.

    下例创建了一个文本文件,并使用POST方法将该文件发送到了服务器上.你也可以使用文本文件之外的其他二进制数据类型.

    var oReq = new XMLHttpRequest();
    oReq.open("POST", url, true);
    oReq.onload = function (oEvent) {
      // 上传完成后.
    };
    
    var bb = new BlobBuilder(); // 需要合适的前缀: window.MozBlobBuilder 或者 window.WebKitBlobBuilder
    bb.append('abc123');
    
    oReq.send(bb.getBlob('text/plain'));
    

    将类型数组作为二进制数据发送

    你可以将JavaScript类型数组作为二进制数据发送出去.

    var myArray = new ArrayBuffer(512);
    var longInt8View = new Uint8Array(myArray);
    
    for (var i=0; i< longInt8View.length; i++) {
      longInt8View[i] = i % 255;
    }
    
    var xhr = new XMLHttpRequest;
    xhr.open("POST", url, false);
    xhr.send(myArray);
    

    上例新建了一个512字节的8位整数数组并发送它,当然,你也可以发送任意的二进制数据.

    注意: 从Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)开始,添加了使用XMLHttpRequest发送 ArrayBuffer对象的功能.

    Firefox私有方法

    下面的例子使用了POST请求,用Firefox私有的非标准方法sendAsBinary()将二进制数据以异步模式传输了出去.

    var req = new XMLHttpRequest();
    req.open("POST", url, true);
    // 这里应该设置适当的MIME请求头
    req.setRequestHeader("Content-Length", 741);
    req.sendAsBinary(aBody);
    

    第四行将Content-Length请求头设置为741,表示发送的数据长度为741个字节.你应该根据你要发送的数据的大小改变这个值.

    第五行使用sendAsBinary()方法发送这个请求.

    你也可以通过将一个nsIFileInputStream对象实例传给send()方法来发送二进制内容,这样的话,你不需要自己去设置Content-Length请求头的大小,程序会自动设置:

    // 新建一个文件流.
    var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                           .createInstance(Components.interfaces.nsIFileInputStream);
    stream.init(file, 0x04 | 0x08, 0644, 0x04); // file是一个nsIFile对象实例   
    
    // 设置文件的MIME类型
    var mimeType = "text\/plain";
    try {
      var mimeService = Components.classes["@mozilla.org/mime;1"]
              .getService(Components.interfaces.nsIMIMEService);
      mimeType = mimeService.getTypeFromFile(file); // file是一个nsIFile对象实例
    }
    catch (oEvent) { /* 丢弃异常,使用默认的text/plain类型 */ }
    
    // 发送    
    var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
                        .createInstance(Components.interfaces.nsIXMLHttpRequest);
    req.open('PUT', url, false); /* 同步模式! */
    req.setRequestHeader('Content-Type', mimeType);
    req.send(stream);
    

    文档标签和贡献者

    此页面的贡献者有: ziyunfei
    最后编辑者: ziyunfei,