在函数内部调用 XMLHttpRequest 时未收到响应答案

【问题标题】：XMLHttpRequest not receiving a response when called inside a function在函数内部调用 XMLHttpRequest 时未收到响应
【发布时间】：2020-04-18 18:15:41
【问题描述】：

我有一个在提交时调用的 HTML 表单，函数 -

function getLocationTemp() {
    temp= new XMLHttpRequest();
    temp.open('GET', 'url', true);
    temp.onload = function () {
        console.log(temp.response);
    }
    temp.send();
}

出于某种原因，我从未收到对此 API 调用的响应。我试过调试readyState，我总是在- 1。

虽然，当我在函数之外执行相同的代码块时-

temp= new XMLHttpRequest();
temp.open('GET', 'url', true);
temp.onload = function () {
    console.log(temp.response);
    }
temp.send();
function getLocationTemp() {
console.log('random');
}

它有效，我得到数据和响应代码为- 4。

我认为问题在于流程正在离开函数，因此本地 onload 超出了范围。所以尝试在函数中运行一个从 0 到 100 的 for 循环，认为它会给它足够的时间来获得响应，并放入一个 while 循环，直到 readystate 变为 4 才会退出。但是状态不会超过 1。

似乎是什么问题？

【问题讨论】：

您应该使用 onreadystatechange 而不是 unload，或者使用 Fetch API（这将涉及使用 Promises）； Fetch API 和 Promises 在任何现代浏览器中都可用（不包括所有版本的 Internet Explorer）
我收到了一个很长的 HTML sn-p 双向。你能分享一个codepen或JSFiddle链接吗？
在调用中添加错误处理程序，查看是否收到错误消息。什么叫getLocationTemp()？是按钮点击吗？表格提交？点击链接？我的猜测是您没有取消操作，页面正在重绘并终止您的 HTTP 请求。
流程没有进入错误。你是什么意思'不取消请求'？为什么页面会重绘，因为请求是在 onSubmit 之后才创建的？

标签： javascript ajax rest xmlhttprequest async.js

【解决方案1】：

如上述回复中所列，该操作是重新渲染页面并终止请求。这将作为 onclick 函数处理程序或更改结构以使用 form 标记及其属性（如 action 和方法。

通过 onclick 方法执行此操作的示例是 -

function getLocationTemp() {
    temp= new XMLHttpRequest();
    temp.open('GET', 'url', true);
    temp.onload = function () {
        console.log(temp.response);
    }
    temp.send();
}

在 html 中是这样的 -

<button  type="button" onclick="getLocationTemp()">Submit Form</button>

【讨论】：

谢谢！ onClick 完美运行！我唯一的问题是 - 如果仅在 onSubmit 时创建请求，由于表单提交后页面从未重新呈现，它将如何被杀死？