将Blob变量从php发送到javascript

Question

I have a php file that gets an audio blob from a sql database. I need to send that blob to an html page with JavaScript.

Below is my PHP code where I send the blob variable $ubr.

echo json_encode(array('first'=>$ubr));

Below is my JavaScript where I try and receive the blob.

var url = "testThis.php"

var ajax = new XMLHttpRequest();
ajax.open("GET", url, true);
//ajax.send(null);
ajax.onreadystatechange = function () {

    if (ajax.readyState == 4 && (ajax.status == 200)) {
        var Data = JSON.parse(ajax.responseText);               
        var b64Data = Data.first;
    }
}

I think it's because I'm treating it like a string but Blobs are binary data. Except I'm not sure what else to do.

I need to keep the php data as an array. I will need to send a blob and a string value at the same time.

Answer 1

For AjaxXMLHttpRequest, Server Response can be

1. responseText - when you return html or any string as your response.
2. responseXML - when you return XML as your response.
3. response - when you return response as an Array-buffer, Blob, Document, JavaScript object (for "json"), or string. This is null if the request is not complete or was not successful.

If you are returning HTML as response ex.PHP code :

    $data['blob']="blob_value";

   return "<div id='blob'>".$data['blob']."</div><div id='string'>".$data['string']."</div>"; // returning HTML as response .

Then you may use responseText

 ajax.onreadystatechange = function () {

             if (ajax.readyState == 4 && (ajax.status == 200)) {

               document.getElementById("target").innerHTML =(ajax.responseText);               

 }

}

In your case for returning array

PHP code can be :

  $data['blob']="blob_value";
  $data['name']="name_value";
  // returning json data ==> {"blob": "blob_value","name": "name_value"}
  return json_encode($data);  

within JavaScript :

   ajax.onreadystatechange = function () {

      if (ajax.readyState == 4 && (ajax.status == 200)) {
         var data= ajax.response;
         var arr= JSON.parse(data);
     alert(arr.blob);                        

       }
     }