通过 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+Js局部刷新的更多相关文章

  1. Ajax 异步局部刷新

    Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...

  2. asp.net mvc3 利用Ajax实现局部刷新

    1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...

  3. jQuery+ajax实现局部刷新

    在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其他高级方法的使用以后再做详细笔记. 第一种: 当某几个页面 ...

  4. C# 利用ajax实现局部刷新

    C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...

  5. Ajax定时局部刷新

    1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...

  6. [转载].NET ASP.NET 中web窗体（.aspx）利用ajax实现局部刷新

    之前开发的一套系统中用到了大量的 checkboxList 控件,但是每次选定之后都会刷新整个页面,用户体验很差,百度了之后查到这篇文章,尝试了一下可以实现,所以转载了过来,记录一下,也给其他有相同困 ...

  7. js(三) ajax异步局部刷新技术底层代码实现

    ajax 异步 javaScript and xml 开发五步骤: 1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery 2. 找到连接, http的 ...

  8. ajax实现局部刷新

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. 使用php后台给自己做一个页面路由，配合ajax实现局部刷新。

    今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载 ...

随机推荐

  1. underscore.js 源码分析5 基础函数和each函数的使用

    isArrayLike 检测是数组对象还是纯数组 var property = function(key) { return function(obj) { return obj == null ? ...

  2. mybatis mapper空指针异常的问题

    发现是因为mysql表名不能为  x_x_x 这样的形式,最多只能有一个下划线,不能有多个,否则会找不到数据,进而导致空指针异常 上面的被推翻了,发现原来是因为没有注入mapper才导致空指针异常! ...

  3. 转发——谷歌云官方：一小时掌握深度学习和 TensorFlow

    转发——谷歌云官方:一小时掌握深度学习和 TensorFlow 本文转发自新智元,链接如下: http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==& ...

  4. HIVE中的数据怎么导出到hdfs或本地呢

    思路一:重定向 在我不知道工具 ,也不熟悉HIQL语法的情况下,没办法了,只有选择一个最简单粗暴的方法,重定向. 在shell中使用 hive -e 可以在shell中执行hive命令,hive -f ...

  5. Python Requests库入门——应用实例-京东商品页面爬取+模拟浏览器爬取信息

    京东商品页面爬取 选择了一款荣耀手机的页面(给华为打广告了,荣耀play真心不错) import requests url = "https://item.jd.com/7479912.ht ...

  6. 安装VS的过程

    软件工程学习到第三周,我们需要下载一个新的软件,用来进行软件测试.刚开始知道的时候觉得没甚么,不就是下个软件吗!有什么大不了的,分分钟搞定的事.可是想象很美好,现实很骨感.这是一个巨大的工作量呀,不仅 ...

  7. winform default模式下和英文模式下 修改问题

    1.修改控件大小.位置等属性在default模式下修改: 2.修改控件属性最好不要做鼠标拖动放大,拖动修改位置等,建议用属性栏中的数字来改变.

  8. 字典树---2001 POJ Shortest Prefixes(找最短前缀)

    做的第一道字典树的题,算比较水的: -->>>:传送门 代码: #include <stdio.h> #include<stdlib.h> #define M ...

  9. 周总结<3>

    经过了一周的学习,我们在html以及C语言方面又有的新的知识点的学习,包括计算机导论也学会了路由器的设置. html 鼠标事件 C 二叉树的遍历代码 计算机导论 路由器的设置 Html案例: < ...

  10. 【Linux】- cat命令的源码历史

    转自:Cat 命令的源码历史 以前我和我的一些亲戚争论过计算机科学的学位值不值得读.当时我正在上大学,并要决定是不是该主修计算机.我姨和我表姐觉得我不应该主修计算机.她们承认知道如何编程肯定是很有用且 ...