AJAX - 将返回的八位字节流转换为类型化数组 (Float64Array)

Posted 2023-05-08

【中文标题】AJAX - 将返回的八位字节流转换为类型化数组 (Float64Array)

【英文标题】：AJAX - Convert returned octet-stream to typed array (Float64Array)

【发布时间】：2021-09-28 13:19:39

【问题描述】：

我无法弄清楚我在这里做错了什么。我正在尝试将从 AJAX 调用返回的二进制流转换为 javascript 中的双精度数组。一些代码：我的服务器 php 返回一个八位字节流（双精度数组）：

while(logic_code)

  $binary .= pack('ddd*', item1, item2, item3);


header('Content-type: application/octet-stream');
header('Content-length: ' . strlen($binary));
http_response_code(200);
echo $binary;
exit;

在我的网页中，我有一个 AJAX 调用：

function getData() 
    $.ajax(
        type: 'GET',
        url:  '/my/rest/call/to/above/php/code',
        success: function(data) 
            doSomething(data);
        ,
        error: function(data, status, error) 
        
    );

然后我的函数用于处理从其余调用返回的数据doSomething(data)：

function doSomething(data) 
    // Some code here.
    
    var count = data.length / (8);  // Get number of DOUBLES
    var arr = new Float64Array(data, 0, count);

    console.log(arr);

    // Problem: 'arr' is undefined, or array of 0; but 'count' is non-zero.

    // More code here.

我面临的问题是Float64Array 似乎没有将我的数据转换为数组。我的大小为零且未定义，而 count 是一个很大的数字。 Chrome 中没有控制台错误，所以我很难确定我所缺少的内容。我想先将data 转换为ArrayBuffer 吗？我在十六进制编辑器中查看了data，并确认返回的字节流是具有正确值的正确双精度数组（64 位小端）。

【问题讨论】：

您可能需要调整 AJAX 请求中的 xhrFields 属性以设置 responseType = "arraybuffer"。见developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…

我不得不将我的ajax 调用换成xhr 的处理方式，现在它可以工作了。顺便说一句 - 自从我看到 ajax 和 XMLHttpRequest 都使用过之后，最好的方法是什么？

它们是一样的。 jQuery 的 $.ajax() 只是 XMLHttpRequest 的包装器

【参考方案1】：

Float64Array 构造函数需要一个 ArrayBuffer 参数。为了让浏览器这样解释响应，请尝试

$.ajax(
  url: "/my/rest/call/to/above/php/code",
  method: "GET",
  success: doSomething,
  error: (_, ...err) => console.error(...err),
  xhrFields: 
    responseType: "arraybuffer"
  
)

---

fetch API 等效项是这样的，使用 Response.arrayBuffer() 方法

async function getData() 
  try 
    const res = await fetch("/my/rest/call/to/above/php/code")
    if (!res.ok) 
      throw new Error(`$res.status: $await res.text()`)
    
    
    doSomething(await res.arrayBuffer())
   catch (err) 
    console.error(err)
  

【讨论】：

我不得不切换到 xhr.onload 方法才能让它工作，但我更喜欢你的方法。谢谢。