JavaScript 中的 XML 文档"undefined"

Question

我正在制作一款基于HTML5的游戏理念。当然，其中一部分是存储内容，其中包括游戏中不同能力的数据，以及角色等。

虽然动态内容(如特定字符)将在稍后移动，但我可能会坚持使用XML来处理静态内容，如技能和装备的统计数据，这意味着我更愿意尽快修复我使用XML遇到的问题。

现在，为了做到这一点，我在战斗阶段开始时加载XML文档，首先是角色，然后是与此角色相关的能力等。

要做到这一点，我有一个"loadXMLFile"函数，它接受一个文件名:

var loadXMLFile = function(filename) {
  req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    return req.responseXML;
  }
  req.open("GET", filename, true);
  req.send();
}

加载和操作数据的示例:

function Character(id) {
  doc = loadXMLFile("characters.xml");
  characters = doc.getElementsByTagName("Character");

我这样做的目的是让函数调用在继续之前等待返回值。你可以从题目中看出，这是行不通的。相反，只要我尝试操作数据，即示例中的第三行，我就会收到以下运行时错误:Uncaught TypeError: Cannot call method 'getElementsByTagName' of undefined

如示例所示，我在构造函数中加载这些XML文件，使用XML文件填充类。因此，在readystatechange事件处理程序中调用不同函数的结构不太可取。我是否被迫在所有地方重复XML加载代码，只是为了生成单独的事件处理程序?

Answer 1

我建议使用jQuery或其他javascript框架。处理这样的问题要容易得多，并且可以节省大量的时间和代码行。另一个问题是你的代码中没有给出的跨浏览器兼容性。

Answer 2

您想更改:

req.open("GET", filename, true);

:

req.open("GET", filename, false);

发出同步请求(这意味着在继续之前等待请求)

你不能从onreadystatechange返回一些东西，那部分代码是错误的。

你没有检查函数的实际状态，所以这也是错误的。

所以基本上你的代码是不正确的。我建议找一个XMLHttpRequest的教程网站，并复制他们的代码。

顺便说一句，你为什么要让自己的生活很艰难?安装jQuery，让它为你做所有这些事情。

最后一个注意事项，json比xml更容易使用，你可能想要切换到那个

Answer 3

上面提到的代码段是浏览器特有的问题。理想情况下，您应该使用跨浏览器兼容的基于javascript的框架。你可以避免大多数跨浏览器相关的问题。

要解决您的问题，getElementsByTagName函数在doc元素中不可用。因此，您可以按照以下方式修改代码:

if(doc.getElementsByTagName){
     characters = doc.getElementsByTagName("Character");
}

但是这只能避免错误，而不能解决获取Character元素的问题。

最好的选择是在服务器中将XML转换为JSON，然后将JSON发送到客户机。它很容易遍历JSON，也没有跨浏览器的问题。

可以像下面这样轻松地遍历JSON，

function traverseJSON (jsonObj){
    for(var value in jsonObj){
        if(typeof value == 'function'){//this is to avoid 'remove' function in case of Array, Array object will be available in case of repeating elements in XML. 
            continue;
        }else if(typeof value == 'object'){ //refers to element in XML 
            traverseJSON(value);
        }else if(typeof value== 'string'){   //refers to attribute in XML
        jsonObj[value]; //refers to the attribute value in XML
        }
    }
}

上面的函数可以用来遍历JSON，它以JSON对象作为输入。