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).
Making the transition from jQuery AJAX to vanilla JavaScript in your WordPress projects can be a challenging endeavour, particularly if you’re not familiar with pure JavaScript syntax and patterns. But you don’t have to do it alone. If you find yourself in need of professional help, you can always hire a JavaScript developer. They can assist in ensuring the seamless integration of vanilla JavaScript into your projects while enhancing performance and user experience.
