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

== 請求參數(shù)作為XML發(fā)送 ==


與幾年前相比，當前瀏覽器上JavaScript的兼容性有了長足的進步，已經(jīng)不可同日而語，再加上越來越成熟的JavaScript開發(fā)工具和技術(shù)，你可以決定把Web瀏覽器作為開發(fā)平臺。并不只是依賴于瀏覽器來看待模型—視圖—控制器模式中的視圖，還可以用JavaScript實現(xiàn)部分業(yè)務模型?？梢允褂肁jax技術(shù)把模型中的變化持久存儲到后臺服務器。如果模型放在瀏覽器上，模型的變化可以一齊傳遞到服務器，從而減少對服務器的遠程調(diào)用次數(shù)，還可能提高性能。<br>

如果只是使用一個包含名/值對的簡單查詢串，這可能不夠健壯，不足以向服務器傳遞大量復雜的模型變化。更好的解決方案是將模型的變化作為XML發(fā)送到服務器。怎么向服務器發(fā)送XML呢？<br>

可以把XML作為請求體的一部分發(fā)送到服務器，這與POST請求中將查詢串作為請求體的一部分進行發(fā)送異曲同工。服務器可以從請求體讀到XML，并加以處理。<br>

下面的例子展示了對于一個Ajax請求如何向服務器發(fā)送XML。圖3-5顯示了這個頁面，其中有一個簡單的選擇框，用戶可以選擇寵物的類型。這是一個相當簡化的例子，但是由此可以了解如何向服務器發(fā)送XML。<br>

[[Image:Image008.jpg]]


圖3-5　選擇框中選中的項將作為XML發(fā)送到服務器<br>

代碼清單3-9顯示了postingXML.html。<br>

代碼清單3-9  postingXML.html<br>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
  <nowiki> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><.nowiki><br>
 <nowiki><html xmlns="http://www.w3.org/1999/xhtml"><.nowiki><br>
 <head><br>
 <nowiki><title>Sending an XML Request</title><.nowiki><br>
 <nowiki><script type="text/javascript"><.nowiki><br>
 <nowiki>var xmlHttp;<.nowiki><br>
 <nowiki>function createXMLHttpRequest() {<.nowiki><br>
    if (window.ActiveXObject) {<br>
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
    }<br>
    else if (window.XMLHttpRequest) {<br>
        xmlHttp = new XMLHttpRequest();<br>
    }<br>
 }<br>
 function createXML() {<br>
    var xml = "<pets>";<br>
    var options = document.getElementById("petTypes").childNodes;<br>
    var option = null;<br>
    for(var i = 0; i < options.length; i++) {<br>
        option = options[i];<br>
        if(option.selected) {<br>
            xml = xml + "<type>" + option.value + "<\/type>";<br>
        }<br>
    }<br>
    xml = xml + "<\/pets>";<br>
    return xml;<br>
 }<br>
 function sendPetTypes() {<br>
    createXMLHttpRequest();<br>
    var xml = createXML();<br>
    var url = "PostingXMLExample?timeStamp=" + new Date().getTime();<br>
    xmlHttp.open("POST", url, true);<br>
    xmlHttp.onreadystatechange = handleStateChange;<br>
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");<br>
    xmlHttp.send(xml);<br>
 }<br>
 function handleStateChange() {<br>
    if(xmlHttp.readyState == 4) {<br>
        if(xmlHttp.status == 200) {<br>
            parseResults();<br>
       }<br>
    }<br>
 }<br>
 function parseResults() {<br>
    var responseDiv = document.getElementById("serverResponse");<br>
    if(responseDiv.hasChildNodes()) {<br>
        responseDiv.removeChild(responseDiv.childNodes[0]);<br>
    }<br>
    var responseText = document.createTextNode(xmlHttp.responseText);<br>
    responseDiv.appendChild(responseText);<br>
 }<br>
 </script><br>
 </head><br>
 <body><br>
  <nowiki><h1>Select the types of pets in your home:</h1></nowiki><br>
  <nowiki><form action="#"></nowiki><br>
    <nowiki><select id="petTypes" size="6" multiple="true"></nowiki><br>
        <nowiki><option value="cats">Cats</option></nowiki><br>
        <nowiki><option value="dogs">Dogs</option></nowiki><br>
        <nowiki><option value="fish">Fish</option></nowiki><br>
        <nowiki><option value="birds">Birds</option></nowiki><br>
        <nowiki><option value="hamsters">Hamsters</option></nowiki><br>
        <nowiki><option value="rabbits">Rabbits</option></nowiki><br>
  <nowiki></select></nowiki><br>
  <nowiki><br/><br/></nowiki><br>
  <nowiki><input type="button" value="Submit Pets" onclick="sendPetTypes();"/></nowiki><br>
 <nowiki></form></nowiki><br>
 <nowiki><h2>Server Response:</h2></nowiki><br>
 <nowiki><div id="serverResponse"></div></nowiki><br>
 </body><br>
 </html><br>

這個例子與前面的POST例子基本上是一樣的。區(qū)別在于，不是發(fā)送由名/值對組成的查詢串，而是向服務器發(fā)送XML串。 <br>
點擊表單上的Submit Pets（提交寵物）按鈕將調(diào)用sendPetTypes函數(shù)。類似于前面的例子，這個函數(shù)首先創(chuàng)建XMLHttpRequest對象的一個實例，然后調(diào)用名為createXML的輔助函數(shù)，它根據(jù)所選的寵物類型建立XML串。<br>

