j2ee中运用ajax局部刷新和实时局部刷新

最新推荐文章于 2021-08-06 01:35:34 发布

-无-怨-无-悔-

最新推荐文章于 2021-08-06 01:35:34 发布

阅读量563

点赞数

分类专栏： j2ee 文章标签： ajax

本文链接：https://blog.csdn.net/chenhande1990chenhan/article/details/54343784

版权

j2ee 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.function loadXMLDoc(valueFromSelect1) //加载ajax，并进行请求数据

2.xmlhttp.onreadystatechange=updatePage;//指明回调函数

3.function updatePage()//产生回调并且进行界面处理

4.setTimeout("loadXMLDoc('"+1+"')" , 1000);//实时局部刷新

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发送信息</title>

<link href="/test678/css/style1.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
		var xmlhttp;
        function loadXMLDoc(valueFromSelect1){
            var url = "controller/AjaxServlet?valueFromSelect=" + valueFromSelect1 + "&" + Math.random();
            xmlhttp=null;
            if (window.XMLHttpRequest){
              xmlhttp=new XMLHttpRequest();
            }
            else if (window.ActiveXObject){
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp!=null){
              xmlhttp.onreadystatechange=updatePage;//指明回调函数
              xmlhttp.open("GET",url,true);//请求URL
              xmlhttp.send(null);
            }
            else{
              alert("Your browser does not support XMLHTTP.");
            }
			//setTimeout("loadXMLDoc('"+1+"')" , 1000);//实时局部刷新
        }
         
        function state_Change(){
            if (xmlhttp.readyState==4){
                if (xmlhttp.status==200){
                    updatePage();
                }
                else{
                    alert("Problem retrieving XML data");
                }
            }
        }
        
		//产生回调 并且进行界面处理
        function updatePage(){           
            // 清空select2
            while(select2.options[0] != null){
                select2.options[0] = null;
            }
             
            // 设置select2
            var xmlDoc = xmlhttp.responseXML;//对放回的xml数据进行解析
            var labelValueBeanElements = xmlDoc.getElementsByTagName("labelValueBean");
            for (var i = 0; i < labelValueBeanElements.length; i++){
                var entityValue = xmlDoc.getElementsByTagName("value")[i].childNodes[0].nodeValue;
                var entityLabel = xmlDoc.getElementsByTagName("label")[i].childNodes[0].nodeValue;
                select2.options[i] = new Option(entityLabel,entityValue,false,false);
            }
        }
</script>

</head>
<body>
		select1:
        <select id="select1" οnchange="loadXMLDoc(this.value)">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <br/>
        select2:
        <select id="select2">
        </select>
        <input type="button" value="显示select2的值" οnclick="alert(select2.value)">
</body>
</html>

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import openfire.entity.IMMessage;
import openfire.util.AllMessages;

public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 200808021921120001L;

	/**
	 * Constructor of the object.
	 */
	public AjaxServlet() {
		super();
	}

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	/**
	 * The doGet method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("GBK");

		String valueFromSelect = request.getParameter("valueFromSelect");

		StringBuffer sb = new StringBuffer();
		sb.append("<?xml version=\"1.0\" encoding=\"gb2312\"?>\n");
		sb.append("<resultFromDB>\n");
		sb.append(fromDB(valueFromSelect));
		sb.append("</resultFromDB>\n");

		response.setHeader("content-type", "text/xml;charset=GBK");
		PrintWriter out = response.getWriter();
		out.println(sb.toString());
		out.flush();
		out.close();
	}

	/**
	 * The doPost method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to
	 * post.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

	/**
	 * Initialization of the servlet. <br>
	 * 
	 * @throws ServletException
	 *             if an error occure
	 */
	public void init() throws ServletException {
		// Put your code here
	}

	/**
	 * 模拟访问数据库
	 */
	private String fromDB(String valueFromSelect) {
		StringBuffer sb = new StringBuffer();
		ArrayList<IMMessage> messages = AllMessages.getMessages();
		if (valueFromSelect.equals("1")) {
			/*for (int i = messages.size()-1; i >= 0 ; i--)
			{
				sb.append("	<labelValueBean>\n");
				sb.append("		<value>" + messages.get(i).getContent() + "</value>\n");
				sb.append("		<label>" + messages.get(i).getContent() + "</label>\n");
				sb.append("	</labelValueBean>\n");
			}*/
			sb.append("	<labelValueBean>\n");
			sb.append("		<value>haha</value>\n");
			sb.append("		<label>哈哈</label>\n");
			sb.append("	</labelValueBean>\n");
			sb.append("	<labelValueBean>\n");
			sb.append("		<value>hehe</value>\n");
			sb.append("		<label>呵呵</label>\n");
			sb.append("	</labelValueBean>\n");
		} else if (valueFromSelect.equals("2")) {
			sb.append("	<labelValueBean>\n");
			sb.append("		<value>heihei</value>\n");
			sb.append("		<label>嘿嘿</label>\n");
			sb.append("	</labelValueBean>\n");
			sb.append("	<labelValueBean>\n");
			sb.append("		<value>gaga</value>\n");
			sb.append("		<label>嘎嘎</label>\n");
			sb.append("	</labelValueBean>\n");
			sb.append("	<labelValueBean>\n");
			sb.append("		<value>woyun</value>\n");
			sb.append("		<label>我晕</label>\n");
			sb.append("	</labelValueBean>\n");
			sb.append("	<labelValueBean>\n");
			sb.append("		<value>123</value>\n");
			sb.append("		<label>456</label>\n");
			sb.append("	</labelValueBean>\n");
		}
		return sb.toString();
	}

}