編輯“Ajax- 與服務(wù)器通信1”（章節(jié)）

== 將響應(yīng)解析為XML ==


你已經(jīng)了解到，服務(wù)器不一定按XML格式發(fā)送響應(yīng)。只要Content-Type響應(yīng)首部正確地設(shè)置為text/plain（如果是XML，Content-Type響應(yīng)首部則是text/xml），將響應(yīng)作為簡單文本發(fā)送是完全可以的。復(fù)雜的數(shù)據(jù)結(jié)構(gòu)就很適合以XML格式發(fā)送。對于導(dǎo)航XML文檔以及修改XML文檔的結(jié)構(gòu)和內(nèi)容，當(dāng)前瀏覽器已經(jīng)提供了很好的支持。<br>

瀏覽器到底怎么處理服務(wù)器返回的XML呢？當(dāng)前瀏覽器把XML看作是遵循W3C DOM的XML文檔。W3C DOM指定了一組很豐富的API，可用于搜索和處理XML文檔。DOM兼容的瀏覽器必須實現(xiàn)這些API，而且不允許有自定義的行為，這樣就能盡可能地改善腳本在不同瀏覽器之間的可移植性。<br>

W3C DOM<br>

W3C DOM到底是什么？W3C主頁提供了清晰的定義：<br>

文檔對象模型（DOM）是與平臺和語言無關(guān)的接口，允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。文檔可以進一步處理，處理的結(jié)果可以放回到所提供的頁面中。<br>

不僅如此，W3C還解釋了為什么要定義標(biāo)準(zhǔn)的DOM。W3C從其成員處收到了大量請求，這些請求都是關(guān)于將XML和HTML文檔的對象模型提供給腳本所要采用的方法。提案并沒有提出任何新的標(biāo)記或樣式表技術(shù)，而只是力圖確保這些可互操作而且與腳本語言無關(guān)的解決方案能得到共識，并為開發(fā)社區(qū)所采納。簡單地說，W3C DOM標(biāo)準(zhǔn)的目的是盡量避免20世紀90年代末的腳本惡夢，那時相互競爭的瀏覽器都有自己專用的對象模型，而且通常都是不兼容的，這就使得實現(xiàn)跨平臺的腳本極其困難。<br>

W3C DOM和JavaScript<br>

W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文檔的API，為文檔提供了結(jié)構(gòu)化表示，并定義了如何通過腳本來訪問文檔結(jié)構(gòu)。JavaScript則是用于訪問和處理DOM的語言。如果沒有DOM，JavaScript根本沒有Web頁面和構(gòu)成頁面元素的概念。文檔中的每個元素都是DOM的一部分，這就使得JavaScript可以訪問元素的屬性和方法。<br>

DOM獨立于具體的編程語言，通常通過JavaScript訪問DOM，不過并不嚴格要求這樣。可以使用任何腳本語言來訪問DOM，這要歸功于其一致的API。表3-1列出了DOM元素的一些有用的屬性，表3-2列出了一些有用的方法。<br>

表3-1  用于處理XML文檔的DOM元素屬性<br>


 
childNodes<br>
返回當(dāng)前元素所有子元素的數(shù)組<br>
 
firstChild<br>
返回當(dāng)前元素的第一個下級子元素<br>
 
lastChild<br>
返回當(dāng)前元素的最后一個子元素<br>
 
nextSibling<br>
返回緊跟在當(dāng)前元素后面的元素<br>
 
nodeValue<br>
指定表示元素值的讀/寫屬性<br>
 
parentNode<br>
返回元素的父節(jié)點<br>
 
previousSibling<br>
返回緊鄰當(dāng)前元素之前的元素<br>
 

表3-2　用于遍歷XML文檔的DOM元素方法<br>

 
getElementById(id) (document)<br>
獲取有指定惟一ID屬性值文檔中的元素<br>
 
getElementsByTagName(name)<br>
返回當(dāng)前元素中有指定標(biāo)記名的子元素的數(shù)組<br>
 
