In an effort to remove all jQuery dependency from one of my plugins, I decided to turn all jQuery.ajax()
requests into vanilla JavaScript requests. Turns out it’s pretty simple.
Here’s the original request, before:
jQuery.ajax({
type: 'post',
url: ipAjaxVar.ajaxurl,
data: 'action=imagepress-like&nonce=' + ipAjaxVar.nonce + '&imagepress_like=&post_id=' + pid,
success: function (count) {
if (count.indexOf('already') !== -1) {
var lecount = count.replace('already', '');
if (lecount === '0') {
lecount = ipAjaxVar.likelabel;
}
like.removeClass('liked');
like.html('<svg class="lnr lnr-heart"><use xlink:href="#lnr-heart"></use></svg> ' + lecount);
} else {
count = ipAjaxVar.unlikelabel;
like.addClass('liked');
like.html('<svg class="lnr lnr-heart"><use xlink:href="#lnr-heart"></use></svg> ' + count);
}
}
});
And here’s the vanilla JavaScript request, after:
const request = new XMLHttpRequest();
request.open('POST', ipAjaxVar.ajaxurl, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
if (this.response.indexOf('already') !== -1) {
if (this.response.replace('already', '') === '0') {
likeLabel = ipAjaxVar.likelabel;
}
like.classList.remove('liked');
like.innerHTML = '<svg class="lnr lnr-heart"><use xlink:href="#lnr-heart"></use></svg> ' + likeLabel;
} else {
likeLabel = ipAjaxVar.unlikelabel;
like.classList.add('liked');
like.innerHTML = '<svg class="lnr lnr-heart"><use xlink:href="#lnr-heart"></use></svg> ' + likeLabel;
}
} else {
// Response error
}
};
request.onerror = function() {
// Connection error
};
request.send('action=imagepress-like&nonce=' + ipAjaxVar.nonce + '&imagepress_like=&post_id=' + pid);
Tested and working.
Read more about it here (POST requests using JavaScript) and here (using XMLHttpRequest).
Related posts
If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!