Как переписать Ajax без использования JQuery для моего кода

Question

Привет. В настоящее время я пытаюсь сохранить изображение на холсте в своей базе данных, но в моем коде используется jQuery, к которому я не имею права.Может кто-нибудь, пожалуйста, помогите мне с эквивалентом этой команды ajax без использования JQuery, вот мой код:

document.getElementById('save').addEventListener('click', function()
var canvas = document.getElementById("canvas");
var dataUrl = canvas.toDataURL("image/png");
$.ajax(
{
type: "POST",
url: "../webcam/save_image.php",
data: {image: dataUrl}
})
.done(function(respond){console.log("done: "+respond);})
.fail(function(respond){console.log("fail");})
.always(function(respond){console.log("always");})
});

Answer 1

Для этого можно использовать собственные объекты XMLHttpRequest.Я считаю, что ваш код должен выглядеть примерно так, хотя я не проверял его, так что я уверен, что вам нужно будет немного его настроить.

document.getElementById('save').addEventListener('click', function()
var canvas = document.getElementById("canvas");
var dataUrl = canvas.toDataURL("image/png"), xhr = new XMLHttpRequest();


xhr.open('POST', '../webcam/save_image.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
    if (xhr.status === 200 && xhr.responseText !== dataUrl) {
        console.log('fail');
    }
    else if (xhr.status !== 200) {
        console.log('fail');
    }
};
xhr.send(encodeURI('url=' + dataUrl);

Ссылка: https://blog.garstasio.com/you-dont-need-jquery/ajax/#posting