Ajax的常用技巧(3)---实现自动刷新页面.
来源:互联网 发布:机器人算法和plc程序 编辑:程序博客网 时间:2024/04/20 08:02
网页自动刷新功能在web网站上已经屡见不鲜了,如即时新闻信息,股票信息等,都需要不断获取最新信息。在传统的web实现方式中,想要实现类似的效果,必须进行整个页面的刷新,在网络速度受到一定限制的情况下,这种因为一个局部变动而牵动整个页面的处理方式显得有些得不偿失。Ajax技术的出现很好的解决了这个问题,利用Ajax技术可以实现网页的局部刷新,只更新指定的数据,并不更新其他的数据。
现在创建一个实例,以演示网页的自动刷新功能,该实例模拟火车侯票大厅的显示字幕。
1,服务器端代码
该实例服务器端代码的功能比较简单,即产生一个随机数,并以XML文件形式返回给客户端。打开记事本,输入下列代码:
<%@ page contentType="text/html; charset=gb2312" %><%response.setContentType("text/xml; charset=UTF-8");//设置输出信息的格式及字符集response.setHeader("Cache-Control","no-cache");out.println("<response>"); for(int i=0;i<2;i++){ out.println("<name>"+(int)(Math.random()*10)+"</name>"); out.println("<count>" +(int)(Math.random()*100)+ "</count>");}out.println("</response>");out.close();%>
保存上述代码,名称为auto.jsp。在该文件中,使用java.lang包中的Math类,产生一个随机数。
2,客户端代码
本实例客户端代码主要利用服务器端返回的数字,指定显示样式。打开记事本,输入下列代码:
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%><head><META http-equiv=Content-Type content="text/html; charset=gb2312"></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 = "auto.jsp"; 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 name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue; var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue; document.getElementById("cheh").innerHTML = "T-"+name+"次列车"; document.getElementById("price").innerHTML = count+"元"; }</script> <body onload =sendRequest()><table style="BORDER-COLLAPSE: collapse" borderColor=#5555555 cellSpacing=0 cellPadding=0 width=200 border=0><TR> <TD align=middle bgColor=#abc2d0 height=19 colspan="2"><B>开往北京的列车</B> </TD></TR><tr> <td height="20"> 车号:</td> <td height="20" id="cheh"> </td></tr><tr> <td height="20"> 价格:</td> <td height="20" id="price"> </td></tr></table> </body>
将上述代码保存,名称为autoRefresh.jsp。在该文件中,createXMLHttpRequest()函数用于创建异步调用对象;sendRequest()函数用于发送请求到客户端;processResponse()函数用于处理服务器端的响应,在处理过程中调用DisplayHot()函数设定数据的显示样式。其中,setTimeout(“sendRequest()”,1000)函数的含义为每隔1秒的时间调用sendRequest()函数,该函数在Ajax页面刷新中起了一个主导作用。DisplayHot()函数主要用于从服务器端返回的XML文件进行解析,并获取返回数据,显示在当前页面。
- Ajax的常用技巧(3)---实现自动刷新页面.
- Ajax的常用技巧(6)---实现web页面局部动态刷新
- Ajax的常用技巧(6)---实现web页面局部动态刷新
- php+ajax实现页面自动刷新时间
- struts2+ajax实现页面自动刷新。
- AJAX 自动刷新页面
- struts2-ajax-页面的自动刷新
- Ajax的常用技巧(2)---实现Web页面中的级联菜单
- Ajax - 创建自动刷新页面
- Ajax创建自动刷新页面
- ajax+jsp提取数据库记录并实现自动刷新页面
- ajax+jsp提取数据库记录并实现自动刷新页面
- 利用ajax实现页面的局部刷新
- 实现类似于ajax的页面无刷新
- 利用ajax实现页面的无刷新
- 页面实现自动刷新
- 实现页面自动刷新
- 网页页面实现自动刷新的3种代码
- mre下的控件实现(四、Button使用)
- 常用被引用文献 MIRA CRF
- 关于JAVA 和IOS 的十进制转十六进制
- 基于centos 的Lamp环境搭建
- linux基础之虚拟机ubuntu为什么不能上网?
- Ajax的常用技巧(3)---实现自动刷新页面.
- 详细透彻的分析DM9000网卡驱动程序(4)---我是苦行僧
- 采用MATLAB的DSP调试方法
- MFC消息机制与虚函数的结合
- 同步和异步与阻塞和非阻塞
- 几种java for循环写法介绍
- Ajax的常用技巧(4)---实现数据库分页
- 六步实现Rest风格的API
- HDU 1330 Deck