<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=init;
function init(){
var deps=document.getElementById("dep");
deps.onchange=getdata;
}
function getdata(){
var value=this.value;
var xtr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xtr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xtr=new ActiveXObject("Microsoft.XMLHTTP");
}
xtr.open("post","ajax.do",true);
xtr.onreadystatechange=function(){
if(xtr.readyState==4&&xtr.status==200){
var xmlDoc=xtr.responseXML;
var ps=xmlDoc.getElementsByTagName("person");
var str="";
for(var i=0;i<ps.length;i++){
str+=ps[i].getElementsByTagName("id")[0].innerHTML+"----"
+ps[i].getElementsByTagName("name")[0].innerHTML+"----"
+ps[i].getElementsByTagName("salary")[0].innerHTML+"----"
+ps[i].getElementsByTagName("sex")[0].innerHTML+"<br>";
}
document.getElementById("display").innerHTML=str;
}
}
xtr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xtr.send("dep="+value);
}
</script>
</head>
<body>
<select id="dep">
<option value="1">技术部1</option>
<option value="2">技术部2</option>
<option value="3">技术部3</option>
</select>
<div id="display"></div>
</body>
</html>
@WebServlet("/ajax.do")
public class HelloAjax extends HttpServlet {
private static final long serialVersionUID = 1L;
private static Map<Integer, List<Person>> personMap=null;
/**
* @see HttpServlet#HttpServlet()
*/
public HelloAjax() {
super();
// TODO Auto-generated constructor stub
personMap=new HashMap<>();
List<Person> ps=new ArrayList<>();
ps.add(new Person(1, "1xm1", "男", 150.8));
ps.add(new Person(2, "1xm2", "男", 150.9));
ps.add(new Person(3, "1xm3", "男", 160.8));
ps.add(new Person(4, "1xm4", "男", 170.8));
personMap.put(1, ps);
ps=new ArrayList<>();
ps.add(new Person(1, "2xm1", "男", 250.8));
ps.add(new Person(2, "2xm2", "男", 250.9));
ps.add(new Person(3, "2xm3", "男", 260.8));
ps.add(new Person(4, "2xm4", "男",270.8));
personMap.put(2, ps);
ps=new ArrayList<>();
ps.add(new Person(1, "3xm1", "男", 350.8));
ps.add(new Person(2, "3xm2", "男", 350.9));
ps.add(new Person(3, "3xm3", "男", 360.8));
ps.add(new Person(4, "3xm4", "男", 370.8));
personMap.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
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/xml;charset=utf-8");
int depid=Integer.parseInt(request.getParameter("dep"));
List<Person> ps=personMap.get(depid);
StringBuffer xml=new StringBuffer();
xml.append("<persons>");
for(Person p:ps) {
xml.append("<person>");
xml.append("<id>").append(p.getId()).append("</id>");
xml.append("<name>").append(p.getName()).append("</name>");
xml.append("<sex>").append(p.getSex()).append("</sex>");
xml.append("<salary>").append(p.getSalary()).append("</salary>");
xml.append("</person>");
}
xml.append("</persons>");
response.getWriter().write(xml.toString());
}
}
注意:(1).post请求,需要添加协议头
(2).response写xml,需要先设置“text/xml;charset=utf-8”;
(3).写xml,需要用StringBuffer,然后用append添加节点,最后需要toString转换为String
(4).html获取xml,需要用responseXML,XML与HTML一样,获取节点可以使用getElementsByTagName