利用json和ajax模拟获取最新资讯
发布日期:2021-07-30 08:22:55 浏览次数:20 分类:技术文章

利用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 οnlοad="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对象组成的数组。





上一篇:json语法
下一篇:ajax的优点