我的 javascript 代码的问题在哪里？ [关闭]答案

【问题标题】：Where is the issue with my javascript code? [closed]我的 javascript 代码的问题在哪里？ [关闭]
【发布时间】：2012-08-13 03:39:06
【问题描述】：

好的，所以我正在尝试使用 javascript HTTPRequest 来加载名为“chem_vocab.xml”的 XML 文档。但是，每当我尝试执行该功能时，什么都不会发生。我放置了几行 alert() ，这样我就可以看到我的故障发生在哪里。之间似乎存在一些问题：

alert("Beginning Loading");

和

alert("XML Loaded");

页面会正确提示“正在加载...”，但不会提示“已加载 XML”。我的问题在哪里？

function load_vocab(){
alert("Beginning Loading...");
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","chem_vocab.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

alert("XML loaded");

var x=xmlDoc.getElementsByTagName("wordlist")[0];
x= x.getElementsByTagName("word")[0];
word = x.getElementsByTagName("spelling")[0].childNodes[0].nodeValue;
definition = x.getElementsByTagName("definition")[0].childNodes[0].nodeValue;

alert("XML parsing successful");

document.getElementById('spelling').innerHTML = word;
document.getElementById('definition').innerHTML = definition;

}

【问题讨论】：

我猜“它不起作用”。 -1 表示非描述性标题和缺乏错误报告。（我怀疑抛出了异常。）
alert 比console.log 好多了，对吧？ :P
javascript 控制台报告错误发生在哪一行？
我不知道这是否与您的问题有关，但您使用的是异步 Ajax 调用，但没有使用侦听器来知道它何时完成。即使您的代码没有莫名其妙地停止，xmlhttp.responseXML 也将始终未定义。
你正在发送一个异步请求，但读取它是同步的

标签： javascript xml ajax xmlhttprequest

【解决方案1】：

您的代码：

xmlhttp.open("GET","chem_vocab.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

您的 Ajax 请求是异步的。因此，您无法在发送.responseXML 属性后立即对其进行读取。 （xmlDoc 的值将为空/未定义。）您必须在 readystatechange 回调中执行此操作。

由于您似乎缺乏使用 Ajax 的经验，请考虑使用第三方 Ajax 库（例如 jQuery，如果您不使用通用库，则使用 miniajax）。

【讨论】：

我试过了：xmlhttp.open("GET","chem_vocab.xml",false);它工作得很好。谢谢。
@user1489314 这就是问题所在。
@user1489314 你似乎不明白什么是异步 Ajax 请求。您必须使用回调函数来读取 Ajax 响应。
在规范中允许通过这样指定使其成为非 ajax，是的，它不被推荐，但它是一个小用例，所以我认为它很好。 Check my answer
@JosiahHester 您的意思是“同步”，而不是“非 ajax”。同步请求也是 Ajax。

【解决方案2】：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      xmlDoc=xmlhttp.responseXML; 

      alert("XML loaded");

      var x=xmlDoc.getElementsByTagName("wordlist")[0];
      x= x.getElementsByTagName("word")[0];
      word = x.getElementsByTagName("spelling")[0].childNodes[0].nodeValue;
      definition = x.getElementsByTagName("definition")[0].childNodes[0].nodeValue;

      alert("XML parsing successful");
      document.getElementById('spelling').innerHTML = word;
      document.getElementById('definition').innerHTML = definition;
    }
  }

您的代码是异步的。您必须等待回复才能执行xmlDoc=xmlhttp.responseXML;。因此，您需要为onreadystatechange 事件添加事件处理程序，以便您获得响应。上面的代码就是这样做的

【讨论】：

这是一个正确的答案，但我怀疑它对作者有什么意义。
@arxanas ：要点。我会添加一些解释

【解决方案3】：

您的异步调用并期望它同步返回。使用此代码使调用非阻塞，因此您永远不会加载响应。

xmlhttp.open("GET","chem_vocab.xml",true); // True means non-blocking, you need a listener

因此，这将始终为空。

xmlDoc=xmlhttp.responseXML;

快速而肮脏的修复according to this document.

xmlhttp.open('GET', 'chem_vocab.xml', false);
xmlhttp.send(); // because of "false" above, will block until the request is done 
                // and status is available. Not recommended, however it works for simple cases.

if (xmlhttp.status === 200) {
  console.log(request.responseText);
  xmlDoc=xmlhttp.responseXML;
}

【讨论】：