ajax异步刷新简单的demo
2012-11-27 18:24
274 查看
说明：本案例是在浏览器中局部刷新对象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.结果显示
姓名：
tom
年龄：
27
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.结果显示
姓名：
tom
年龄：
27
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ajax_简单demo。页面存在textbox1和button1,点击按钮，返回服务器的时间,填写在textbox1中。无刷新整个页面。
- jQuery使用$.ajax进行异步刷新的方法(附demo下载)
- php+jQuery+Ajax简单实现页面异步刷新
- jQuery使用$.ajax进行异步刷新的方法(附demo下载)
- php+jQuery+Ajax简单实现页面异步刷新
- php+JQuery+Ajax简单实现页面异步刷新
- Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo
- php+JQuery+Ajax简单实现页面异步刷新 （转）
- Ajax异步无刷新显示图片
- Ajax异步无刷新对局部数据更新
- Ajax异步刷新分页功能-MySQL
- MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
- AJAX简单demo
- 支持SPS的AjaxHelper 0.4，无刷新WebPart开发从此变得简单
- Java Design Demo -简单的队列-异步多任务队列（java android）
- ajax无刷新分页的简单实现
- AJAX无痕刷新页面及同步与异步区别
- JQuery的Ajax请求实现局部刷新的简单实例
- ajax无翻页刷新简单实例2
- AJAX实现异步刷新