使用ajax技术实现局部刷新功能，每2秒刷新一次数据，本案例使用原生态xmlhttprequest对象，GET方法通讯，使用responseXML属性返回xml格式数据，同时刷新界面数据。
ajax封装库(ajax.js)
var xmlhttp=null;
//创建XMLHttpRequest对象
function createHttpRequest(){
if(window.XMLHttpRequest){ //Mozilla 浏览器
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //新版IE
}catch(e){
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = null;
}
}
}
if(!xmlhttp){ //创建XMLHttpRequest失败
alert("不能创建XMLHttpRequest对象实例");
}
}
//发送函数
function sendRequest(method,url,param,callbackHandler){
//创建对象
createHttpRequest();
//绑定事件,后台返回的数据，通过callback方法处理
xmlhttp.onreadystatechange = callbackHandler;
if(method=="get" || method=="GET"){
//初始化发送信息
xmlhttp.open(method,url + "?" + param,true);
xmlhttp.send(null);
}
if(method=="post" || method=="POST"){
//初始化发送信息
xmlhttp.open(method,url,true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(param);
}
}前端页面（refresh.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>Ajax应用举例</title>
<script type="text/javascript" src="../js/ajax.js"></script>
<script type="text/javascript">
function refresh(){
//var url="/ajaxProj/T2/refresh.jsp";
var url="/ajaxProj/refreshServlet";
//time变量的作用：确保每次请求的url地址不一样,time参数没有使用
var params = 'time=' + (new Date()).toString() ;
sendRequest('GET',url,params,showMembers);
}
//动态加载数据部门列表
function showMembers(){
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var membersData = xmlhttp.responseXML.getElementsByTagName("member");
var membersList = document.getElementById("deptlist");
//循环将数据插入列表框中
var li = '';
for(var i=0;i<membersData.length;i++){
var mdisplay=membersData[i].childNodes[0].firstChild.nodeValue;
var mvalue=membersData[i].childNodes[1].firstChild.nodeValue;
li += '<li>' + mvalue + '</li>';
}
/*
* innerText:显示文本内容，原样输出，不会对内容进行解析
* innerHTML:显示文本内容，会对内容中的html标签进行解析，显示解析后的运行效果
* */
membersList.innerHTML = li;
} else { //页面不正常
alert("您请求的页面有异常");
}
}
}
window.setInterval('refresh()',2000);
</script>
</head>
<body>
<h1>页面数据定时刷新</h1>
<hr />
部门列表：
<ul id="deptlist">
</ul>
</body>
</html>后台页面(refresh.jsp)
<%@ page contentType="text/xml; charset=gb18030"%><%@ page import="java.util.*" %><%
Integer count = (Integer)application.getAttribute("count");
if(count==null || count.intValue()==3){
count= new Integer(1);
}else{
count = new Integer(count.intValue()+ 1);
}
application.setAttribute("count",count);
%><%
System.out.println(count);
StringBuffer sb = new StringBuffer();
sb.append("<members>");
switch(count.intValue()){
case 3 : sb.append("<member><id>1005</id><name>部门五</name></member><member><id>1006</id><name>部门六</name></member>");
case 2 : sb.append("<member><id>1003</id><name>部门三</name></member><member><id>1004</id><name>部门四</name></member>");
case 1 : sb.append("<member><id>1001</id><name>部门一</name></member><member><id>1002</id><name>部门二</name></member>");
}
sb.append("</members>");
out.write("<?xml version='1.0' encoding='gb2312' ?>");
out.write(sb.toString());
%>特别说明：
1、页面顶部不能有任何注释行，不能有空格；
2、page指令与jsp代码之间不能有空行，不能有空格。
后台Servlet(RefreshServlet.java)，二选一
package com.servlet;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.print.Printable;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "RefreshServlet", urlPatterns = "/refreshServlet")
public class RefreshServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取application
ServletContext application = getServletContext();
Integer count = (Integer)application.getAttribute("count");
if(count==null || count.intValue()==3){
count= new Integer(1);
}else{
count = new Integer(count.intValue()+ 1);
}
application.setAttribute("count",count);
//设置编码
response.setContentType("text/xml");
response.setCharacterEncoding("gbk");
PrintWriter out = response.getWriter();
StringBuffer sb = new StringBuffer();
sb.append("<members>");
switch(count.intValue()){
case 3 : sb.append("<member><id>1005</id><name>部门五</name></member><member><id>1006</id><name>部门六</name></member>");
case 2 : sb.append("<member><id>1003</id><name>部门三</name></member><member><id>1004</id><name>部门四</name></member>");
case 1 : sb.append("<member><id>1001</id><name>部门一</name></member><member><id>1002</id><name>部门二</name></member>");
}
sb.append("</members>");
out.write("<?xml version='1.0' encoding='gb2312' ?>");
out.write(sb.toString());
}
}
运行效果：
本人从事软件项目开发20多年，2005年开始从事Java工程师系列课程的教学工作，录制50多门精品视频课程，包含java基础，jspweb开发，SSH,SSM，SpringBoot，SpringCloud,人工智能，在线支付等众多商业项目，每门课程都包含有项目实战，上课PPT，及完整的源代码下载，有兴趣的朋友可以看看我的在线课堂文章来源：https://www.toymoban.com/news/detail-504530.html
讲师课堂链接：https://edu.csdn.net/lecturer/893文章来源地址https://www.toymoban.com/news/detail-504530.html
到了这里，关于第5讲：使用ajax技术实现局部刷新功能（xml数据）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
