`
haoran_10
  • 浏览: 436891 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ajax自动刷新

    博客分类：
  • java
ajaxjquery 
阅读更多

自动刷新，是很多业务常常需要的业务，像证券实时信息、比赛实时信息等等，所以实现自动刷新业务，灰常重要。

这里简单的模拟了下比赛信息实时刷新

1.index.jsp主要信息显示在这个页面上

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
	<head>
		<title>实时更新比分查看</title>
		<script type="text/javascript" src="jslib/jquery.js"></script>
		<script type="text/javascript" src="jslib/update.js"></script>
	</head>
	<body>
		比分直播
		<div id="info">
		</div>
	</body>
</html>

 

2.update.js  ajax处理更新数据并显示在页面上

 

$(document).ready(bifen);
function bifen(){
	jQuery.get("servlet/InfoServlet", {date:new Date()}, callback, "xml");	
	setInterval(bifen, 1000);//设置回调函数，1000毫秒回调一次
}
function callback(xml){
	var info = $("#info");
	var html = "<table>";
	var childNode = $(xml).find("childNode").each(function(){
		var host = $(this).find("getHost").text();
		var hostNum = $(this).find("getHostNum").text();
		var guest = $(this).find("getGuest").text();
		var guestNum = $(this).find("getGuestNum").text();
		html = html+"<tr>"+"<td>"+host+"<td>"+hostNum+":"+"<td>"+guestNum+"<td>"+guest;
	});
	info.html(html);
}

 

 3.后台不在写出，这里给一个sql数据的截图:

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ROOT SYSTEM "q.dtd">
<ROOT xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <row>
      <field name="id">1</field>
      <field name="host">曼联</field>
      <field name="hostNum">0</field>
      <field name="guest">皇家马德里</field>
      <field name="guestNum">4</field>
      <field name="nowTime">1331613867214</field>
    </row>
    <row>
      <field name="id">2</field>
      <field name="host">利物浦</field>
      <field name="hostNum">0</field>
      <field name="guest">皇家马德里</field>
      <field name="guestNum">0</field>
      <field name="nowTime">1331613867235</field>
    </row>
   ......

 

 

 

4 显示结果为：

比分直播

巴塞罗那 0: 1 切尔西
曼联 4: 6 巴塞罗那
阿森纳 5: 0 皇家马德里
曼城 4: 3 皇家马德里
AC米兰 0: 6 阿森纳
曼联 4: 6 AC米兰
曼联 1: 0 AC米兰
切尔西 4: 6 曼城
曼联 1: 5 巴塞罗那
切尔西 7: 4 阿森纳

 

 

分享到：
| dom4j对xml文件的基本操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics