ajax自动刷新
自动刷新，是很多业务常常需要的业务，像证券实时信息、比赛实时信息等等，所以实现自动刷新业务，灰常重要。这里简单的模拟了下比赛信息实时刷新
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 显示结果为：
比分直播
<div style="font-family: Simsun; font-size: medium;">巴塞罗那0:1切尔西曼联4:6巴塞罗那阿森纳5:0皇家马德里曼城4:3皇家马德里AC米兰0:6阿森纳曼联4:6AC米兰曼联1:0AC米兰切尔西4:6曼城曼联1:5巴塞罗那切尔西7:4阿森纳
页:
[1]