当前位置：
  1. 首页
  2. ajax
  3. 正文
本文介绍: 通过 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象， JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。实验中利用JSP+ajax来实现自动刷新页面，并读/写数据库中的数据。处理ajax请求的jsp文件：ajax.jsp。发送ajax请求的jsp文件：zx.jsp。

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

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

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

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

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

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

  3. <%

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

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

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

  7. out.println("<response&gt;");

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

  10. out.println("<name&gt;"+(int)(Math.random()*10)+

  11. "号传感器</name&gt;");

  12. out.println("<count&gt;" +(int)(Math.random()*100)+ "</count&gt;");

  13. }

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

  15. out.close();

  16. %>

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

  1. <head>

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

  3. </head>

  4. <script language="javascript">

  6. var XMLHttpReq;

  7. //创建XMLHttpRequest对象

  8. function createXMLHttpRequest() {

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

  10. XMLHttpReq = new XMLHttpRequest();

  11. }

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

  13. try {

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

  15. } catch (e) {

  16. try {

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

  18. } catch (e) {}

  19. }

  20. }

  21. }

  22. //发送请求函数

  23. function sendRequest() {

  24. createXMLHttpRequest();

  25. var url = "ajax.jsp";

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

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

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

  29. }

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

  31. function processResponse() {

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

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

  34. DisplayHot();

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

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

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

  38. }

  39. }

  40. }

  41. function DisplayHot() {

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

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

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

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

  46. }

  49. </script>

  51. <body onload =sendRequest()>

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

  54. <TR>

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

  56. </TR>

  57. <tr>

  58. <td height="20"> 传感器：</td>

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

  60. </tr>

  61. <tr>

  62. <td height="20">传感器个数：</td>

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

  64. </tr>

  65. </body>

  66. </table>

显示所有内容
上一篇 你知道Canary金丝雀版本的由来吗
下一篇 2023年网络零售洞察：直播1.1亿场！网店数量增加38.6%，线上稳步增长｜商派徐礼昭

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。