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>

相关推荐
前端小张同学13 小时前
服务器上如何搭建jenkins 服务CI/CD😎😎
java·后端
ytadpole13 小时前
Spring Cloud Gateway:一次不规范 URL 引发的路由转发404问题排查
java·后端
华仔啊13 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮13 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
浮游本尊14 小时前
Java学习第21天 - 微服务架构设计
java
渣哥14 小时前
Java CyclicBarrier 详解:原理、使用方式与应用场景
java
杨杨杨大侠14 小时前
打开 JVM 黑匣子——走进 Java 字节码(一)
java·jvm·agent
SimonKing14 小时前
接口调用总失败?试试Spring官方重试框架Spring-Retry
java·后端·程序员
咖啡Beans14 小时前
SpringCloud网关Gateway功能实现
java·spring cloud