您的位置：首页 > Web前端 > JavaScript

利用json和ajax模拟获取最新资讯

2015-12-01 11:58 796 查看

利用json和ajax模拟获取最新资讯

程序运行结果截图：

分析：每3秒利用ajax异步刷新更新表格的内容，利用json技术进行客户端与服务器的数据交换。

具体步骤及源码如下：

用到的json的jar包：

用到的处理json对象的js框架：

服务端代码：

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;

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

import net.sf.json.JSONArray;
import bean.Emp;

public class EmpServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();

String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));

if("/emp".equals(action)){
//模拟获取最新资讯
List<Emp> empList = new ArrayList<Emp>();
Random r = new Random();
for(int i=0;i<8;i++){
Emp e = new Emp();
e.setName("张三"+r.nextInt(20));
e.setAge(10+r.nextInt(40));
e.setFlag((r.nextInt(40)%2==0?true:false));
empList.add(e);
}
JSONArray arr = JSONArray.fromObject(empList);
String jsonStr = arr.toString();
//System.out.println(jsonStr);
//将json对象发送到客户端
out.println(jsonStr);

}
out.close();
}

}

视图界面代码：emp.jsp

<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
<html>
<head>
<style type="text/css">
#d1{
width:400px;
height:300px;
border:1px solid #ccc;
background-color:#fff8ac;
}
#d2{
font-size:20px;
text-align:center;
}
</style>
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
function f1(){
//3s异步访问一次数据库，获取最新资讯
setInterval(empf,3000);
}
function empf(){
var xhr = getXhr();
xhr.open('get','emp.do',true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
//alert(txt);
//将json字符串转成javascript对象组成的数组
var arr = txt.evalJSON();
//alert(arr);
var html = "";
for(var i=0;i<arr.length;i++){
html += "<tr><td>"+arr[i].name
+"</td><td>"+arr[i].age
+"</td><td>"+arr[i].flag
+"</td></tr>";
}
$('tb1').innerHTML = html;
}
};
xhr.send(null);
}
</script>
</head>
<body onload="f1();">
<div id="d1">
<div id="d2">最新入职员工信息</div>
<div id="d3">
<table border="1px">
<thead><tr><td>姓名</td><td>年龄</td><td>是否毕业</td></tr></thead>
<tbody id="tb1"></tbody>
</table>
</div>
</div>
</body>
</html>

注：

prototype是一个js文件，里面提供了很多常用的函数，比如：

a,$(id) -- document.getElementById(id);

b,$F(id) -- $(id).value;

c,$(id1,id2,id3...) -- 分别依据id1,id2...查找对应的节点，然后放到一个数组里面返回。

d,strip() -- 去掉字符串两端的空格。

e,evalJSON() -- 将json字符串转换成对应的javascript对象或者javascript对象组成的数组。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航