Need help using XMLHttpRequest to transfer blob from MySql to Javascript
Question
I have a blob stored in WAMP64/MySQL on my local machine and I would like to test retrieving it (via localhost) and passing it to an HTML file containing Javascript using an XMLHttpRequest. This seems the best way to do this. I understand I need to specify xttp.responseType="blob". However I do not understand how to pass the blob from my PHP file to my HTML file and I was wondering if someone could help me. Here is my xtptest.html file:
<html>
<head>
this is a test
</head>
<body onload="loadDoc()">
<p> in the body </p>
<script>
var theResponse;
function loadDoc() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.response="blob";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// at this point, blob should be in this.response
theResponse=new Float32Array(this.response);
// should now be able to cast the blob as Float32
}
};
xmlhttp.open("GET","saveAlgebraicBlob.php",true);
xmlhttp.send();
}
</script>
</body>
</html>
And here is my saveAlgebraicBlob.php file (had to add html tags in here to get it to format properly) which is not saving the blob but merely retrieving it from the database via the algebraicFunctionBlob class. I can retrieve the blob, parse and display it properly in the PHP file but cannot seem to transfer it into my Javascript code.
<html>
<?php
/*
saveAlgebraicBlob.php
*/
include 'Hexdump.php';
include 'algebraicFunctionBlobClass.php';
$blobObj = new algebraicFunctionBlob();
// store blob in database
//$blobObj->insertBlob('test5.bin',"functionTrace2");
$a = $blobObj->selectBlob(2);
$myval=substr($a['webGLData'],0,100);
$myFunctionData=unpack("f*",$myval);
hexdump($myval,16,'html');
var_dump(unpack("f*",$myval));
//$myval=100;
// include "java10.html";
echo $myval;
?>
</html>
3 answers
solution1
0 2016-10-12 18:00:42
Substitute .responseType for .response . Note if you are populating a Float32Array with .response you should set .responseType to "arraybuffer"
xmlhttp.responseType = "arraybuffer";
solution2
0 2016-10-12 18:16:17
I made that change and now wish to confirm I am retrieving the data. As I understand it, I need to use FileReader to read the blob. However, when I try to execute the following code, there must be an error because the alert(reader.result); command does not execute. Note reader.result should return a typed array suitable for casting as Float32Array I believe.
<html>
<head>
this is a test
</head>
<body onload="loadDoc()">
<p> in the body </p>
<script>
var theResponse;
function loadDoc() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.responseType = "blob";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// at this point, blob should be in this.response
var reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);
alert(reader.result);
// should now be able to cast the blob as Float32
}
};
xmlhttp.open("GET","saveAlgebraicBlob.php",true);
xmlhttp.send();
}
</script>
</body>
</html>
solution3
0 2016-10-13 14:45:55
This is how I am initially solving this problem although I think it's not the best.
Is there a more efficient way of transferring large blobs? Is there a way to transmit the blob without the cr/lf at the end of the blob I generated below?
I am very new to web programming and would like to scale-up this 402 byte example to 250Mb blobs. Here is my PHP code that I access my SQL database containing a very small blob (402 bytes) I created in Mathematica containing 100 32-bit floating point numbers:
<?php
include 'Hexdump.php';
include 'algebraicFunctionBlobClass.php';
$blobObj = new algebraicFunctionBlob();
// uncomment to store blob in database
//$blobObj->insertBlob('test5.bin',"functionTrace2");
$a = $blobObj->selectBlob(8);
// echo the data but will have cr and lf appended to data
echo $a['webGLData'];
?>
And here is the short HTML/Javascript code I used to retrieve the blog and then cast the first 400 bytes to Float32Array which I confirmed in the debugger that the numbers contained in variable myData4 matched the values I generated in Mathematica:
<html>
<head>
this is a test
</head>
<body onload="loadDoc()">
<p> in the body </p>
<script>
var theResponse;
var myIntBuffer;
var myFloatBuffer;
var myDataView;
var myval;
var myval2;
var myBuffer=new ArrayBuffer(1000);
var test2;
var blob;
var reader;
var myData2;
var myData3;
var myData4;
function loadDoc() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.responseType = "blob";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
theResponse=this.response;
reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result contains the contents of blob as a typed array
// blob sent by echo has carriage return/line feed at end so chop off:
myData4=new Float32Array(reader.result.slice(0,400));
});
reader.readAsArrayBuffer(theResponse);
}
};
xmlhttp.open("GET","saveAlgebraicBlob.php",true);
xmlhttp.send();
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.