AJAX 载入xml

来源：互联网发布：linux开放22端口编辑：程序博客网时间：2024/04/29 23:53

简述：

载入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>

输出：

点击前：

点击后：