Javascript XMLHttprequest - получение ответа

Question

Я понимаю, что этот вопрос, вероятно, задавали несколько раз, но я изо всех сил пытаюсь понять, как javascript обрабатывает эти типы запросов.

Повторите приведенный ниже код - я знаю, что он работает так, как я тестировал, и моя база данных обновляется правильно.

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")

}

У меня есть несколько вопросов.

1) консоль показывает этот вывод, и похоже, что он запускается несколько раз, когда мне нужно, чтобы он запускался только один раз . Это правильный вывод? Действительно ли он запускается несколько раз?

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) Как заставить post_ ajax возвращать this.responseText, когда this.status == 200 и this.readystate == 4?

EDIT: вызов post_ ajax ниже - я меняю элемент «div / span» на элемент «input», чтобы пользователь мог изменить свое сообщение.

Я сохраняю нужную мне информацию в теге ID элемента и извлекаю ее в JSON для передачи на сервер вместе с текстом из поля.

Тогда я собираюсь обновить базу данных и изменить ее обратно на "div" после подтверждения сервером, что запрос был принят.

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)
    }
}

На этом этапе я хочу получить доступ к ответу, чтобы я мог определить, Можно продолжать или нет.

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