本文實例講述了ajax遍歷xml文檔的方法。分享給大家供大家參考。具體分析如下:
XMLHttpRequest對象提供了兩個可以用來訪問服務器響應的屬性。第一個屬性responseText將響應提供為一個串,第二個屬性 responseXML將響應提供為一個XML對象。一些簡單的用例就很適合按簡單文本來獲取響應,如將響應顯示在警告框中,或者響應只是指示成功還是失 敗的詞
前面<ajax小結>中的例子是從XMLHttpRequest對象獲取服務器響應,並使用XMLHttpRequest對象的responseText屬性將響應獲取為文本。
這次我們來使用XMLHttpRequest對象的responseXML屬性,將結果獲取為XML文檔.這樣一來,我們就可以使用W3C DOM方法來遍歷XML文檔。(前面文章或多或少講過些DOM,在此不重復)
OK,下面來看例子.
首先還是一段XML文檔代碼(parseXML.xml)如下:
parseXML.xml如下:
<?xml version="1.0" encoding="UTF-8"?> <states> <north> <state>Minnesota</state> <state>Iowa</state> <state>North Dakota</state> </north> <south> <state>Texas</state> <state>Oklahoma</state> <state>Louisiana</state> </south> <east> <state>New York</state> <state>North Carolina</state> <state>Massachusetts</state> </east> <west> <state>California</state> <state>Oregon</state> <state>Nevada</state> </west> </states>
MyJsp.jsp如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'MyJsp.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script type="text/javascript"> var flg=false; var requestType = ""; //得到XMLHttpRequest對象 function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) {} } } return xmlreq; } function startRequest(requestedList){ requestType=requestedList; flg=newXMLHttpRequest(); //當XMLHttpRequest對象在請求過程中間狀態改變的時候 //回來調用handleStateChange方法 flg.onreadystatechange = handleStateChange; flg.open("GET", "parseXML.xml", true); flg.send(null); } //處理函數 function handleStateChange(){ if(flg.readyState==4){ if(flg.status==200){ if(requestType=="north"){ listNorthStates(); }else if(requestType=="all"){ listAllStates(); }if(requestType=="south"){ listSouthStates(); } } } } //用於顯示NorthStates方法 function listNorthStates(){ var xmlDoc=flg.responseXML; var northNode=xmlDoc.getElementsByTagName("north")[0]; var northStates=northNode.getElementsByTagName("state"); outputList("North States",northStates); } //用於顯示SouthStates方法 function listSouthStates(){ var xmlDoc=flg.responseXML; var SouthNode=xmlDoc.getElementsByTagName("south")[0]; var SouthStates=SouthNode.getElementsByTagName("state"); outputList("South States",SouthStates); } //用於顯示AllStates方法 function listAllStates(){ var xmlDoc=flg.responseXML; var allStates=xmlDoc.getElementsByTagName("state"); outputList("All States in Document", allStates); } //輸出元素並顯示於提示框中 function outputList(title,states){ var out=title; var currState=null; for(var i=0;i<states.length;i++){ currState=states; out=out+"\n-"+currState.childNodes[0].nodeValue; } alert(out); } </script> <body> <form action="#"> <input type="button" value="View All Listed States" onclick="startRequest('all');"/><br> <input type="button" value="View All Listed Northern States" onclick="startRequest('north');"/><br> <input type="button" value="View All Listed Southern States" onclick="startRequest('south');"/> </form> </body> </html>
希望本文所述對大家的Ajax程序設計有所幫助。