jsp+ajax自动刷新局部页面

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

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

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

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

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

  1. <%@ page contentType="text/html; charset=gb2312" %>

  2. <%

  3. //设置输出信息的格式及字符集

  4. response.setContentType("text/xml; charset=UTF-8");

  5. response.setHeader("Cache-Control","no-cache");

  6. out.println("<response>");

  7. for(int i=0;i<2;i++){

  8. out.println("<name>"+(int)(Math.random()*10)+

  9. "号传感器</name>");

  10. out.println("<count>" +(int)(Math.random()*100)+ "</count>");

  11. }

  12. out.println("</response>");

  13. out.close();

  14. %>

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

  1. <head>

  2. <META http-equiv=Content-Type content="text/html; charset=gb2312">

  3. </head>

  4. <script language="javascript">

  5. var XMLHttpReq;

  6. //创建XMLHttpRequest对象

  7. function createXMLHttpRequest() {

  8. if(window.XMLHttpRequest) { //Mozilla 浏览器

  9. XMLHttpReq = new XMLHttpRequest();

  10. }

  11. else if (window.ActiveXObject) { // IE浏览器

  12. try {

  13. XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

  14. } catch (e) {

  15. try {

  16. XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

  17. } catch (e) {}

  18. }

  19. }

  20. }

  21. //发送请求函数

  22. function sendRequest() {

  23. createXMLHttpRequest();

  24. var url = "ajax.jsp";

  25. XMLHttpReq.open("GET", url, true);

  26. XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

  27. XMLHttpReq.send(null); // 发送请求

  28. }

  29. // 处理返回信息函数

  30. function processResponse() {

  31. if (XMLHttpReq.readyState == 4) { // 判断对象状态

  32. if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息

  33. DisplayHot();

  34. setTimeout("sendRequest()", 1000);

  35. } else { //页面不正常

  36. window.alert("您所请求的页面有异常。");

  37. }

  38. }

  39. }

  40. function DisplayHot() {

  41. var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;

  42. var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;

  43. document.getElementById("product").innerHTML = name;

  44. document.getElementById("count").innerHTML = count;

  45. }

  46. </script>

  47. <body onload =sendRequest()>

  48. <table style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0>

  49. <TR>

  50. <TD align=middle bgColor=#dbc2b0 height=19 colspan="2"><B>无线传感网</B> </TD>

  51. </TR>

  52. <tr>

  53. <td height="20"> 传感器:</td>

  54. <td height="20" id="product"> </td>

  55. </tr>

  56. <tr>

  57. <td height="20">传感器个数:</td>

  58. <td height="20" id="count"> </td>

  59. </tr>

  60. </body>

  61. </table>

相关推荐

  1. jsp+ajax自动刷新局部页面

    2023-12-06 23:56:01       32 阅读
  2. Vue中实现【组件局部刷新】及【页面刷新

    2023-12-06 23:56:01       15 阅读
  3. 利用jQuery实现AJAX定时刷新局部页面实例

    2023-12-06 23:56:01       46 阅读
  4. Python控制Excel自动刷新页面

    2023-12-06 23:56:01       31 阅读
  5. 如何做到页面实时刷新

    2023-12-06 23:56:01       32 阅读
  6. HTML页面定时刷新指南

    2023-12-06 23:56:01       6 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-06 23:56:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-06 23:56:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-06 23:56:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-06 23:56:01       18 阅读

热门阅读

  1. MATLAB 控制系统仿真教程

    2023-12-06 23:56:01       40 阅读
  2. Golang 模块版本管理与语义版本控制详解

    2023-12-06 23:56:01       30 阅读
  3. LeetCode965. Univalued Binary Tree

    2023-12-06 23:56:01       34 阅读
  4. Android 11.0 所有音量默认为最大音量值

    2023-12-06 23:56:01       32 阅读
  5. 第4章 互联网

    2023-12-06 23:56:01       26 阅读