hasChildNodes()<br>
返回一個布爾值，指示元素是否有子元素<br>
 
getAttribute(name)<br>
返回元素的屬性值，屬性由name指定<br>
 

有了W3C DOM，就能編寫簡單的跨瀏覽器腳本，從而充分利用XML的強大功能和靈活性，將XML作為瀏覽器和服務(wù)器之間的通信介質(zhì)。<br>

從下面的例子可以看到，使用遵循W3C DOM的JavaScript來讀取XML文檔是何等簡單。代碼清單3-3顯示了服務(wù)器向瀏覽器返回的XML文檔的內(nèi)容。這是一個簡單的美國州名列表，各個州按地區(qū)劃分。<br>

代碼清單3-3  服務(wù)器返回的美國州名列表<br>

 <?xml version="1.0" encoding="UTF-8"?><br>
 <states><br>
    <north><br>
        <state>Minnesota</state><br>
        <state>Iowa</state><br>
        <state>North Dakota</state><br>
    </north><br>
    <south><br>
        <state>Texas</state><br>
        <state>Oklahoma</state><br>
        <state>Louisiana</state><br>
    </south><br>
    <east><br>
        <state>New York</state><br>
        <state>North Carolina</state><br>
        <state>Massachusetts</state><br>
    </east><br>
    <west><br>
        <state>California</state><br>
        <state>Oregon</state><br>
        <state>Nevada</state><br>
    </west><br>
 </states><br>

在瀏覽器上會生成具有兩個按鈕的HTML頁面。點擊第一個按鈕，將從服務(wù)器加載XML文檔，然后在警告框中顯示列于文檔中的所有州。點擊第二個按鈕也會從服務(wù)器加載XML文檔，不過只在警告框中顯示北部地區(qū)的各個州（見圖3-2）。<br>
[[Image:Image005.jpg]]
圖3-2  點擊頁面上的任何一個按鈕都會從服務(wù)器加載XML文檔，并在警告框中顯示適當(dāng)?shù)慕Y(jié)果 <br>

代碼清單3-4顯示了parseXML.html。<br>

代碼清單3-4  parseXML.html<br>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br>
 <html xmlns="http://www.w3.org/1999/xhtml"><br>
 <head><br>
 <title>Parsing XML Responses with the W3C DOM</title><br>
 <script type="text/javascript"><br>
 var xmlHttp;<br>
 var requestType = "";<br>
 function createXMLHttpRequest() {<br>
    if (window.ActiveXObject) {<br>
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
    }<br>
    else if (window.XMLHttpRequest) {<br>
        xmlHttp = new XMLHttpRequest();<br>
    }<br>
 }<br>
 function startRequest(requestedList) {<br>
    requestType = requestedList;<br>
    createXMLHttpRequest();<br>
    xmlHttp.onreadystatechange = handleStateChange;<br>
    xmlHttp.open("GET", "parseXML.xml", true);<br>
    xmlHttp.send(null);<br>
 }<br>
 function handleStateChange() {<br>
    if(xmlHttp.readyState == 4) {<br>
       if(xmlHttp.status == 200) {<br>
            if(requestType == "north") {<br>
                listNorthStates();<br>
            }<br>
            else if(requestType == "all") {<br>
                listAllStates();<br>
            }<br>
        }<br>
    }
 <br>
 }<br>
 function listNorthStates() {<br>
    var xmlDoc = xmlHttp.responseXML;<br>
    var northNode = xmlDoc.getElementsByTagName("north")[0];<br>
   var out = "Northern States";<br>
    var northStates = northNode.getElementsByTagName("state");<br>
    outputList("Northern States", northStates);<br>
 }<br>
 function listAllStates() {<br>
    var xmlDoc = xmlHttp.responseXML;<br>
    var allStates = xmlDoc.getElementsByTagName("state");<br>
    outputList("All States in Document", allStates);<br>
 }<br>
 function outputList(title, states) {<br>
    var out = title;<br>
    var currentState = null;<br>
    for(var i = 0; i < states.length; i++) {<br>
        currentState = states[i];<br>
       out = out + "\n- " + currentState.childNodes[0].nodeValue;<br>
    }<br>
    alert(out);<br>
 }<br>
 </script><br>

