javascript - XMLHttpRequest 异步不工作,总是返回状态 0

标签 javascript xmlhttprequest

这是我从 w3schools 拼凑的 XMLHttpRequest 示例

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
  var T="nothing";

  xmlhttp=new XMLHttpRequest();
  xmlhttp.overrideMimeType('text/plain');  // don't sc
  xmlhttp.onreadystatechange=function()
  {
    alert ("rdystate: " + xmlhttp.readyState);
    alert ("status: "   + xmlhttp.status);
    alert ("Text: "     + xmlhttp.statusText);
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      T = xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","SBL_PROBES.htm",true);
xmlhttp.send(null);
//T = xmlhttp.responseText;
alert(T);
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">CHange Content</button>

</body>
</html>

XMLHttpRequest 总是返回零状态。

Firefox 的错误控制台中没有显示任何内容。

如果我通过更改线路将请求更改为同步请求

xmlhttp.open("GET","SBL_PROBES.htm",true);

xmlhttp.open("GET","SBL_PROBES.htm",false);

并取消注释该行

//T = xmlhttp.responseText;

返回请求文件的文本。

HTM 和文件位于同一目录中。如果您尝试这样做,您还需要一个文件 SBL_PROBES.htm,它的内容无关紧要。

我使用的是 Firefox 3.6.22。

这可能是跨域问题吗?如果是这样,为什么它作为同步请求工作?

最佳答案

您可以在 if 语句中使用函数。当 readystate 变为 4 时执行此函数。

var handleResponse = function (status, response) {
   alert(response)
}
var handleStateChange = function () {
   switch (xmlhttp.readyState) {
      case 0 : // UNINITIALIZED
      case 1 : // LOADING
      case 2 : // LOADED
      case 3 : // INTERACTIVE
      break;
      case 4 : // COMPLETED
      handleResponse(xmlhttp.status, xmlhttp.responseText);
      break;
      default: alert("error");
   }
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=handleStateChange;
xmlhttp.open("GET","SBL_PROBES.htm",true);
xmlhttp.send(null);

您的旧代码执行了一个异步调用并继续执行 alert 语句。此时T是空的。

好的,我将稍微解释一下整个过程是如何工作的:

首先我们定义了两个回调函数,我们稍后在请求中调用它们,名为 handleResponse 和 handleStateChange。

然后我们创建一个对象,代表 XMLHttpRequest

var xmlhttp=new XMLHttpRequest();

这将导致一个对象如下(简化):

XMLHttpRequest { status=0, readyState=0, multipart=false, onreadystatechange=handleEvent()}

使用 open(...) 函数调用,您可以为请求设置参数:

xmlhttp.open("GET","SBL_PROBES.htm",true);

这意味着,执行异步 GET 请求以获取页面 SBL_PROBES.htm 然后调用 send(...) 函数来触发请求本身。

我们为onreadystatechange注册了一个回调函数,可以想象,这其实就是一个eventHandler。每次状态改变时都会调用此函数。 (这就像你在表单中注册一个回调函数到 onKeyUp 事件一样,每次你的键上升时都会触发这个回调:))

您的问题唯一感兴趣的情况是状态 4。因此 handleRequest 回调函数仅在状态 4 中被调用。此时您的 Request 实际上有一个结果,并且还有一个状态。 (状态表示您的网络服务器返回状态代码 200=ok、404=not found 等)

这并不是 ajax 背后的所有魔法,但应该给您一个简单的概述,即幕后实际发生的事情。 在网络服务器上测试它很重要,不要使用 file://进行测试。

如果您需要更多详细信息,请告诉我。

关于javascript - XMLHttpRequest 异步不工作,总是返回状态 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7393484/

相关文章:

javascript - 如何使用 XMLhttpRequest 发送 html 代码

javascript - Bootstrap addClass 在表单中不起作用

javascript - 为什么 SVG 不会在 chrome 扩展中加载?

javascript - 脚本 5 : Access is denied in IE9 on xmlhttprequest

javascript - 为什么字符在 Internet Explorer 中是 'undefined' 而在其他浏览器中不是

javascript - POST Absolute URI 在使用 Squid3 代理时由 XmlHttpRequest 发送到服务器

jquery - 我如何知道 jQuery 是否有待处理的 Ajax 请求?

javascript - 创建新时如何检索模型ID?

javascript - 在函数中添加另一个搜索字段

javascript - 如何在vuejs 2中的现有行中追加数据