ajax之xml数据展示

进行xml的数据展示：

Servlet代码：

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/XMLSer")    // 注解标注路径
public class XMLSer extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String xml = "<person>"+
                "<student number='T1'>"+
                "<name>张三</name>"+
                "<age>14</age>"+
                "</student>"+
                "</person>";
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        System.out.println("启动服务器！");
        response.getWriter().print(xml);
        
    }
}

JSP代码：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>XML</title>

<script>
    window.onload = function() {
        var h1 = document.getElementById("h1");
        var h2 = document.getElementById("h2");
        var table = document.getElementById("table");
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            // 创建异步对象
            xp = new XMLHttpRequest();
            // 打开连接
            xp.open("GET", "/XMLPro/XMLSer", true);
            // 发送请求
            xp.send();
            // 状态变化事件
            xp.onreadystatechange = function() {
                // h1.innerHTML = xp.readyState + " -- " + xp.status;
                if (xp.readyState == 4 && xp.status == 200) {
                    var doc = xp.responseXML;
                    var ele = doc.getElementsByTagName("student")[0];
                    var number = ele.getAttribute("number");
                    var td = "<tr><th>姓名</th><th>年龄</th></tr>";
                    var name;
                    var age;
                    var i;
                    for(i=0;i<2;i++){
                        td = td + "<tr><td>"+ele.getElementsByTagName("name")[i].textContent+"</td><td>"+ele.getElementsByTagName("age")[i].textContent+"</td></tr>";
                        // + "<tr><td>"+ele.getElementsByTagName("name")[1].textContent+"</td><td>"+ele.getElementsByTagName("age")[1].textContent+"</td></tr>"
                    }
                    table.innerHTML = td;
                }
            };
        };
    };
</script>

</head>
<body>
    <h1 id="h1">h1</h1>
    <h2 id="h2">h2</h2>
    <button id="btn">点击即可</button>
    <table id="table" border="1">
    
    </table>

</body>
</html>