6、请求参数作为XML发送——ajax基础笔记

时间 2021-07-14 标签 XML Ajax JavaScript 浏览器

如果只是使用一个包含名/值对的简单查询串，这可能不够健壮，不足以向服务器传递大量复杂的模型变化。更好的解决方案是将模式的变化作为XML发送到服务器。

请求参数作为XML发送

示例：选择框中的选中的项将作为XML发送到服务器

postingXML.html清单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sending an XML Request</title>

<script type="text/javascript">

var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
//创建XML
function createXML() {
    var xml = "<pets>";
    
    var options = document.getElementById("petTypes").childNodes;
    var option = null;
    //下拉框中所有被选中的项添加到XML文档中
    for(var i = 0; i < options.length; i++) {
        option = options[i];
        if(option.selected) {
            xml = xml + "<type>" + option.value + "</type>";
        }
    }
    xml = xml + "</pets>";
    return xml;
}
//主函数
function sendPetTypes() {
    createXMLHttpRequest();
    
    var xml = createXML();
    //避免读取缓存，加上时间戳
    var url = "PostingXMLExample?timeStamp=" + new Date().getTime();
    //参数以XML形式发送时，以POST方式发送
    xmlHttp.open("POST", url, true);
    xmlHttp.onreadystatechange = handleStateChange;
    //以POST发送时需要设置以下HTTP头
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    
    xmlHttp.send(xml);
}
//状态改变处理函数
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            parseResults();
        }
    }
}
//回调方式
function parseResults() {
    var responseDiv = document.getElementById("serverResponse");
    if(responseDiv.hasChildNodes()) {
        responseDiv.removeChild(responseDiv.childNodes[0]);
    }
    
    var responseText = document.createTextNode(xmlHttp.responseText);
    responseDiv.appendChild(responseText);
}


</script>
</head>

<body>
  <h1>Select the types of pets in your home:</h1>
  
  <form action="#">
    <select id="petTypes" size="6" multiple="true">
        <option value="cats">Cats</option>
        <option value="dogs">Dogs</option>
        <option value="fish">Fish</option>
        <option value="birds">Birds</option>
        <option value="hamsters">Hamsters</option>
        <option value="rabbits">Rabbits</option>
    </select>
    
    <br/><br/>
    <input type="button" value="Submit Pets" onclick="sendPetTypes();"/>
  </form>

  <h2>Server Response:</h2>

  <div id="serverResponse"></div>

</body>
</html>

注：这个例子为什么使用串连接来创建XML，而不是直接创建文档和元素对象呢？遗憾的是，对于从头构建文档对象，目前还没有跨浏览器的技术。IE通过ActiveX对象提供这个功能，Mozilla浏览器则通过本地JavaScript对象来提供，其他浏览器可能根本不支持，也可能通过其他途径来支持这个功能。

PostingXMLExample.java清单：

package ajaxbook.chap3;

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

public class PostingXMLExample extends HttpServlet {
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        
        String xml = readXMLFromRequestBody(request);
        Document xmlDoc = null;
        try {
            xmlDoc = 
                    DocumentBuilderFactory.newInstance().newDocumentBuilder()
                    .parse(new ByteArrayInputStream(xml.getBytes()));
        }
        catch(ParserConfigurationException e) {
            System.out.println("ParserConfigurationException: " + e);
        }
        catch(SAXException e) {
            System.out.println("SAXException: " + e);
        }

        /* Note how the Java implementation of the W3C DOM has the same methods
         * as the JavaScript implementation, such as getElementsByTagName and 
         * getNodeValue.
         */
        NodeList selectedPetTypes = xmlDoc.getElementsByTagName("type");
        String type = null;
        String responseText = "Selected Pets: ";
        for(int i = 0; i < selectedPetTypes.getLength(); i++) {
           type = selectedPetTypes.item(i).getFirstChild().getNodeValue();
           responseText = responseText + " " + type;
        }
        
        response.setContentType("text/xml");
        response.getWriter().print(responseText);
    }
    
    private String readXMLFromRequestBody(HttpServletRequest request){
        StringBuffer xml = new StringBuffer();
        String line = null;
        try {
            BufferedReader reader = request.getReader();
            while((line = reader.readLine()) != null) {
                xml.append(line);
            }
        }
        catch(Exception e) {
            System.out.println("Error reading XML: " + e.toString());
        }
        return xml.toString();
    }
}

运行结果：