I'm trying to post some data to a page within a webworker and then post the workerresult back to the calling method but can't get it to work. When using self.postMessage(obj) it posts back the result correctly back to the origin script but I can't seem to send a post message to a third party before that.

I've tried using ajax inside the self.onMessage method, but it seems I can't use jquery inside. And I've also tried to troubleshoot if I can use the postMessage() function to send with a provided url but it seems there is not prebuilt in. Is there another function I can use?

This is my script (this is the actual worker code):

self.onmessage = function(event) {

    id = event.data.id;
    var url = "/lib/fetchData.php";

    var data = {};
    data.id = id;
    var json = JSON.stringify(data);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.onload = function() {
        if (this.status == 200) {
            /*
                Here I want to send a post to a provided url. Like: 
                var url2 = "";
                var data = {
                    "uid" : 3,
                    "utype" : 1,
                };
                postMessage(url2, data); // Is there more valid function for this? 
            */
            var test = JSON.parse(xhr.responseText);   
            self.postMessage(test);     // This post is posting result from fetchData.php back to the originscript as expected
           
        }     }
    xhr.onerror = function() {
        
    };
    xhr.send(json);
};

Is there a prebuilt function to do this kind of operation or any other best-practice method to achieve the same thing?

Update: The reason I want to run the post in the background is because previously I had the postrequest in the mainthread but it was causing the UI to freeze while doing the post (the data to be posted can at times be pretty big).

Update 2:

Think I've found a way to post data within the worker. I tried to create a new xmlhttprequest within the current one. I can't verify it works cause of url is thirdparty but it looks like it works. Not sure its a good practice though ;)

    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.onload = function() {
        if (this.status == 200) {
            
            var data = {
                "uid" : 3,
                "utype" : 1,
            };

            var xhr2 = new XMLHttpRequest();
            xhr2.open("POST", "url", true);
            xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr2.send(data); 

            var test = JSON.parse(xhr.responseText);   
            self.postMessage(test);
           
        }     
    }