PHP图像保存不起作用

I recently came across a tutorial from CodeCourse on youtube about saving a canvas/drawing as an image onto a web server. I have followed the tutorial and everything is working fine except for the saving part. I have a web server being hosted on Ubuntu 14.04 on Apache 2. I did a little debugging myself and I am getting two errors-I think they're connected.

All of the HTML is proper and there's no errors regarding that. The error is in the save.js file. Here is the code:

var saveButton = document.getElementById('save');

saveButton.addEventListener('click', saveImage);

function saveImage(){
    var data = canvas.toDataURL();

    // save image
    var request = new XMLHttpRequest();

    request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status == 200){
            var response = request.responseText;
            window.open(response, '_blank', 'location=0, menubar=0');
        }else{
            console.log("Failure");
        }
    }

    request.open('POST', 'save.php', true);
    request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    request.send('img='+data);
}

The first thing I noticed while debugging is that line 16 is running. In the tutorial, he said status 200 is "OK" unlike 404, 500, etc. The second error is on line 22. In the console, I see:

I'm somewhat confused. To me, it seems like there is no php server setup at all but I'm not sure. The tutorial was from 2013, so is this an outdated method?