使用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")[0].firstChild.nodeValue;

var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;

document.getElementById("product").innerHTML = name;

document.getElementById("count").innerHTML = count;

}

</script>

</SCRIPT>

<body onload =sendRequest()>

<table  style="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 block

e1.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 Transfer

Source Host     : localhost:3306

Source Database : refresh

Target Host     : localhost:3306

Target Database : refresh

Date: 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', '梦里花落值多少');

赶快更换数据，看看页面效果吧