通过JavaScript XHR2对象在PHP中发送ArrayBuffer

时间:2014-11-05 18:13:28

标签: javascript php ajax xmlhttprequest arraybuffer

在这里,我是基于XHR2支持的承诺(https://github.com/pyrsmk/qwest)编写新版本的AJAX库。我目前正在编写单元测试,95%的库现在很强大。无论如何,我需要验证我们是否可以成功检索ArrayBuffer(XHR2支持' arraybuffer'响应类型)但是如何用PHP生成这个ArrayBuffer?我使用什么协议? BASE64?

我真的不知道如何处理整件事......

编辑:似乎当我向PHP发送一个ArrayBuffer时,数据直接由$ _POST变量处理

2 个答案:

答案 0 :(得分:4)

简介

好吧,你不发送“ArrayBuffer”。您发送的是数据并指定一种格式来理解该数据。然后,客户可以选择解释它的最佳方式。

因此, ArrayBuffer只是数据(二进制数据)的通用固定长度容器,使您能够使用JavaScript类型数组创建基础数据的“视图”。很酷的是,可以从单个ArrayBuffer源创建多个视图。


话虽如此,在您的具体情况下,您可以使用与以PHP发送任何数据相同的方式在PHP中发送二进制数据。

实施例

server.php

$filename = 'img.png';
$fsize = filesize($filename);

$handle = fopen($filename, "rb");
$contents = fread($handle, $fsize);
fclose($handle);

header('content-type: image/png');
header('Content-Length: ' . $fsize);

echo $contents;

或更短

$filename = 'img.png';

header('content-type: image/png');
header('Content-Length: ' . filesize($filename));

readfile($filename);

client.js

var xhr = new XMLHttpRequest();

xhr.open('GET', 'server.php', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    var uInt8Array = new Uint8Array(this.response);
    console.log(uInt8Array);
};

xhr.send();

答案 1 :(得分:0)

在php中处理二进制数据有点棘手。要响应ArrayBuffer,必须将其转换为二进制字符串,并使用 echo 语句生成它。

要从8位数组生成二进制字符串,必须使用 pack 语句。如果服务器不支持PHP版本5.6+,则可以转换每个数组项并使用点运算符进行连接:

<强> server.php

<?php
    header('content-type: application/octet-stream');

    $arrayBuffer = array(0, 1, 2, 253, 254, 255);

    $binary = "";
    for($index = 0; $index < count($arrayBuffer); $index++)
    {
        $binary = $binary.pack("C*", $arrayBuffer[$index]);
    }

    echo $binary;
?>

原始数据的MIME类型是 application / octet-stream 。在JavaScript代码的客户端看起来像:

<强> client.js

let xmlRequest = new XMLHttpRequest();
xmlRequest.open('POST', 'server.php');
xmlRequest.responseType = 'arraybuffer';
xmlRequest.onload = event =>
{
    let arrayBuffer = new Uint8Array(event.target.response);
    console.log('arrayBuffer: ', arrayBuffer); // [0, 1, 2, 253, 254, 255];
};
xmlRequest.send();