应用AJAX实现动态刷新页面功能
日期：2014-05-16 浏览次数：20588 次
使用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";
Result
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
