使用AJAX实现动态刷新页面功能
Ajax就是很牛，无需手工点击刷新，只要在返回处理函数中设置定时器连续调用某一函数输出到页面，动态效果立即出来！贴上代码，先睹为快
refresh.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %><head><META http-equiv=Content-Type content="text/html; charset=UTF-8"></head><script language="javascript"> var XMLHttpReq; //创建XMLHttpRequest对象 function createXMLHttpRequest() { if(window.XMLHttpRequest) { //Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE浏览器 try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }}}}//发送请求函数function sendRequest() {createXMLHttpRequest();var url = "refresh.do";XMLHttpReq.open("POST", 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 name = XMLHttpReq.responseXML.getElementsByTagName("name").firstChild.nodeValue;var count = XMLHttpReq.responseXML.getElementsByTagName("count").firstChild.nodeValue;document.getElementById("product").innerHTML = name;document.getElementById("count").innerHTML = count;}</script></SCRIPT><body onload =sendRequest()><tablestyle="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0> <TR> <TD align=middle height=4 colspan="2"><IMG height=4 src="images/promo_list_top.gif" width="100%" border=0> </TD> </TR> <TR> <TD align=middle bgColor=#dbc2b0 height=19 colspan="2"><B>正在热卖的笔记本</B> </TD> </TR> <tr> <td height="20"> 型号： </td> <td height="20" id="product"> </td> </tr> <tr> <td height="20"> 销售数量： </td> <td height="20" id="count"> </td> </tr></table></body> </html>
处理请求的RefreshServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 设置输出信息的格式及字符集response.setContentType("text/xml; charset=UTF-8");response.setHeader("Cache-Control", "no-cache");// 创建输出流对象PrintWriter out = response.getWriter();// 依据验证结果输出不同的数据信息out.println("<response>");// 数据库操作// 第一步：加载MySQL的JDBC的驱动try {Class.forName("com.mysql.jdbc.Driver");} catch (ClassNotFoundException e1) {// TODO Auto-generated catch blocke1.printStackTrace();}// 取得连接的url,能访问MySQL数据库的用户名,密码；studentinfo：数据库名String url = "jdbc:mysql://localhost:3306/refresh";String username = "root";String password = "root";// 第二步：创建与MySQL数据库的连接类的实例Connection con = null;String strSql = "select name,salecount from product order by salecount desc";ResultSet rs = null;// 查询热卖产品try {con = DriverManager.getConnection(url, username, password);Statement st = con.createStatement();rs = st.executeQuery(strSql);if (rs.next()) {out.println("<name>" + rs.getString("name") + "</name>");out.println("<count>" + rs.getString("salecount") + "</count>");}} catch (SQLException e) {e.printStackTrace();}out.println("</response>");out.close();}
数据库脚本
/*Navicat MySQL Data TransferSource Host : localhost:3306Source Database : refreshTarget Host : localhost:3306Target Database : refreshDate: 2010-04-10 15:24:15*/SET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for product-- ----------------------------DROP TABLE IF EXISTS `product`;CREATE TABLE `product` (`id` int(11) NOT NULL DEFAULT '0',`salecount` varchar(255) DEFAULT NULL,`name` varchar(255) DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ------------------------------ Records of product-- ----------------------------INSERT INTO `product` VALUES ('0', '100', '梦里花落值多少');
页:
[1]