通过 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. 虚拟机下运行linux通过nat模式与主机通信、与外网连接

    首先:打开虚拟机的编辑菜单下的虚拟网络编辑器,选中VMnet8 NAT模式.通过NAT设置获取网关IP,通过DHCP获取可配置的IP区间.同时,将虚拟机的虚拟机菜单的设置选项中的网络适配器改为NAT模 ...

  2. php升级5.3到5.4，5.5，5.6

    Laravel要求php大于5.5.9,升级php5.3.3到5.6.14(最新版为 5.6.15 ) Add EPEL and Remi repositories onto your system: ...

  3. OutOfMemoryError异常穷举

    本文内容的目的有两个:第一,通过代码验证Java虚拟机规范中描述的各个运行时区域存储的内容:第二,在工作中遇到实际的内存溢出异常时,能根据异常的信息快速判断是哪个区域的内存溢出,知道什么样的代码可能会 ...

  4. ARP侦查工具Netdiscover

    ARP侦查工具Netdiscover Netdiscover是一个主动/被动的ARP侦查工具.该工具在不使用DHCP的无线网络上非常有用.使用Netdiscover工具可以在网络上扫描IP地址,ARP ...

  5. 介绍开发Android手持终端PDA盘点APP软件

    介绍开发Android手持终端PDA盘点APP软件 软件需要自动识别我导入的TXT格式或者excl格式的盘点表,然后自动生成一个复盘数据,做AB比对,界面上需要显示的有总数量,单品数量,条码,编码,商 ...

  6. ZOJ2587 Unique Attack（判定最小割唯一性）

    看了题解,自己大概想了下. 最小割唯一的充分必要条件是残量网络中所有点要嘛能从源点floodfill到要嘛能floodfill到汇点. 必要性,这是当然的,因为假设从源点floodfill或者从汇点反 ...

  7. WPF之DataContext

    1. 继承属性: DataContext is a property on FrameworkElement (base class for all WPF Controls) and is impl ...

  8. 不容易系列之二[HDU2042]

    不容易系列之二 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  9. Xcode 编辑时的爆炸效果

    Xcode 的爆炸效果 1.打开终端输入 $mkdir -p ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins;$curl ...

  10. asp.net 微信企业号办公系统-流程设计--流程步骤设置-策略设置

    策略设置包括当前步骤的流转方式,处理人员,退回策略等设置. 流转类型:当前步骤后面有多个步骤时,此类型选择可以决定后续步骤的发送方式. 1.系统控制:由系统根据您在线上设置的流转条件来判断该发送到哪一 ...