通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

实验中利用JSP+ajax来实现自动刷新页面,并读/写数据库中的数据。

下面介绍一下利用JSP+ajax来实现局部页面刷新的小例子:

处理ajax请求的jsp文件:ajax.jsp

    <%@ 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();
%>

发送ajax请求的jsp文件:zx.jsp

    <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 = "ajax.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("product").innerHTML = name;
document.getElementById("count").innerHTML = count;
} </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 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>
</body>
</table>

效果如下(页面上的值自动变化):

ajax+jsp自动刷新的更多相关文章

  1. JSP-Runoob:JSP 自动刷新

    ylbtech-JSP-Runoob:JSP 自动刷新 1.返回顶部 1. JSP 自动刷新 想象一下,如果要直播比赛的比分,或股票市场的实时状态,或当前的外汇配给,该怎么实现呢?显然,要实现这种实时 ...

  2. JSP 自动刷新

    JSP 自动刷新 想象一下,如果要直播比赛的比分,或股票市场的实时状态,或当前的外汇配给,该怎么实现呢?显然,要实现这种实时功能,您就不得不规律性地刷新页面.JSP提供了一种机制来使这种工作变得简单, ...

  3. 用Ajax实现自动刷新news功能

    这是Ajax应用的一个小实例:在页面中自动刷新功能,比如整个新闻页面中某一个小版块的内容,无需刷新整个页面就可以自动更新: 1.首先创建简单的页面元素: <body> <input ...

  4. jsp自动刷新(转)

    1.页面自动刷新:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中 ...

  5. ajax请求自动刷新页面

    ajax是异步请求技术,可以实现页面的局部刷新.但是今天写代码的时候发现每次ajax之后都会发生整个页面的刷新,最后发现这是因为触发ajax事件的input标签的type设置为了submit,所以会产 ...

  6. JSP学习笔记(五):日期处理、页面重定向、点击量统计、自动刷新和发送邮件

    一.JSP 日期处理: 使用JSP最重要的优势之一,就是可以使用所有Java  API.本节讲述Java中的Date类,它在java.util包下,封装了当前日期和时间. Date类有两个构造函数.第 ...

  7. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  8. JSP页面自动刷新

    1.页面自动刷新:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中 ...

  9. JSP中自动刷新

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/auto-refresh.html: 细想一个显示在线比赛分数.股市状态或当前交易额的网页.对于所有这种类 ...

随机推荐

  1. 小甲鱼PE详解之输入表(导入表)详解2(PE详解08)

    在此之前,我们已经对这个输入表进行了一些实践和理解,这有助于大家对这个概念更进一步的加深认识.小甲鱼觉得,越是复杂的问题我们应该越是去动手操作它,认识它,这样才容易熟悉它! 在上一节课我们像小鹿一样的 ...

  2. node.js打开浏览器

    通过nodejs的child_process识别环境, 用不同的CLI打开默认浏览器: var child_process = require("child_process"); ...

  3. 【分享送书】NGUI全面实践教程V3.8.2 活动开始了!!

    [分享送书]NGUI全面实践教程V3.8.2 活动开始了!! 活动奖品:   活动地址:http://dwz.cn/JHdlu

  4. 安卓智能手持POS打印票据 扫描盘点移动开单软件/无线开单系统/PDA移动开单软件

    移动开单手持机,它通过WIFI或者GPRS连接并访问电脑数据,实现移动扫描开单,数据同步上传等功能.方便.实用,大大提高工作效率!安卓智能手持POS是一套适合大酒店.咖啡馆..洗衣店.按摩洗浴,商场等 ...

  5. Chart系列(二):数据绑定

    1.绑定到OleDbDataReader: // Define the database query string mySelectQuery="SELECT Name, Sales FRO ...

  6. android 蓝牙设备监听广播

    蓝牙权限 <uses-permission android:name="android.permission.BLUETOOTH" /> 1.监听手机本身蓝牙状态的广播 ...

  7. 【转】STL之二分查找 (Binary search in STL)

    Section I正确区分不同的查找算法count,find,binary_search,lower_bound,upper_bound,equal_range 本文是对Effective STL第4 ...

  8. BZOJ1525 : [POI2006]Zos

    由于k很小,所以随机一组解的正确率有90%以上. 每次随机选取一个没被删除的点,然后将与其相邻的点都删去即可. #include<cstdio> #include<cstdlib&g ...

  9. TYVJ P1020 导弹拦截 Label:水

    题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...

  10. Centos GPG key retrieval failed: [Errno 14] Could not open/read file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL

    warning: rpmts_HdrFromFdno: Header V3 RSA/SHA256 Signature, key ID 0608b895: NOKEYRetrieving key fro ...