ajax动态生成select

最新推荐文章于 2022-08-23 23:49:36 发布

iteye_13722

最新推荐文章于 2022-08-23 23:49:36 发布

阅读量241

点赞数

分类专栏： web前端文章标签： ajax

本文链接：https://blog.csdn.net/iteye_13722/article/details/82358028

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

auto.jsp

<%@ page contentType="text/html; charset=gb2312" %>
<%@ page import="com.kaka.vo.OnLineUser,java.util.*"%>
<jsp:useBean id="onLineUser" class="com.kaka.vo.OnLineUser" scope="application" />

<%
//设置输出信息的格式及字符集 
//自动更新在线人数、当前访问量、空闲用户id
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control","no-cache");

out.println("<respose>");
out.println("<option>");
out.println("<value>"+onLineUser.getFreeUserId(0)+"</value>");
out.println("<text>"+onLineUser.getFreeUserId(0)+"</text>");
out.println("</option>");
out.println("<option>");
out.println("<value>"+onLineUser.getFreeUserId(1)+"</value>");
out.println("<text>"+onLineUser.getFreeUserId(1)+"</text>");
out.println("</option>");
out.println("<option>");
out.println("<value>"+onLineUser.getFreeUserId(2)+"</value>");
out.println("<text>"+onLineUser.getFreeUserId(2)+"</text>");
out.println("</option>");
out.println("</respose>");
%>

autoRefresh.jsp

<%@ page contentType="text/html; charset=gb2312" %>
<script language="javascript">
var XMLHttpReq;
 	//创建XMLHttpRequest对象       
    function createXMLHttpRequest() {
		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() {
		createXMLHttpRequest();
        var url = "auto.jsp";
		XMLHttpReq.open("GET", url, true);
		XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
		XMLHttpReq.send(null);  // 发送请求
	}
	// 处理返回信息函数
    function processResponse() {
    	if (XMLHttpReq.readyState == 4) { // 判断对象状态
        	if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
				DisplayHot();
				setTimeout("sendRequest()", 1000);
            } else { //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
    }
    function DisplayHot() {
	    //var one = XMLHttpReq.responseXML.getElementsByTagName("one")[0].firstChild.nodeValue;
	    //var two = XMLHttpReq.responseXML.getElementsByTagName("two")[0].firstChild.nodeValue;
		var str = "";
		var options = XMLHttpReq.responseXML.getElementsByTagName("option");
		for (var i=0; i<options.length; i++){
			var optionData = XMLHttpReq.responseXML.getElementsByTagName("option")[i];
			var value = optionData.getElementsByTagName("value")[0].firstChild.nodeValue;
			var text =  optionData.getElementsByTagName("text")[0].firstChild.nodeValue;
			str+="<option value='"+value+"'>"+text+"</option>";	
		}
		document.getElementById("onLineUsers").innerHTML = str;
	}

</script>
<body onload =sendRequest()>
<table style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=200    bgColor=#f5efe7 border=0>

<TR>
   <TD align=middle bgColor=#dbc2b0 height=19 colspan="2"><B>在线人数</B> </TD>
</TR>
<tr>
   <td height="20"> 1：</td>
   <td height="20" id="one"> </td>
</tr>
<tr>
   <td height="20"> 2：</td>
   <td height="20" id="two"> </td>
</tr>
<tr>
   <td height="20"> 3：</td>
   <td height="20" id="three"> </td>
</tr>
<% 
    String strPath = (String)request.getContextPath(); 
    out.println("当前路径："+strPath);
%>
	<select size="5" id="onLineUsers">
	</select>
</body> 
</table>