<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = init;
function init() {
//1、获取部门节点
var dn = document.getElementById("dep");
//2、为该节点创建onchange
dn.onchange = getPerson
//3、创建一个getPerson的方法来处理事件
}
function getPerson() {
var did = this.value;
//1、获取XMLHttpRequest;
var xhr = createXMLHttpRequest();
//2、通过xhr来打开页面，使用POST
xhr.open("POST","person.do",true);
xhr.onreadystatechange = function() {
//3、处理请求
if(xhr.readyState==4&&xhr.status==200) {
//3.1、获取xml节点
var xmlDoc = xhr.responseXML;
//由于response的contentType是text/xml类型，此时就只能获取节点
//alert(xhr.resonseText);
//3.2、获取所有的person节点
var pns = xmlDoc.getElementsByTagName("person");
//3.3、遍历所以节点，获取id，name等信息
var node = "";
for(var i=0;i<pns.length;i++) {
node+=getValueByProp(pns[i],"id")+"----------"+
getValueByProp(pns[i],"name")+"----------"+
getValueByProp(pns[i],"salary")+"----------"+
getValueByProp(pns[i],"age")+"<br/>"
}
//3.4、写入到persons
document.getElementById("persons").innerHTML = node;
}
}
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("did="+did);
//4、发送信息,需要传入did
}
//根据节点获取值
function getValueByProp(node,prop) {
return (node.getElementsByTagName(prop))[0].firstChild.nodeValue;
}
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
//针对其他主流浏览器
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
//针对IE5和IE6
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("你使用的浏览器不支持XMLHttpRequest，请换一个浏览器再试！");
return null;
}
}
</script>
</head>
<body>
<select id="dep">
<option value="1">普通组</option>
<option value="2">会员组</option>
<option value="3">帅哥组</option>
</select>
<div id="persons"></div>
</body>
</html>
JAVA代码：
package com.study.servlet;
import java.io.IOException;
import java.io.Writer;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.study.model.*;
import java.util.*;
/**
* Servlet implementation class PersonServlet
*/
public class PersonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
Map<Integer,List<Person>> persons = new HashMap<Integer,List<Person>>();
/**
* @see HttpServlet#HttpServlet()
*/
public PersonServlet() {
super();
List<Person> ps = new ArrayList<Person>();
ps.add(new Person(1,"张三",1200,22));
ps.add(new Person(2,"李四",1300,23));
ps.add(new Person(3,"王五",1400,24));
persons.put(1, ps);
ps = new ArrayList<Person>();
ps.add(new Person(11,"刘德华",12000,32));
ps.add(new Person(12,"周杰伦",13000,33));
ps.add(new Person(13,"张曼玉",14000,34));
ps.add(new Person(14,"梁朝伟",15000,35));
persons.put(2, ps);
ps = new ArrayList<Person>();
ps.add(new Person(21,"孙悟空",22000,132));
ps.add(new Person(22,"猪八戒",23000,133));
ps.add(new Person(23,"沙和尚",24000,134));
ps.add(new Person(24,"唐和尚",25000,135));
persons.put(3, ps);
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1、由于返回的是xml，需要为respose设置contentType
response.setContentType("text/xml;charset=utf-8");
//2、获取Writer
Writer out = response.getWriter();
//3、获取部门id
int did = Integer.parseInt(request.getParameter("did"));
//4、获取用户列表对象，
List<Person> ps = persons.get(did);
//5、拼接xml
StringBuffer px = new StringBuffer();
px.append("<persons>");
for(Person p:ps) {
px.append("<person>");
px.append("<id>").append(p.getId()).append("</id>");
px.append("<name>").append(p.getName()).append("</name>");
px.append("<salary>").append(p.getSalary()).append("</salary>");
px.append("<age>").append(p.getAge()).append("</age>");
px.append("</person>");
}
px.append("</persons>");
out.write(px.toString());
}
}