通過HTTP在JavaScript中發送二進制數據

Question

我正在嘗試將HTTP POST發送到網絡上的設備。 不幸的是，我想將四個特定字節的數據發送到設備，但我似乎只能將字符串發送到設備。 反正有使用JavaScript發送原始二進制文件嗎？

這是我用來執行POST的腳本，除非我在數據字段中輸入字符串，否則它目前不會運行。 有任何想法嗎？

(function ($) {
   $.ajax({
      url: '<IP of Address>',
      type: 'POST',
      contentType: 'application/octet-stream',

      //data:'253,0,128,1',
      data:0xFD008001,

      crossDomain: true
   });
})(jQuery);

Answer 1

默認情況下，jQuery對數據進行序列化（傳遞data屬性）-這意味着0xFD008001 數字作為“ 4244668417” 字符串 （10個字節，而不是4個）傳遞給服務器，這就是服務器將其視為未按預期方式處理的原因。

有必要通過將$.ajax屬性processData設置為false來防止這種行為：

默認情況下，作為對象傳遞給data選項的數據（從技術上講，不是字符串）將被處理並轉換為查詢字符串，以適合默認的內容類型“ application / x-www-form-urlencoded” 。 如果要發送DOMDocument或其他未處理的數據，請將此選項設置為false。

...但這只是整個故事的一部分： XMLHttpRequest.send實現有其自身的限制 。 我想，這就是為什么您最好的選擇是使用TypedArrays制作自己的序列化程序 ：

// Since we deal with Firefox and Chrome only 
var bytesToSend = [253, 0, 128, 1],
    bytesArray = new Uint8Array(bytesToSend);

$.ajax({
   url: '%your_service_url%',
   type: 'POST',
   contentType: 'application/octet-stream',  
   data: bytesArray,
   processData: false
});

或者根本不使用jQuery：

var bytesToSend = [253, 0, 128, 1],
    bytesArray = new Uint8Array(bytesToSend);

var xhr = new XMLHttpRequest();
xhr.open('POST', '%your_service_url%');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(bytesArray);

Answer 2

您可以使用xhr2通過ajax發送二進制數據，也可以將數據作為類型化數組或blob發送 。

(function ($) {
   var data = new Uint32Array(1);
   data[0] = 0xFD008001; 
   $.ajax({
      url: '<IP of Address>',
      type: 'POST',
      contentType: false,
      processData: false,
      //data:'253,0,128,1',
      data:data,

      crossDomain: true
   });
})(jQuery);

https://developer.mozilla.org/zh-CN/docs/Web/API/Uint32Array

Answer 3

您可以使用atob()和btoa() ：

var data = new Uint32Array(1);
data[0] = 0xFD008001;
atob(data)

這會將您的二進制數據轉換為可以作為文本發送的base64字符串。

Answer 4

您可以將ArrayBuffer類型的數據轉換為ArrayBufferView，如下所示：

 var fileContent = new DataView(<ArrayBuffer_data>); 

這樣，您在發送fileContent時不會在控制台中收到警告。