DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> XML文件的讀取
XML文件的讀取
編輯:XML詳解     

XMLHttpRequest控件的另一個重要用途就是可以實現與XML文件的交互。與獲得文本或HTML文件相類似,在讀取XML文件時,使用responseXML來獲得請求的XML代碼。以下XML文件存儲了與前面Html文件類似的內容。

  <?XML version="1.0" encoding="UTF-8"?>
    <employees>
      <employee>
        <name>Simon</name>
        <sex>Male</sex>
        <age>20</age>
        <band>1</band>
        <salary>1,000.00</salary>
      </employee>
      <employee>
        <name>Elaine</name>
        <sex>Female</sex>
        <age>21</age>
        <band>2</band>
        <salary>2,000.00</salary>
      </employee>
      <employee>
        <name>Susan</name>
        <sex>Female</sex>
        <age>22</age>
        <band>3</band>
        <salary>3,000.00</salary>
      </employee>
    </employees>

  對於使用responseXML屬性返回的對象,需使用getElementsByTagName()方法來獲得XML中相應標簽的內容。以下代碼通過讀取上面的XML文件在頁面上輸出了相應的內容。

  <Html>
  <head>
  <title>AJax Example</title>
  <script type="text/Javascript">
  var xmlobj;                 //定義XMLHttpRequest對象
  function CreateXMLHttpRequest()
  {
    if(window.ActiveXObject)
              //如果當前浏覽器支持ActiveXObject,則創建ActiveXObject對象
    {
       xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
              //如果當前浏覽器支持XMLHttpRequest,則創建
                XMLHttpRequest對象
    {
       xmlobj = new XMLHttpRequest();
    }
  }
 function ReqXML()              //主程序函數
  {
    CreateXMLHttpRequest();         //創建對象
    XMLobj.onreadystatechange = StatHandler;  //判斷URL調用的狀態值並處理
    xmlobj.open("GET", "test.XML", true);  //調用test.Html
    XMLobj.send(null);           //設置為不發送給服務器任何數據
  }
  function StatHandler()           //用於處理狀態的函數
  {
    if(xmlobj.readyState == 4 && XMLobj.status == 200)                                 //如果URL成功訪問,則輸出網頁
    {
      xml = xmlobj.responseXML;
      var allees = XML.getElementsByTagName("employee");
                     //獲取XML文件中的所有employee標簽
      document.getElementById("XMLpage").innerHtml = "";//清空DIV層
      for(var i = 0; i < allees.length; i++)     //循環讀取每一個標簽
      {
        var tempobj, name, sex, age, band, salary;
        tempobj = allees[i].getElementsByTagName("name");
        name = "name: " + tempobj[0].childNodes[0].nodeValue + "<BR>";
        tempobj = allees[i].getElementsByTagName("sex");
        sex = "sex: " + tempobj[0].childNodes[0].nodeValue + "<BR>";
        tempobj = allees[i].getElementsByTagName("age");
        age = "age: " + tempobj[0].childNodes[0].nodeValue + "<BR>";
        tempobj = allees[i].getElementsByTagName("band");
        band = "band: " + tempobj[0].childNodes[0].nodeValue + "<BR>";
        tempobj = allees[i].getElementsByTagName("salary");
        salary = "salary: " + tempobj[0].childNodes[0].nodeValue + "<BR>";
        row = name + sex + age + band + salary + "<HR>";
        document.getElementById("XMLpage").innerHtml += row;                                  //將讀取結果放入DIV中
      }
    }
  }
  </script>
  </head>
  <body>
  <p><a href="http://j5c.ddvip.com/index.PHP#" onclick="ReqXml();">Request XML page</a></p>
  <p><div id="XMLpage"></div></p>
  </body>
  </Html>

  運行結果如圖50-4所示。

XML文件的讀取

  圖50-4 讀取XML文件

  上面的代碼首先讀取了XML文件中的所有employee標簽及其下的所有標簽來獲得XML文件中的全部內容,然後使用頁面中的層(DIV)來輸出相應的內容。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved