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>

相关推荐
皮皮林5515 小时前
IDEA 源码阅读利器,你居然还不会?
java·intellij idea
卡尔特斯9 小时前
Android Kotlin 项目代理配置【详细步骤(可选)】
android·java·kotlin
白鲸开源9 小时前
Ubuntu 22 下 DolphinScheduler 3.x 伪集群部署实录
java·ubuntu·开源
ytadpole9 小时前
Java 25 新特性 更简洁、更高效、更现代
java·后端
纪莫9 小时前
A公司一面:类加载的过程是怎么样的? 双亲委派的优点和缺点? 产生fullGC的情况有哪些? spring的动态代理有哪些?区别是什么? 如何排查CPU使用率过高?
java·java面试⑧股
JavaGuide10 小时前
JDK 25(长期支持版) 发布,新特性解读!
java·后端
用户37215742613510 小时前
Java 轻松批量替换 Word 文档文字内容
java
白鲸开源10 小时前
教你数分钟内创建并运行一个 DolphinScheduler Workflow!
java
Java中文社群11 小时前
有点意思!Java8后最有用新特性排行榜!
java·后端·面试
代码匠心11 小时前
从零开始学Flink:数据源
java·大数据·后端·flink