码迷,mamicode.com
首页 > Web开发 > 详细

AJAX学习笔记

时间:2015-09-21 23:58:43      阅读:452      评论:0      收藏:0      [点我收藏+]

标签:

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

}






  

AJAX学习笔记

标签:

原文地址:http://www.cnblogs.com/airycode/p/4827627.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!