Ajax基本应用---自动刷新页面

xiaoxiao2021-02-28  144

点击参考Ajax原理介绍 本篇主要介绍了用Ajax实现自动刷新页面的实现步骤,以及一些问题的解释。

1、编写JSP文档

1.1 代码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <script type="text/javascript" charset="gbk" src="js2.js"></script> //js文件在服务器端是以GBK形式存储的,这里需要另外指出从服务器获得的JS文件的编码格式为GBK,来正确解码。 <body onload="sendRequest()"> <table style="border-collapse: collapse;" bordercolor="#666666" cellspacing="0" cellpadding="0" width="200" bgcolor="#f5efe7" border="0"> <tr> <td align="center" height="19" colspan="2"> <b>信息提示</b> </td> </tr> <tr> <td height="20" id="name"> </td> </tr> <tr> <td height="20" id="num" align="center"> </td> </tr> </table> </body> </html>

1.2 page标签的两个编码区分

转载自http://blog.csdn.net/gaofeirong/article/details/3130027

pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容编码

在页面传输过程中Jsp要经过三次两种形式的编码: 第一次编码会用pageEncoding; 第二次编码会用utf-8至utf-8; 第三次编码就是由TOMCAT解释输出的网页,用contentType的charset编码。

第一次编码是Jsp编译成.Java文件时,会根据pageEncoding的设定读取Jsp文件,结果是根据指定的编码方案翻译成统一的UTF-8格式的JAVA源码(即所谓的.java),如果pageEncoding设定错了,或是没有设定,出来的就是中文乱码。

第二次编码是由Javac的JAVA源码到Java byteCode的编译,不管JSP编写时候用的是什么编码方案,经过这个阶段的处理,结果全部是UTF-8的encoding的java源码了。JAVAC用UTF-8的encoding读取java源码数据,编译成UTF-8 encoding的二进制码(即.class)形式,这是就JVM对常数字串在二进制码(java encoding)内表达的规范。

第三次编码是Tomcat(或其的application Container)载入和执行阶段二的来的JAVA二进制码,输出的结果,也就是在客户端见到的,这时隐藏在第一次编码和第二次编码的参数contentType就发挥了作用了。

contentType的常规设定: pageEncoding和contentType的预设都是ISO8859-1,只要设定了其中一个, 另一个也就变成一样的了,(TOMCAT4.1.27是如此)。 但这不是一定绝对的, 这要看各自JSPC的处理方式, 然而pageEncoding不等于contentType, 更有利亚洲区的文字 CJKV系JSP网页的开发和展示, 比如:pageEncoding=GB2312并不等于contentType=utf-8。

然而Jsp文件不像.java,.java在被编译器读入的时候默认采用的是操作系统所设定的locale所对应的编码,比如中国大陆就是GBK,台湾就是BIG5或者MS950。而一般我们不管是在记事本还是在ue中写代码,如果没有经过特别转码的话,写出来的都是本地编码格式的内容。所以编译器采用的方法刚好可以让虚拟机得到正确的资料。

可是Jsp文件并不是这样的编码,没有默认转码过程,主要我们指了pageEncoding就可以实现正确转码了。

1.3 请求头设置

response.setHeader("Cache-Control", "no-cache");作用是强制每次请求直接发送给源服务器,而不经过本地缓存版本的校验,即在地址栏回车,每次都会访问服务器。 更多详见:http://www.51testing.com/html/28/116228-238337.html

2、编写js文档

var XMLHttpReq; function createXMLRequest() { 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() { createXMLRequest(); var url = "auto"; XMLHttpReq.open("GET", url, true); XMLHttpReq.onreadystatechange = processResponse;// 指定响应函数 XMLHttpReq.send(null); } // 处理返回信息函数 function processResponse() { if (XMLHttpReq.readyState == 4) {// 判断对象状态,4则说明服务器响应已完成,可以访问了 if (XMLHttpReq.status == 200) {// 信息已经成功返回,开始处理信息 DisplayHot(); setTimeout("sendRequest()", 1000);// 每隔1秒自动访问服务器 } else { window.alert("您所请求的页面有异常!"); } } } // 显示更新数据信息的函数 function DisplayHot() { var num = XMLHttpReq.responseXML.getElementsByTagName("num")[0].firstChild.nodeValue; document.getElementById("name").innerHTML = "你的新信息数目为:"; document.getElementById("num").innerHTML = num; }

注意:

文本总是存储在文本节点中,元素节点的文本是存储在文本节点中的。 在这个例子中若返回:<num>4</num>,元素节点 为<num>,拥有一个值为 “4” 的文本节点。”4” 不是 <num> 元素的值! 用firstChild实际上获得了4这个文本节点。

创建XMLHttpRequest对象,必须是全局变量:

让服务器能够操作该变量,如果定义成局部变量,则服务端返回response时,不能对xmlhttp的属性赋值;回调函数要求request是全局的,才能访问这个变量和它的属性值。

3. Servlet编写与配置

从数据库的stuscore表中计算state为0的数据条数,并以

<response> <num>求得的数字</num> </response>

形式返回给客户端浏览器。

AutoRefreshServlet.java:

package servletdemo; import java.io.IOException; import java.io.PrintWriter; import java.nio.charset.Charset; import java.sql.*; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/AutoRefreshServlet") public class AutoRefreshServlet extends HttpServlet { private static final long serialVersionUID = 1L; public AutoRefreshServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml;Charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); out.println("<response>"); try { Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/DB_student?useUnicode=true&characterEncoding=GBK"; String user = "root"; String password = "admin"; Connection con = DriverManager.getConnection(url,user,password); Statement stat = con.createStatement(); String sql ="select * from stuscore where state=0"; ResultSet rs = stat.executeQuery(sql); int count=0; while(rs.next()){ count++; } out.println("<num>"+count+"</num>"); stat.close(); con.close(); }catch (Exception e) { e.printStackTrace(); } out.println("</response>"); out.close(); } }

web.xml配置该servlet:

<servlet> <servlet-name>AutoRefreshServlet</servlet-name> <servlet-class>servletdemo.AutoRefreshServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AutoRefreshServlet</servlet-name> <url-pattern>/auto</url-pattern> </servlet-mapping>

4. 运行效果

不断访问服务器已获得最新的num个数。

转载请注明原文地址: https://www.6miu.com/read-36978.html

最新回复(0)