Ajax重构

最新推荐文章于 2019-12-15 10:28:35 发布

hyty

最新推荐文章于 2019-12-15 10:28:35 发布

阅读量272

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/qq_38341596/article/details/82780436

版权

java 专栏收录该内容

120 篇文章 8 订阅

订阅专栏

应用Ajax重构实现实时显示公告信息

AjaxRequest.js

var net = new Object(); // 定义一个全局变量net
// 编写构造函数
net.AjaxRequest = function(url, onload, onerror, method, params) {
	this.req = null;
	this.onload = onload;
	this.onerror = (onerror) ? onerror : this.defaultError;
	this.loadDate(url, method, params);
}
// 编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate = function(url, method, params) {
	if (!method) {
		method = "GET";
	}
	if (window.XMLHttpRequest) {
		this.req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		this.req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (this.req) {
		try {
			var loader = this;
			this.req.onreadystatechange = function() {
				net.AjaxRequest.onReadyState.call(loader);
			}
			this.req.open(method, url, true);// 建立对服务器的调用
			if (method == "POST") {// 如果提交方式为POST
				this.req.setRequestHeader("Content-Type",
						"application/x-www-form-urlencoded"); // 设置请求头
			}
			this.req.send(params); // 发送请求
		} catch (err) {
			this.onerror.call(this);
		}
	}
}

// 重构回调函数
net.AjaxRequest.onReadyState = function() {
	var req = this.req;
	var ready = req.readyState;
	if (ready == 4) {// 请求完成
		if (req.status == 200) {// 请求成功
			this.onload.call(this);
		} else {
			this.onerror.call(this);
		}
	}
}
// 重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError = function() {
	alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}

index.jsp

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<script language="javascript" src="AjaxRequest.js"></script>
<script language="javascript">
/******************错误处理的方法*******************************/
function onerror(){
	alert("您的操作有误！");
}
/******************实例化Ajax对象的方法*******************************/
function getInfo(){
	var loader=new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");
}
/************************回调函数**************************************/
function deal_getInfo(){
	document.getElementById("showInfo").innerHTML=this.req.responseText;
}
window.onload=function(){
	getInfo();	//调用getInfo()方法获取公告信息
	window.setInterval("getInfo()", 600000);	//每隔10分钟调用一次getInfo()方法
}
</script>

<title>实时显示公告信息</title>
</head>
<body>
<div style="border: 1px solid;height: 50px; width:200px;padding: 5px;">
	<marquee direction="up" scrollamount="3">
		<div id="showInfo"></div>
	</marquee>
</div>
</body>
</html>

getInfo.jsp

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@ page import="java.sql.*" %>
<jsp:useBean id="conn" class="com.wgh.tools.ConnDB" scope="page"></jsp:useBean>
<ul>
<%
ResultSet rs=conn.executeQuery("SELECT name FROM tb_product ORDER BY id DESC");	//获取公告信息
if(rs.next()){
	do{
		out.print("<li>"+rs.getString(1)+"</li>");
	}while(rs.next());
}else{
	out.print("<li>暂无公告信息！</li>");
}
%>
</ul>

连接数据库：con.wgh.tools.ConnDb.java

package com.wgh.tools;

import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

public class ConnDB {

	public Connection conn = null;
	public Statement stmt = null;
	public ResultSet rs = null;
	
	private static String propFileName = "connDB.properties";	//指定资源文件保存的位置
	private static Properties prop = new Properties();
	private static String dbClassName;
	private static String dbUrl;
	
	public ConnDB() {
		
		try {
			InputStream in = getClass().getResourceAsStream(propFileName);
			prop.load(in);
			dbClassName = prop.getProperty("DB_CLASS_NAME");
			dbUrl = prop.getProperty("DB_URL", dbUrl);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	public static Connection getConnection() {
		Connection conn = null;
		try {
			Class.forName(dbClassName).newInstance();
			conn = DriverManager.getConnection(dbUrl);
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
		
		if(conn == null) {
			System.out.println("警告：DbConnectionManager.getConnection()获得数据库连接失败。\r\n连接类型："
					+dbClassName+"\r\n连接位置："+dbUrl);
		}
		return conn;
	}
	
	/*
	ResultSet.TYPE_SCROLL_INSENSITIVE:	允许记录指针向前或向后移动，且当ResultSet对象变动记录指针是，会影响记录指针的位置
	ResultSet.CONCUR_READ_ONLY：ResultSet对象仅能读取，不能修改
	 * */
	
	public ResultSet executeQuery(String sql) {
		try {
			conn = getConnection();
			stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
			rs = stmt.executeQuery(sql);
		} catch (SQLException e) {
			// TODO: handle exception
			System.out.println(e.getMessage());	//输出异常信息
		}
		return rs;
	}
	
	public int executeUpdate(String sql) {
		int result = 0;
		try {
			conn = getConnection();
			stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
			result = stmt.executeUpdate(sql);
		} catch (SQLException e) {
			// TODO: handle exception
			result = 0;
		}
		return result;
	}
	
	public void close() {
		try {
			if(rs != null) {
				rs.close();
			}
			if (stmt != null) {
				stmt.close();
			}
			if(conn != null) {
				conn.close();
			}
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace(System.err);
		}
	}
	
}

配置文件：connDB.properties


DBType=1

DB_CLASS_NAME=com.mysql.jdbc.Driver


DB_URL=jdbc:mysql://127.0.0.1:3306/test?user=root&password=root&useUnicode=true

hyty

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录