Ajax局部页面刷新

ajax自动刷新局部页面

通过 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>   

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

时间: 2024-11-05 02:17:22

Ajax局部页面刷新的相关文章

C#实时读取数据----局部页面刷新【转】

I)现在刚开始学习C#,对一些基本的控件了解的不够,有个实时监控的系统,需要页面中的数据每5秒钟刷新一次, 要是每5秒钟页面全部的刷新,那页面根本就没法看了,对这个问题在CSDN上也专门开了帖子,问了各位高手了, 帖子:http://topic.csdn.net/u/20100109/23/812355fb-32ce-4e3b-98ec-be80c630e1d5.html II)实现的基本思路: 用微软的AJAX轻易可实现!! 1.拖入ScriptManager; 2.拖入UpdatePanel

jquery ajax 局部table 刷新技术

点击查询: 下面先上html页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="descr

页面刷新 整个页面刷新和局部刷新

整个页面刷新 1.页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20"> 其中20指每隔20秒刷新一次页面. 2.页面自动跳转:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20;url=“#"> 其中20指隔20秒后跳转到#页面 3.页面自动刷新

ajax+jsp自动刷新

通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据. AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面. 实验中利用JSP+ajax来实现自动刷新页面,并读/写数据库中的数据. 下面介绍一下利用JSP+ajax来实现局部页面刷新的小例子: 处理ajax请求

jQuery实现AJAX定时刷新局部页面实例

本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西, 但是都不太实用,最实用的方法还是ajax加载数据了. 方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了. 例子,定时局部刷新 定时局部刷新用到jQuery里面的setInterval方法,setInte

再谈ajax局部刷新

前言:所谓"学而不思则罔.思而不学则殆",孔夫子说话就是有深意.之前我就发表了一篇极致ajax局部和整体刷新,同时又发表了jfinal与bootstrap的登录跳转实战.jfinal与bootstrap的登出实战,但是经过近来的实战和改进,发现上一次的做法并不优秀,用起来很笨拙,不顺手,而这一次的方案,恰好就解决了这个问题. 案例: 描述: 1. 点击登录则弹出登录对话框 2. 如果用户名密码不正确,则提示错误信息 3. 当输入信息正确,则刷新登录信息,显示用户名和退出按钮 4. 点击

【Jquery】jquery刷新页面(局部及全页面刷新)

局部刷新: 这个方法就多了去了,常见的有以下几种: $.get方法,$.post方法,$.getJson方法,$.ajax方法如下 前两种使用方法基本上一样 $.get("Default.php", {id:"1″, page: "2″ },function(data){//这里是回调方法.返回data数据.这里想怎么处理就怎么处理了.}); $.getScript方法: $.getScript("http://jqueryajax.com/jquery.

jquery刷新页面的实现代码(局部及全页面刷新)

局部刷新: 这个方法就多了去了,常见的有以下几种: $.get方法,$.post方法,$.getJson方法,$.ajax方法如下 前两种使用方法基本上一样 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.location.reload()刷新父窗口对象(用于单开窗口) top.location.reload()刷新最顶端对象(用于多开窗口)

[转]jquery刷新页面(局部及全页面刷新)

局部刷新: 这个方法就多了去了,常见的有以下几种: $.get方法,$.post方法,$.getJson方法,$.ajax方法如下 前两种使用方法基本上一样 $.get("Default.php", {id:"1″, page: "2″ }, function(data){ //这里是回调方法.返回data数据.这里想怎么处理就怎么处理了. }); $.getScript方法: $.getScript("http://jqueryajax.com/jque