解析XML

09120170930
1、如何解析网页中xml文件里的内容到自己的html页面中？

2、全部文件放在服务器的启动目录下：../htdoc

3、代码如下：

   
   






<script>
window.onload = function() {
  loadData("get", "xml_simple.php", function(textData){
	  //console.log(textData);
	  // 对textData进行xml的解析(反序列化)
	  var xmlDom = getXMLDom(textData);
	  // 对xmlDom进行dom的解析
	  var names = xmlDom.getElementsByTagName("name");
	  // 遍历names
	  for(var i = 0; i < names.length; i++) {
		  // 添加到select中
		  var select = document.getElementById("citys");
		  select.innerHTML += "" + names[i].innerHTML + "
";
      }
  });
}

   
   对象-->
function getXMLDom(str) {
  // 创建DOMParser对象
  var xmlParser = new DOMParser();
  // 解析xml字符串
  // 参数1 待解析的xml字符串
  // 参数2 解析的格式(xml)
  // 返回值：xmlDOM对象(XMLDocument)
  var xmlDom = xmlParser.parseFromString(str, "text/xml");
  // 判断解析过程中是否会出现parsererror
  var error = xmlDom.getElementsByTagName("parsererror");
  if(error.length == 0) {
    // 正确 
	return xmlDom;
  } else {
    // 解析错误
    var data = error[0].firstChild.data;
	throw new Error("xml解析错误：" + data); // 抛出异常
  }
}

   
   字符串-->
function serializeDOM(xmlDom) {
  // 创建XMLSerializer对象
  var serializer = new XMLSerializer();
  // 进行序列化
  var xmlStr = serializer.serializeToString(xmlDom);
  // 判断解析过程中是否会出现parsererror
  var error = xmlDom.getElementsByTagName("parsererror");
  if(error.length == 0) {
    // 正确 
	return xmlStr;
  } else {
    // 解析错误
    var data = error[0].firstChild.data;
	throw new Error("xml解析错误：" + data); // 抛出异常
  }
}

   
   
function loadData(method, url, fn) {
	// 1 创建XHR对象
	var xmlhttp;
	if(XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest(); // W3C
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE6
	}
	//alert(xmlhttp);
	//console.log(xmlhttp);
	
	// 2 注册回调函数
	xmlhttp.onreadystatechange = function() {
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var textData = xmlhttp.responseText;
			if(typeof fn == 'function') {
				fn(textData);
			}
		}
	};
	// 3 创建连接
	// 参数1 要发送的请求 "get"或"post"
	// 参数2 要请求的URL
	// 参数3 同步还是异步。true异步；false同步
	xmlhttp.open(method, url, true);
	//console.log("end");
	
	// 4 发送请求
	xmlhttp.send(null);
}
</script>