</head><br>
<body><br>
    <nowiki><h1>Process XML Document of U.S. States</h1></nowiki><br>
    <nowiki><br/><br/></nowiki><br>
    <nowiki><form action="#"></nowiki><br>
        <nowiki><input type="button" value="View All Listed States"</nowiki><br>
                <nowiki>onclick="startRequest('all');"/></nowiki><br>
        <nowiki><br/><br/></nowiki><br>
        <nowiki><input type="button" value="View All Listed Northern States"</nowiki><br>
                 <nowiki>onclick="startRequest('north');"/></nowiki><br>
    <nowiki></form></nowiki><br>
</body><br>
</html><br>

以上腳本從服務(wù)器獲取XML文檔并加以處理，它與前面看到的例子很相似，不過前面的例子只是將響應(yīng)處理為簡單文本。關(guān)鍵區(qū)別就在于listNorthStates和listAllStates函數(shù)。前面的例子從XMLHttpRequest對象獲取服務(wù)器響應(yīng)，并使用XMLHttpRequest對象的responseText屬性將響應(yīng)獲取為文本。listNorthStates和listAllStates函數(shù)則不同，它們使用了XMLHttpRequest對象的responseXML屬性，將結(jié)果獲取為XML文檔，這樣一來，你就可以使用W3C DOM方法來遍歷XML文檔了。<br>

仔細研究一下listAllStates函數(shù)。它首先創(chuàng)建了一個局部變量，名為xmlDoc，并將這個變量初始化設(shè)置為服務(wù)器返回的XML文檔，這個XML文檔是使用XMLHttpRequest對象的responseXML屬性得到的。利用XML文檔的getElementsByTagName方法可以獲取文檔中所有標(biāo)記名為state的元素。getElementsByTagName方法返回了包含所有state元素的數(shù)組，這個數(shù)組將賦給名為allStates的局部變量。
<br>
從XML文檔獲取了所有state元素之后，listAllStates函數(shù)調(diào)用outputList函數(shù)，并在警告框中顯示這些state元素。listAllStates方法將迭代處理state元素的數(shù)組，將各元素的相應(yīng)州名逐個追加到一個串中，這個串最后將顯示在警告框中。
<br>
有一點要特別注意，即如何從state元素獲取州名。你可能認為，state元素會簡單地提供屬性或方法來得到這個元素的文本，但并非如此。<br>

表示州名的文本實際上是state元素的子元素。在XML文檔中，文本本身被認為是一個節(jié)點，而且必須是另外某個元素的子元素。由于表示州名的文本實際上是state元素的子元素，所以必須先從state元素獲取文本元素，再從這個文本元素得到其文本內(nèi)容。<br>

outputList函數(shù)的工作就是如此。它迭代處理數(shù)組中的所有元素，將當(dāng)前元素賦給currentState變量。因為表示州名的文本元素總是state元素的第一個子元素，所以可以使用childNodes屬性來得到文本元素。一旦有了具體的文本元素，就可以使用nodeValue屬性返回表示州名的文本內(nèi)容。<br>

listNorthStates函數(shù)與listAllStates是類似的，只不過增加了一個小技巧。你只想得到北部地區(qū)的州，而不是所有州。為此，首先使用getElementsByTagName方法獲取north標(biāo)記，從而獲得XML文檔中的north元素。因為文檔只包含一個north元素，而且getElementsByTagName方法總是返回一個數(shù)組，所以要用[0]記法來抽出north元素。這是因為，在getElementsByTagName方法返回的數(shù)組中，north元素處在第一個位置上（也是惟一的位置）。既然有了north元素，接下來調(diào)用north元素的getElementsByTagName方法，就可以得到north元素的state子元素。有了north元素所有state子元素的數(shù)組后，再使用outputList方法在警告框中顯示這些州名。<br>