ajax+jsp自动刷新

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

效果如下（页面上的值自动变化）：

转载于:https://www.cnblogs.com/ziq711/p/5328492.html

ajax+jsp自动刷新相关推荐

ajax实现自动刷新页面实例
html部分: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
JSP学习笔记（五）：日期处理、页面重定向、点击量统计、自动刷新和发送邮件...
一.JSP 日期处理: 使用JSP最重要的优势之一,就是可以使用所有Java API.本节讲述Java中的Date类,它在java.util包下,封装了当前日期和时间. Date类有两个构造函数.第 ...
echarts 自动刷新_Echarts自动刷新数据
1.Echarts自动刷新数据 1.Echarts柱状图的正常配置注:声明了 myChart.test这两个都有用官方示例中myChart是声明在 function(ec)里面的 var myCh ...
ajax用户名注册自动刷新,ajax+jsp实现无刷新页面下注册时检测用户名是否已存在...
当前位置:编程学习 > JAVA >> ajax+jsp实现无刷新页面下注册时检测用户名是否已存在如题:ajax+jsp实现无刷新页面下注册时检测用户名是否已存在求大神们赐教 ...
介绍下JSP如何进行自动刷新
JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. 想象一下,如果要直播比赛的比分,或股 ...
ajax局部刷新_web前端入门到实战：实现html页面自动刷新
使用场景: 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 一定时间之后跳转到指定页面(登录注册之类) 前端开发使用伪数据调试html页面( ...
java web ajax异步刷新页面,ajax自动刷新页面有关问题
当前位置:我的异常网» Java Web开发 » ajax自动刷新页面有关问题 ajax自动刷新页面有关问题 www.myexceptions.net 网友分享于:2013-12-19 浏览:21 ...
如何用ajax实现页面自动刷新,Ajax实现页面自动刷新实例解析
Ajax实现页面自动刷新实例解析内容精选换一换用户已创建桶并上传了网站文件.域名后缀目前支持的范围为2~6个英文大小写字母.开启CDN加速后,可配置网站加速.文件下载加速和点播加速.详细应用场景 ...
JSP 页面自动刷新
想象一下,如果要直播比赛的比分,或股票市场的实时状态,或当前的外汇配给,该怎么实现呢?显然,要实现这种实时功能,您就不得不规律性地刷新页面. JSP提供了一种机制来使这种工作变得简单,它能够定时地自动 ...

ajax+jsp自动刷新

ajax+jsp自动刷新相关推荐

最新文章

热门文章