AJAX 载入xml

最新推荐文章于 2024-10-25 18:14:02 发布

anialy

最新推荐文章于 2024-10-25 18:14:02 发布

阅读量705

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

简述：

载入XML文件（来自w3school）

知识点

1. 对xml文件内部元素的获取

2. xmlhttp.open("GET",'books.xml',true) 打开books.xml

3. x = xmlDoc.getElementsByTagName("title") 获取xml中所有标签为title的元素，存在一个list

4. xmlhttp.responseXML获取一个xml文件

books.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    
    <book category="cooking">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>

    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>

    <book category="web">
        <title lang="en">XQuery Kick Start</title>
        <author>James McGovern</author>
        <author>Per Bothner</author>
        <author>Kurt Cagle</author>
        <author>James Linn</author>
        <author>Vaidyanathan Nagarajan</author>
        <year>2003</year>
        <price>49.99</price>
    </book>
</bookstore>

代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script type="text/javascript">
  function loadBooksXML(url)
  {
	  /****************************  Intialize XMLHttpRequest  *************************/
      var xmlhttp = null;
      if(window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari    
          xmlhttp = new XMLHttpRequest();
      }
      else if(window.ActiveXObject)
      {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
      }
      //get the books.xml
      if(xmlhttp != null)
      {
    	  xmlhttp.open("GET",'books.xml',true);
    	  xmlhttp.send();
          /******************************* OutPut Html *********************************/
          xmlhttp.onreadystatechange = function()
          {
              //readyState = 4:hold complete request;  status = 200:Http success
              if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
              {
                xmlDoc = xmlhttp.responseXML;
                txt = "";
                // get a list the atrribute is "title"
                x = xmlDoc.getElementsByTagName('author'); 
                for(var i = 0;i < x.length;i++)
                {
                    //get data from XML tree
                    txt = txt + x[i].childNodes[0].nodeValue + "<br />";
                }
                document.getElementById("xml_field").innerHTML = txt;
              }
          }; 
          /*****************************************************************************/
      }else{
    	  alert("Your browser does not support XMLHTTP");
      }     
  }
  </script>
</head>

<body>
  <h2> Read XML </h2>
  <button type = "button" onclick = "loadBooksXML('books.xml')">Get XML Info</button>
  <div id = "xml_field"></div>
</body>
</html>

输出：

点击前：

点击后：