JavaScript - 使用 ReST API 的问题

Question

不确定我在这里做错了什么。

HTML

<form id="inp" onsubmit="process()">
    <input id="link" type="text" name="link" placeholder="Enter your link">
    <input id="submit" type="submit" name="submit" value="&rarr;">
</form>

JavaScript

    function createRequest() {
        let result = null;
        if (window.XMLHttpRequest) {
            result = new XMLHttpRequest();
            result.overrideMimeType('application/json');
        }
        else {
            window.alert("Abort!");
        }
        return result;
    }

    let c=0;
    function process() {
        let l = document.getElementById("inp").link.value;
        let resp;
        let req = createRequest();
        let payload = {
            link: l,
            ignoreException: true
        };
        req.open("POST", url, true);
        req.setRequestHeader("Content-Type", "application/json");
        req.send(payload);
        req.onreadystatechange = function () {
            if (req.readyState === 4 && req.status === 200) {
                resp = req.responseText;
                console.log("response text - " + resp);
            }
            console.log(req.readyState + " " + req.status + " " + c);
        };
    }

我希望它记录每个状态更改的就绪状态和状态，并记录最终状态的响应文本。

它记录“4 0 1 ”，这意味着它仅更改状态一次，并将其直接更改为最终状态。

它应该在执行 .open()、.setRequestHeader() 和 .send() 函数时更改状态。

我怎样才能做到这一点？

注意 - “url”参数是 api url。

Answer 1

如果您希望为 .open() 和 .setRequestHeader() 调用 onreadystatechange 事件，则需要在调用 open() 和 setRequestHeader() 函数之前注册 onreadystatechange 事件处理程序。

因此，如果将 onreadystatechange 定义向上移动几行，应该会很好。

所以像这样:

    function process() {
    let l = document.getElementById("inp").link.value;
    let resp;
    let req = createRequest();
    let payload = {
        link: l,
        ignoreException: true
    };
    req.onreadystatechange = function () {
        if (req.readyState === 4 && req.status === 200) {
            resp = req.responseText;
            console.log("response text - " + resp);
        }
        console.log(req.readyState + " " + req.status + " " + c);
    };
    req.open("POST", url, true);
    req.setRequestHeader("Content-Type", "application/json");
    req.send(payload);

}