现在的位置: 首页 > 综合 > 正文

Ajax技术(7)–AJAX解析XML

2018年05月20日 ⁄ 综合 ⁄ 共 4277字 ⁄ 字号 评论关闭

一、用ajax原生方式解析xml数据。

js 代码 

 1     <SCRIPT LANGUAGE="JavaScript">   
2 var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
3 xmlHttp.open("GET", "AJAX", true);
4 /* 设置处理服务器的JS函数,函数又 xmlHttp.onreadystatechange来确定 */
5 xmlHttp.onreadystatechange=function() {
6 if (xmlHttp.readyState==4 && xmlHttp.status==200) {
7 //ajax的XML传输的解析。获取解析的数据
8 var xml = xmlHttp.responseXML;
9
10 //解析标签<stusn>
11 //var root1=root.getElementsByTagName("stusn");
12 //解析<stusn>的第一个标签的nation属性
13 //var name = root1[0].getAttribute("nation");
14 var div1 = document.getElementById("ccc");
15 var stus = xml.getElementsByTagName("stu");
16 for(var i = 0 ; i < stus.length ; i++){
17 var dl = document.createElement("dl");
18 var dt = document.createElement("dt");
19 var dd = document.createElement("dd");
20 //在div的最前面添加元素
21 div1.insertBefore(dl,div1.firstChild);
22 dl.appendChild(dt);
23 dl.appendChild(dd);
24 //设置元素的值
25 dt.innerHTML = "姓名:" + stus[i].getElementsByTagName("name")[0].firstChild.data;
26 dd.innerHTML = "年龄:" + stus[i].getElementsByTagName("age")[0].firstChild.data;
27 }
28 }
29 }
30 xmlHttp.send();
31 </script>

 

后台处理代码

java 代码
 1     import java.io.IOException;   
2 import java.io.PrintWriter;
3
4 import javax.servlet.ServletException;
5 import javax.servlet.http.HttpServlet;
6 import javax.servlet.http.HttpServletRequest;
7 import javax.servlet.http.HttpServletResponse;
8
9 public class AJAXParseXML extends HttpServlet {
10
11 /**
12 * Constructor of the object.
13 */
14 public AJAXParseXML() {
15 super();
16 }
17
18 /**
19 * Destruction of the servlet. <br>
20 */
21 public void destroy() {
22 super.destroy(); // Just puts "destroy" string in log
23 // Put your code here
24 }
25
26 public void doGet(HttpServletRequest request, HttpServletResponse response)
27 throws ServletException, IOException {
28
29 //如果要传输XML,则需要设置传输的类型为text/xml
30 response.setContentType("text/xml;charset=gb2312");
31 response.setHeader("Cache-Control","no-cache");
32 PrintWriter out = response.getWriter();
33 // out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
34 // out.println("<stusn nation=\"china1\" ></stusn>");
35 TestXML tx = new TestXML();
36 tx.sendXML(out);
37 out.close();
38 }
39
40 public void doPost(HttpServletRequest request, HttpServletResponse response)
41 throws ServletException, IOException {
42
43 }
44
45 public void init() throws ServletException {
46 // Put your code here
47 }
48
49 }

产生XML文档的代码

java 代码
 1     import java.io.FileOutputStream;   
2 import java.io.OutputStream;
3 import java.io.PrintWriter;
4
5 import javax.xml.parsers.DocumentBuilder;
6 import javax.xml.parsers.DocumentBuilderFactory;
7 import javax.xml.parsers.ParserConfigurationException;
8 import javax.xml.transform.Transformer;
9 import javax.xml.transform.TransformerFactory;
10 import javax.xml.transform.dom.DOMSource;
11 import javax.xml.transform.stream.StreamResult;
12
13 import org.w3c.dom.Document;
14 import org.w3c.dom.Element;
15
16 public class TestXML {
17
18 public void sendXML(PrintWriter os){
19 Document doc ;
20 Element stus;
21 Element stu;
22 Element name;
23 Element age;
24 DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
25
26 try {
27 DocumentBuilder db = dbf.newDocumentBuilder();
28
29 doc = db.newDocument();
30
31 stus = doc.createElement("stusn");
32
33 stu = doc.createElement("stu");
34
35 name = doc.createElement("name");
36 name.appendChild(doc.createTextNode("andrii"));
37
38 age = doc.createElement("age");
39 age.appendChild(doc.createTextNode("27"));
40
41 stu.appendChild(name);
42 stu.appendChild(age);
43
44 stus.setAttribute("nation", "china");
45 stus.appendChild(stu);
46
47 doc.appendChild(stus);
48
49 TransformerFactory tf = TransformerFactory.newInstance();
50
51 Transformer ts = tf.newTransformer();
52 // ts.transform(new DOMSource(doc), new StreamResult(new FileOutputStream("D:/test.xml")));
53 ts.transform(new DOMSource(doc), new StreamResult(os));
54
55 } catch (Exception e) {
56 // TODO Auto-generated catch block
57 e.printStackTrace();
58 }
59 }
60 }

二、xml作为单独文件存在。test.xml

<?xml version="1.0" encoding="utf-8" ?>  
<root>  
    <book id="1">  
        <name>深入浅出extjs</name>  
        <author>张三</author>  
        <price>88</price>  
    </book>  
    <book id="2">  
        <name>锋利的jQuery</name>  
        <author>李四</author>  
        <price>99</price>  
    </book>  
    <book id="3">  
        <name>深入浅出flex</name>  
        <author>王五</author>  
        <price>108</price>  
    </book>  
    <book id="4">  
        <name>java编程思想</name>  
        <author>钱七</author>  
        <price>128</price>  
    </book>  
</root>  

在Test.html中解析代码

$("#a3").click(function(){  
        $.get('test.xml',function(data){  
            var s="";  
            $(data).find('book').each(function(i){  
                var id=$(this).attr('id');  
                var name=$(this).children('name').text();  
                var author=$(this).children('author').text();  
                var price=$(this).children('price').text();  
                s+=id+"    "+name+"    "+author+"    "+price+"<br>";  
            });  
            $('#div2').html(s);  
        });  
    }); 



 

抱歉!评论已关闭.