Ajax基本应用---自动刷新页面
点击参考Ajax原理介绍
本篇主要介绍了用Ajax实现自动刷新页面的实现步骤，以及一些问题的解释。
1、编写JSP文档
1.1 代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title heretitle>
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;
}注意：
文本总是存储在文本节点中，元素节点的文本是存储在文本节点中的。
在这个例子中若返回：，元素节点 为4 ，拥有一个值为 “4” 的文本节点。”4” 不是元素的值！
用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("" );
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("" +count+"");
stat.close();
con.close();
}catch (Exception e) {
e.printStackTrace();
}
out.println("");
out.close();
}
}
web.xml配置该servlet:
<servlet>
<servlet-name>AutoRefreshServletservlet-name>
<servlet-class>servletdemo.AutoRefreshServletservlet-class>
servlet>
<servlet-mapping>
<servlet-name>AutoRefreshServletservlet-name>
<url-pattern>/autourl-pattern>
servlet-mapping>4. 运行效果
不断访问服务器已获得最新的num个数。
