Keep Coding

Every 5 seconds I have my javascript running to call the update.php file (which will hopefully add the base64 code to the mysql - although yet to figure out).
Currently, I just have the base64 code writing out to a text area called debugConsole.
I just don't get how I'm supposed to pass the javascript variable to my php update file.
HTML:
<script type="text/javascript">
function saveViaAJAX()
{
var testCanvas = document.getElementById("testCanvas");
var canvasData = testCanvas.toDataURL("image/png");
var postData = "canvasData="+canvasData;
var debugConsole= document.getElementById("debugConsole");
debugConsole.value=canvasData;
//alert("canvasData ="+canvasData );
var ajax = new XMLHttpRequest();
//ajax.open("POST",'testSave.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
//ajax.setRequestHeader('Content-TypeLength', postData.length);
ajax.onreadystatechange=function()
{
if (ajax.readyState == 4)
{
//alert(ajax.responseText);
// Write out the filename.
document.getElementById("debugFilenameConsole").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a><br>Reload this page to generate new image or click the filename to open the image file.";
}
}
ajax.send(postData);
}
setInterval(function() { saveViaAJAX(); }, 5000);
</script>
<script language='javascript' type='text/javascript'>
//Every 5 seconds calls php update
//syncronized jax:
function myjax() {
oXhr = new XMLHttpRequest();
oXhr.open("POST", "update.php?game=<?php echo $game; ?>", false);
oXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
oXhr.send(null);
}
//set an interval each 5 seconds to call your myjax method
setInterval(function() { myjax(); }, 5000);
</script>
</head>
<div>
<canvas id="testCanvas" width="300" height="300"></canvas>
</div>
<div>
<textarea id="debugConsole" rows="10" cols="60">Data</textarea>
</div>
<script type="text/javascript">
// This portion of the code simply draws random circles into the canvas (it has nothing todo with saving the canvas).
var canvas = document.getElementById("testCanvas");
if (canvas.getContext)
{
var canvasContext = canvas.getContext("2d");
for (i=0; i<150; i++)
{
canvasContext.fillStyle="rgb("+(parseInt(Math.random()*255))+","+(parseInt(Math.random()*255))+","+(parseInt(Math.random()*255))+")";
canvasContext.beginPath();
canvasContext.arc(Math.random()*350,Math.random()*350,Math.random()*20, 0,Math.PI*2,true);
canvasContext.fill();
}
}
</script>
PHP:
<?php
$random = rand();
$game = $_GET["game"];
mysql_query("UPDATE paint_s SET paint_points='$random' WHERE id ='$game'") or die(mysql_error());
echo "Updated";
?>
Sorry for my lack of knowledge, I have been doing a few tutorials and was just trying to expand on the tutorial.

First thing you want to do is open your request
ajax.open("POST",'testSave.php',true);
then want to send your data as application/x-www-url-form-encoded so set it in the content type
ajax.setRequestHeader('Content-Type', 'application/x-www-url-form-encoded');
To make sure your data is properly encoded use encodeURIComponent
var postData = "canvasData="+encodeURIComponent(canvasData);
You should also check the status to see if the request actually suceeded
if (ajax.readyState == 4)
{
if (ajax.status == 200){
//success
}
else{
//failure
}
}
I don't know if saving a base64 encoded image every 5 seconds is a good idea though.