說明：本案例是在瀏覽器中局部刷新對象people的age屬性的值
1.首先創建一個People類
package com.jsf.demo1;
public class People {
private String name;
private int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public People(String name, int age) {
super();
this.name = name;
this.age = age;
}
}
2.創建一個處理請求的servlet
package com.jsf.demo1;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.Serializable;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.collections.map.HashedMap;
/**
* Servlet implementation class GetPeopleInf
*/
public class GetPeopleInf extends HttpServlet implements Serializable {
private static final long serialVersionUID = 1L;
private HashMap<String, People> peoples;
/*處理請求
* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#service(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
@Override
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=gbk");
// 改變age的值
int a = (int) (Math.random() * 100);
People p2 = peoples.get("tom");
p2.setAge(a);
StringBuilder builder = new StringBuilder();
//將數據封裝成javascript能處理的json型數據
builder.append("(").append("{").append("\"").append("name\"").append(":\"").append(
p2.getName()).append("\"").append(",\"").append("age\"").append(":\"").append(
p2.getAge()).append("\"").append("}").append(")");
PrintWriter out = response.getWriter();
out.print(builder);
}
/*
* 初始化數據
* (non-Javadoc)
* @see javax.servlet.GenericServlet#init()
*/
@Override
public void init() throws ServletException {
People p = new People("tom", 20);
peoples = new HashMap<String, People>();
peoples.put(p.getName(), p);
}
}
3.配置web.xml配置文件
<servlet>
<description></description>
<display-name>GetPeopleInf</display-name>
<servlet-name>GetPeopleInf</servlet-name>
<servlet-class>com.jsf.demo1.GetPeopleInf</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetPeopleInf</servlet-name>
<url-pattern>/GetPeopleInf</url-pattern>
</servlet-mapping>
4.寫testpeople.js文件（他和jquery.js同時放在WebContent-->js中）
$(document).ready(function(){
getInf();
//每1秒取一次
setInterval(getInf, 1000);
});
function getInf() {
//向服務器獲取數據
$.get("GetPeopleInf", null, function(date){
var obj = eval(date);
var name = obj["name"];
// alert( name);
//將取得的數據賦給相應的div
$("#name").html(name);
$("#age").html(obj["age"]);
});
}
5.寫test.jsp頁面
<script language="javascript" type="text/javascript"
src="js/testpeople.js"></script>
<title>Insert title here</title>
</head>
<body>
姓名：
<div id="name"></div>
年齡：
<div id="age"></div>
6.結果顯示
姓名：