Javascript 和 XML 按钮答案

【问题标题】：Javascript and XML buttonJavascript 和 XML 按钮
【发布时间】：2016-02-04 02:34:04
【问题描述】：

您好，我通过 html 制作了一个按钮，我试图在单击该按钮时显示一个 XML 页面。我需要通过 javascript 来做到这一点，但它似乎对我不起作用。

我的 HTML：

<input type="button" value="Shop 1" id ="one">
<input type="button" value="Shop 2" id ="two">
<input type="button" value="Put Selected Pictures in Cart" id ="three">

我的 JavaScript：

 function getData(filename) { env = new XMLHttpRequest(); env.open("GET",            filename); } 

 function init()
{

 document.getElementById('one').onclick = function(){ getData('shop1.xml'); }
 document.getElementById('two').onclick = function(){ getData('shop2.xml'); }
}

任何帮助将不胜感激。谢谢。

【问题讨论】：

请发布您的getData 功能...
函数 getData(filename) { env = new XMLHttpRequest(); env.open("GET", 文件名); }
要么您没有共享所有代码，要么您需要确保发送您的 XMLHttpRequest。到目前为止，您只是打开请求，而不是实际发送它。然后你需要一些实际的代码来显示请求的结果，因为这似乎也丢失了。

标签： javascript html xml dom

【解决方案1】：

由于 XMLHttprequests 的本质是异步的，您应该在回调函数中处理检索到的数据（或者您可以通过指定 env.open("GET",url, true) 使其同步。您的新 getData 函数将如下所示：

function getData(url, callback) { 
  var env = new XMLHttpRequest(); 
  env.onload = function() {
    callback(env.response);
  };
  env.open("GET", url); 
}

你可以按如下方式使用它：

var one = document.getElementById('one'),
    two = document.getElementById('two');

one.onclick = function(){
  getData('shop1.xml', function(response) { 
     /* do whatever you want with the response XML */ 
  });
}
two.onclick = function(){
  getData('shop2.xml', function(response) { 
     /* do whatever you want with the response XML */ 
  });
}

请参阅MDN: Using XMLHttpRequest 了解更多信息。请注意，这只会将 XMLdoc 作为字符串获取；如果您需要将其作为 XML 树进行遍历，则需要使用 DOMParser API。

【讨论】：