Javascript Ajax responseText为空

在过去的几天里，我已经了解了canvas元素，现在我想添加AJAX将canvas保存到服务器。具体地说，我让用户在画布上绘制，完成后单击按钮，画布被发送并保存到服务器。下面的代码运行良好

Javascript:

var testCanvas = document.getElementById('imageView');
var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.onreadystatechange=callback();
ajax.open("POST",'script.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send("canvasData"+canvasData );
function callback (){alert ('it works!');}

PHP代码：

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

    $filteredData=substr($imageData, strpos($imageData, ",")+1);

    $unencodedData=base64_decode($filteredData);
    $fp = fopen( 'images/'.uniqid().'.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
        echo "saved";
}
  else{

  echo "no raw data";
  }
?>

我已经搜索过了，这个话题似乎已经被讨论过好几次了，但都没能解决上面的问题

---

哪里出错了？

引用函数，不要调用它们，等待readyState返回4

var testCanvas = document.getElementById('imageView');
var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();

ajax.onreadystatechange = callback;

ajax.open("POST",'script.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send("canvasData"+canvasData );

function callback (){
    if (ajax.readyState == 4) {
        alert(ajax.responseText);
    }
}

---

伟大的我花了几个小时试图解决这个问题，在这里我在一分钟内得到了答案。非常感谢。现在它可以按我的要求工作了。

var testCanvas = document.getElementById('imageView');
var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();

ajax.onreadystatechange = callback;

ajax.open("POST",'script.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send("canvasData"+canvasData );

function callback (){
    if (ajax.readyState == 4) {
        alert(ajax.responseText);
    }
}