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所示。
圖50-4 讀取XML文件
上面的代碼首先讀取了XML文件中的所有employee標簽及其下的所有標簽來獲得XML文件中的全部內容,然後使用頁面中的層(DIV)來輸出相應的內容。