Javascript XMLHttprequest - getting response

Question

I understand this question has probably been asked multiple times but I am struggling to understand how javascript handles these types of requests.

Re the below code - I know it works as I've tested and my database updates correctly.

function post_ajax(url, token, data) {

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.readyState)
            //console.log("ALL OK")
            //console.log(this.responseText)
            //return this.responseText
        } else {
            console.log(this.readyState)
            //console.log(this.status)
            //console.log(this.statusText)
            //return this.responseText
        }
    };
    console.log("open")
    xhttp.open("POST", url, true)
    console.log("set request")

    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    xhttp.setRequestHeader("Authorization", "Bearer " + token)
    console.log("send")
    xhttp.send("reply_json=" + JSON.stringify(data))
    console.log("done")

}

I have a few questions.

1) the console shows this output and it looks likes its run through multiple times when I only need it to run once. Is this output correct? Is it actually running multiple times?

open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:14 4
functions.js:25 open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:14 4
functions.js:25 open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:14 4
functions.js:25 open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:14 4
functions.js:25 open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:19 4

2) How do I get post_ajax to return this.responseText when this.status == 200 and this.readystate ==4?

EDIT: the call to post_ajax is below - I change a "div / span" element to a "input" element so the user can change their post.

I'm storing information I need in the ID tag of the element and extracting that into JSON to be passed to the server long with the text from the field.

I then am going to update the database and change it back to the "div" once confirmed by the server the request has been accepted.

function change_reply_to_text(ele_name) {
    // split id of the edit button to get the reply_id - post_id
    const split = ele_name.split("-")
    // get element
    var txt_reply_element = document.getElementById(split[0] + "-" + split[1] + "-" + split[2])
    // store text
    const txt_value = txt_reply_element.value

    // get button element and retrieve token for api call
    var btn_ele = document.getElementById(split[0] + "-" + split[1] + "-" + split[2] + "-edit")
    const token = btn_ele.getAttribute("token")

    // test post the ajax form
    var response = post_ajax("/api/post/update", token, get_json_from_id(btn_ele.id, txt_value))

    // create new item replacing textbox with P element
    var reply_text_p = document.createElement("p")
    // set text and formatting
    reply_text_p.innerText = txt_value
    reply_text_p.id = txt_reply_element.id
    reply_text_p.className = "article-content ow-break-word"
    // replace both
    txt_reply_element.parentNode.replaceChild(reply_text_p, txt_reply_element)

    // change button from "Edit" to "Save"
    var new_btn = document.getElementById(split[0] + "-" + split[1] + "-" + split[2] + "-" + "edit")
    new_btn.innerText = "Edit"

    // change on click back so element can now be editied again
    new_btn.onclick = function () {
        change_text_to_reply(this.id)
        //update_reply(this)
    }
}

At this point I want to have access to the response so i can determine whether Its ok to proceed or not.

// test post the ajax form
var response = post_ajax("/api/post/update", token, get_json_from_id(btn_ele.id, txt_value))