ajax03基于json的实现

1.创建动态web工程

2.编写person类

package org.itat.zttc.model;


public class Person {
	private int id;
	private String name;
	private double salary;
	private int age;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public double getSalary() {
		return salary;
	}
	public void setSalary(double salary) {
		this.salary = salary;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public Person(int id, String name, double salary, int age) {
		super();
		this.id = id;
		this.name = name;
		this.salary = salary;
		this.age = age;
	}
	
	public Person() {
	}
}

3.编写PersonJsonServlet类，让这个类继承HttpServlet，并重写doget和dopost方法

package org.itat.zttc.ajax;

import java.io.IOException;
import java.io.Writer;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.itat.zttc.model.Person;

public class PersonJsonServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	Map<Integer,List<Person>> persons = new HashMap<Integer,List<Person>>();
    public PersonJsonServlet() {
        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);
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1、要返回json需要设置为text/html，需要为respose设置contentType
		response.setContentType("text/html;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、拼接json
		StringBuffer px = new StringBuffer();
		px.append("[");
		int index = 0;
		for(Person p:ps) {
			if(index==0) {
				px.append("{");
				index++;
			} else {
				px.append(",{");
			}
			px.append("id:").append(p.getId()).append(",");
			px.append("name:\"").append(p.getName()).append("\",");
			px.append("salary:").append(p.getSalary()).append(",");
			px.append("age:").append(p.getAge());
			px.append("}");
		}
		px.append("]");
		//6、通过out写回去
		out.write(px.toString());
	}

}

4.编写web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>ajax01</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
    <description></description>
    <display-name>PersonJsonServlet</display-name>
    <servlet-name>PersonJsonServlet</servlet-name>
    <servlet-class>org.itat.zttc.ajax.PersonJsonServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>PersonJsonServlet</servlet-name>
    <url-pattern>/personJson.do</url-pattern>
  </servlet-mapping>
</web-app>

5.编写personJson.html

<!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","personJson.do",true);
	xhr.onreadystatechange = function() {
		//3、处理请求
		if(xhr.readyState==4&&xhr.status==200) {
			//3.1、获取json
			var json = xhr.responseText;
			//如果传递的是json可以直接通过xhr.responseText获取。
			//3.2、此时json是一个字符串，如果要转换为对象需要使用eval
			var ps = eval(json);
			var node = "";
			for(var i=0;i<ps.length;i++) {
				//json就是已经是个javascirpt的对象了，可以直接使用
				node+=ps[i].id+"--------"+
					  ps[i].name+"--------"+
					  ps[i].salary+"--------"+
					  ps[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 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>

6.尝试访问http://localhost:8080/ajax03/personJson.html