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

来源：互联网发布：入门c语言编辑：程序博客网时间：2024/06/06 15:40

点击参考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个数。

阅读全文

0 0