stevenjohn 发表于 2013-1-23 01:35:12

ajax将数据作为xml发送到服务器

1、postingXML.html:

<html>
<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();   
 }
   }


   function createXML(){//用来生成一串xml内容
    var xml="<pres>";
    var options=document.getElementById("petTypes").childNodes;
    var option=null;
    for(var i=0;i<options.length;i++)
    {
   option=options;
   if(option.selected){
      xml=xml+"<type>"+option.value+"<\/type>";//<\/type>为<\ /type>
   }   
    }
    xml=xml+"<\/pets>";
    return xml;
   }
   
   function sendPetTypes(){
      createXMLHttpRequest();
   
    var xml=createXML();
   
   var url="PostingXMLExample?timeStamp="+new Date().getTime();//timeStamp不是从页面上获得的数据
    xmlHttp.open("POST",url,true);
    xmlHttp.onreadystatechange=handleStateChange;
    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);
   }
   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>
       <option value="cats">Cats</option>
       <option value="dogs">Dogs</option>
       <option value="fish">Fish</option>
       <option value="hamsters">Hamsters</option>
       <option value="rabbits">Rabbits</option>      
    </select>
    <br><br>
   <input type="button" value="Submit Pets" >
    </form>
      <h2>Server Response:</h2>
    <div id="serverResponse"></div>
</body>
</html>

PostingXMLExample.java:

package three;

import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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;//Document 接口表示整个 HTML 或 XML 文档。从概念上讲,它是文档树的根,并提供对文档数据的基本访问。
   try
   {
    xmlDoc=DocumentBuilderFactory.newInstance().newDocumentBuilder().parse(new ByteArrayInputStream(xml.getBytes()));//(1)DocumentBuilderFactory:定义工厂 API,使应用程序能够从 XML 文档获取生成 DOM 对象树的解析器。(2)newDocumentBuilder():使用当前配置的参数创建一个新的 DocumentBuilder 实例。(3)DocumentBuilder:定义 API, 使其从 XML 文档获取 DOM 文档实例。使用此类,应用程序员可以从 XML 获取一个 Document。此类的实例可以从DocumentBuilderFactory.newDocumentBuilder() 方法获取。获取此类的实例之后,将可以从各种输入源解析 XML。这些输入源为 InputStreams、Files、URL 和 SAX InputSources。(4)Document parse(InputStream is)将给定 InputStream 的内容解析为一个 XML 文档,并且返回一个新的DOM Document 对象。如果 InputStream 为 null,则抛出一个 IllegalArgumentException。参数:is - 包含要解析内容的 InputStream。返回:解析 InputStream 的 Document 结果。(5)ByteArrayInputStream:创建一个 ByteArrayInputStream(包含一个内部缓冲区,该缓冲区存储从流中读取的字节。内部计数器跟踪 read 方法要提供的下一个字节。 ),使用 buf 作为其缓冲区数组。参数:buf - 输入缓冲区。(6)"String".getBytes():使用平台默认的字符集将此 String 解码为字节序列,并将结果存储到一个新的字节数组中。
   }catch(ParserConfigurationException e)
   {
    System.out.println("ParserConfigurationException:"+e);
   }catch(SAXException e)
   {
    System.out.println("SAXException:"+e);
   }
   NodeList selectedPetTypes=xmlDoc.getElementsByTagName("type");//提供对节点的有序集合的抽象,没有定义或约束如何实现此集合。DOM 中的 NodeList 对象是活动的。NodeList 中的项可以通过从 0 开始的整数索引进行访问。Document对象与浏览器对象有着共同的方法,如getElementsByTagName("..."),按文档顺序返回包含在文档中且具有给定标记名称的所有 Element 的 NodeList。

   String type=null;
   String responseText="Selected Pets:";
   for(int i=0;i<selectedPetTypes.getLength();i++)//getLength:返回列表中的节点数。
   {
    type=selectedPetTypes.item(i).getFirstChild().getNodeValue();//item(i):返回集合中的第 index 个项。如果 index 大于或等于此列表中的节点数,则返回 null。
    responseText=responseText+" "+type;
   }
   response.setContentType("text/xml");
   response.getWriter().print(responseText);
}
private String readXMLFromRequestBody(HttpServletRequest request) {
   StringBuffer xml=new StringBuffer();//线程安全的可变字符序列。一个类似于 String 的字符串缓冲区,但不能修改。虽然在任意时间点上它都包含某种特定的字符序列,但通过某些方法调用可以改变该序列的长度和内容。
   String line=null;
   try
   {
   BufferedReader reader=request.getReader();//(1)BufferedReader:从字符输入流中读取文本,缓冲各个字符,从而提供字符、数组和行的高效读取。(2)ServletRequest.getReader():Retrieves(取回,恢复,补偿)the body of the request as character data using a BufferedReader. The reader translates the character data according to the character encoding used on the body. Either this method or getInputStream() may be called to read the body, not both. Returns:a BufferedReader containing the body of the request。。这里看来,得到的是xmlhttprequest.send(...)中的内容。
      while((line=reader.readLine())!=null)
    {
   xml.append(line);
    }
   }catch(Exception e)
   {
    System.out.println("Error reading XML:"+e.toString());
   }
   return xml.toString();

}
}

web.xml:

<servlet>
<servlet-name>PostingXMLExample</servlet-name>
<servlet-class>three.PostingXMLExample</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>PostingXMLExample</servlet-name>
    <url-pattern>/three/PostingXMLExample</url-pattern> //注意,包名要包括进去。
</servlet-mapping>
页: [1]
查看完整版本: ajax将数据作为xml发送到服务器