第5讲:使用ajax技术实现局部刷新功能(xml数据)

这篇具有很好参考价值的文章主要介绍了第5讲:使用ajax技术实现局部刷新功能(xml数据)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用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());

    }
}

运行效果:

第5讲:使用ajax技术实现局部刷新功能(xml数据)

 第5讲:使用ajax技术实现局部刷新功能(xml数据)

本人从事软件项目开发20多年,2005年开始从事Java工程师系列课程的教学工作,录制50多门精品视频课程,包含java基础,jspweb开发,SSH,SSM,SpringBoot,SpringCloud,人工智能,在线支付等众多商业项目,每门课程都包含有项目实战,上课PPT,及完整的源代码下载,有兴趣的朋友可以看看我的在线课堂​​​​​​​

讲师课堂链接:https://edu.csdn.net/lecturer/893文章来源地址https://www.toymoban.com/news/detail-504530.html

到了这里,关于第5讲:使用ajax技术实现局部刷新功能(xml数据)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包