How to replace jQuery.ajax() with vanilla JavaScript in WordPress

Ciprian on Wednesday, April 25, 2018 in AJAX and Fetching Data
Last modified on Monday, June 12, 2023

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.

Making the transition from jQuery AJAX to vanilla JavaScript in your WordPress projects can be a challenging endeavor, 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.

Like0