函數(shù)createXML使用document.getElementbyId方法獲得select元素的引用，然后迭代處理所有option子元素，對于選中的每個option元素依據(jù)所選寵物類型創(chuàng)建XML標記，并逐個追加到XML中。循環(huán)結(jié)束時，要在返回到調(diào)用函數(shù)（sendPetTypes）之前向XML串追加結(jié)束pets標記。<br>

一旦得到了XML串，sendPetTypes函數(shù)繼續(xù)為請求準備XMLHttpObject，然后把XML串指定為send()方法的參數(shù)，從而將XML發(fā)送到服務器。<br>

在createXML方法中，為什么結(jié)束標記中斜線前面有一個反斜線？<br>

SGML規(guī)約（HTML就是從SGML發(fā)展來的）中提供了一個技巧，利用這個技巧可以識別出script元素中的結(jié)束標記，但是其他內(nèi)容（如開始標記和注釋）則不能識別。使用反斜線可以避免把串解析為標記。即使沒有反斜線，大多數(shù)瀏覽器也能安全地處理，但是根據(jù)嚴格的XHTML標準，應該使用反斜線。
<br>
聰明的讀者可能注意到，根據(jù)XMLHttpRequest對象的文檔，send()方法可以將串和XML文檔對象實例作為參數(shù)。那么，這個例子為什么使用串連接來創(chuàng)建XML，而不是直接創(chuàng)建文檔和元素對象呢？遺憾的是，對于從頭構(gòu)建文檔對象，目前還沒有跨瀏覽器的技術(shù)。IE通過ActiveX對象提供這個功能，Mozilla瀏覽器則通過本地JavaScript對象來提供，其他瀏覽器可能根本不支持，也可能通過其他途徑來支持這個功能。<br>

讀取XML的服務器端代碼如代碼清單3-10所示，這個代碼稍有些復雜。在此使用了Java servlet來讀取請求，并解析XML串，不過你也可以使用其他的服務器端技術(shù)。<br>

一旦收到XMLHttpRequest對象的請求，就會調(diào)用這個servlet的doPost方法。doPost方法使用名為readXMLFromRequestBody的輔助方法從請求體中抽取XML，然后使用JAXP接口將XML串轉(zhuǎn)換為Document對象。<br>

注意，Document對象是W3C指定的Document接口的一個實例。因此，它與瀏覽器的Document對象有著同樣的方法，如getElementsByTagName?？梢允褂眠@個方法來得到文檔中所有type元素的列表。對于文檔中的每個type元素，會得到文本值（應該記得，文本值是type元素的第一個子節(jié)點），并逐個追加到串中。處理完所有type元素后，響應串寫回到瀏覽器。<br>

代碼清單3-10  PostingXMLExample.java<br>

 package ajaxbook.chap3;<br>
 import java.io.*;<br>
 import javax.servlet.*;<br>
 import javax.servlet.http.*;<br>
 import javax.xml.parsers.DocumentBuilderFactory;<br>
 import javax.xml.parsers.ParserConfigurationException;<br>
 import org.w3c.dom.Document;<br>
 import org.w3c.dom.NodeList;<br>
 import org.xml.sax.SAXException;<br>
 public class PostingXMLExample extends HttpServlet {<br>
    protected void doPost(HttpServletRequest request, HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        String xml = readXMLFromRequestBody(request);<br>
        Document xmlDoc = null;<br>
        try {<br>
            xmlDoc =<br>
                    DocumentBuilderFactory.newInstance().newDocumentBuilder()<br>
                    .parse(new ByteArrayInputStream(xml.getBytes()));<br>
        }<br>
        catch(ParserConfigurationException e) {<br>
           System.out.println("ParserConfigurationException: " + e);<br>
        }<br>
       catch(SAXException e) {<br>
            System.out.println("SAXException: " + e);<br>
        }<br>
        /* Note how the Java implementation of the W3C DOM has the same methods<br>
         * as the JavaScript implementation, such as getElementsByTagName and<br>
         * getNodeValue.<br>
         */<br>
       NodeList selectedPetTypes = xmlDoc.getElementsByTagName("type");<br>
        String type = null;<br>
        String responseText = "Selected Pets: ";<br>
        for(int i = 0; i < selectedPetTypes.getLength(); i++) {<br>
            type = selectedPetTypes.item(i).getFirstChild().getNodeValue();<br>
            responseText = responseText + " " + type;<br>
        }<br>
       response.setContentType("text/xml");<br>
        response.getWriter().print(responseText);<br>
    }<br>
    private String readXMLFromRequestBody(HttpServletRequest request){<br>
        StringBuffer xml = new StringBuffer();<br>
        String line = null;<br>
        try {<br>
            BufferedReader reader = request.getReader();<br>
            while((line = reader.readLine()) != null) {<br>
                xml.append(line);<br>
            }<br>
        }<br>
       catch(Exception e) {<br>
            System.out.println("Error reading XML: " + e.toString());<br>
        }<br>
        return xml.toString();<br>
    }<br>
 }
<br>