Ajax实现自动刷新页面
所有开发环境:
Eclipse4.2
mySQL5.5
Tomcat6.0(先把数据库驱动程序加到tomcat\lib下)
建立的数据库中的表dbname=”person” table=”stuscore”
表如下:
前提先建好数据库person 建表代码:
# Host: localhost (Version: 5.5.20)
# Date: 2012-10-16 07:04:12
# Generator: MySQL-Front 5.2 (Build 3.32)
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE */;
/*!40101 SET SQL_MODE='STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION' */; /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES */;
/*!40103 SET SQL_NOTES='ON' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS */;
/*!40014 SET FOREIGN_KEY_CHECKS=0 */;
#
# Source for table "stuscore"
#
DROP TABLE IF EXISTS `stuscore`;
CREATE TABLE `stuscore` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`grade` varchar(255) DEFAULT NULL,
`score` varchar(255) DEFAULT NULL,
`state` int(255) DEFAULT NULL,
PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
#
# Data for table "stuscore"
#
/*!40000 ALTER TABLE `stuscore` DISABLE KEYS */;
INSERT INTO `stuscore` VALUES (1,'杜淳','200401','94.50000',1),(2,'马苏','200401','96.70000',1),(3,'李晨','200401','95.40000',1),(4,'立方','200402','89.70000',1);
/*!40000 ALTER TABLE `stuscore` ENABLE KEYS */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
本次工程结构如下:
其中AutoRefresh.jsp的代码如下:
<%@page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
"https://www.360docs.net/doc/9615389536.html,/TR/html4/loose.dtd">
var XMLHttpReq;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpReq=new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
XMLHttpReq=new
ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
XMLHttpReq=new
ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
}
function sendRequest(){
createXMLHttpRequest();
var url="auto";
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange=processResponse;
XMLHttpReq.send(null);
}
function processResponse(){
if(XMLHttpReq.readyState==4){
if(XMLHttpReq.status==200){
DisplayHot();
setTimeout("sendRequest()",1000);
}
else{
window.alert("您所请求的页面有异常");
}
}
}
function DisplayHot(){
var
num=XMLHttpReq.responseXML.getElementsByTagName( "num")[0].firstChild.nodeValue;
document.getElementById("name").innerHTML="你的新信息数目为";
document.getElementById("num").innerHTML=num;
}
消息提示 |
建立servlet程序:
AutoRefreshAction.java代码:
package com.cong;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//import org.apache.tomcat.dbcp.dbcp.ConnectionFactory;
/**
* Servlet implementation class AutoRefreshAction
*/
public class AutoRefreshAction extends HttpServlet { private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AutoRefreshAction() {
super();
// TODO Auto-generated constructor stub }
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out=response.getWriter();
out.println("
ConnectionFactory factory=new ConnectionFactory();
Connection con=factory.getConnection();
Statement st=null;
ResultSet rs=null;
String strSql=null;
strSql="select count(*) from stuscore where state=0 order by id desc";
try{
st=con.createStatement();
rs=st.executeQuery(strSql);
if(rs.next()){
out.println("
}
}catch(SQLException e){
e.printStackTrace();
}
out.println("");
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
ConnectionFactory.java代码:
package com.cong;
import java.sql.Connection;
import java.sql.DriverManager;
public class ConnectionFactory {
public final static String
url="jdbc:mysql://localhost:3306/person";
public final static String user="root";
public final static String password="congli"; Connection getConnection(){
try{
Class.forName("com.mysql.jdbc.Driver");
return (Connection) DriverManager.getConnection(url,user,password);
}
catch(Exception e){
e.printStackTrace();
}
return null;
}
}
Web.xml文件代码:
xmlns:xsi="https://www.360docs.net/doc/9615389536.html,/2001/XMLSchema-instance" xmlns="https://www.360docs.net/doc/9615389536.html,/xml/ns/javaee" xmlns:web="https://www.360docs.net/doc/9615389536.html,/xml/ns/javaee/web-app_2_ 5.xsd" xsi:schemaLocation="https://www.360docs.net/doc/9615389536.html,/xml/ns/javaee https://www.360docs.net/doc/9615389536.html,/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID"version="2.5">
运行结果:
然后你在数据库更改state的值变为零,就会看到结果: