JavaScript - 使用 ReST API 的问题答案

【问题标题】：JavaScript - Issue with using ReST APIJavaScript - 使用 ReST API 的问题
【发布时间】：2016-07-04 18:21:36
【问题描述】：

不知道我在这里做错了什么。

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

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

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

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

我怎样才能做到这一点？

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

【问题讨论】：

标签： javascript rest xmlhttprequest

【解决方案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);

}

【讨论】：