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>
分享到：
相关推荐
2. 动态生成元素的事件处理难题：在Web开发中，经常遇到需要动态生成页面元素的情况，比如根据用户操作生成新的输入框、按钮或下拉选择框（select）。一旦这些元素被添加到DOM中，为了能够响应用户的交互，我们需要...
上述过程为实现一个带有Ajax功能的Bootstrap Select2插件的基本步骤，它在很多应用场景中非常有用，尤其是在选项数据量较大或动态变化时。通过这种方式，开发者可以创建一个用户友好的界面，允许用户通过搜索和选择...
在IT行业中，PHP和AJAX（Asynchronous JavaScript and XML）是两种常见的技术，它们结合使用可以实现动态网页交互，提高用户体验。在这个特定的场景中，我们讨论的是如何使用PHP和AJAX来实现在一个下拉菜单中选择...
在这个特定的项目中，“jquery动态生成select工作日列表Workday”是利用jQuery来实现一个功能，该功能可以动态地创建一个SELECT元素，并填充每月周一至周五的工作日日期。 首先，我们需要理解“select”元素在HTML...
本文档将详细阐述如何使用layui框架，结合jQuery和Ajax技术，动态渲染生成select下拉列表中的option选项值的方法。 首先，我们需要了解layui框架。layui是一个前端UI框架，它为开发者提供了一系列的组件，其中就...
本话题将围绕"使用ajax动态树生成"这一主题，结合jsp（JavaServer Pages）和MySQL数据库，探讨如何实现一个动态的树形结构展示。 首先，我们需要了解动态树的基本概念。动态树通常用于展示层级关系的数据，比如组织...
总结一下，这个"JSP+AJAX实现两级select联动"的项目展示了如何结合服务器端和客户端技术来创建动态、响应式的Web界面。这种联动效果可以应用于各种场景，比如地理选择、商品分类筛选等，极大地提升了用户的操作效率...
在这里，jQuery用于监听Select元素的改变事件，并通过$.ajax()函数发起AJAX请求。 3. **PHP**：后端编程语言PHP用于处理请求，动态生成菜单数据。它可以连接到数据库，查询并返回相关的子菜单项。例如，当用户选择...
### 动态生成Select下拉框 在HTML页面中，通常会使用select元素来创建下拉框，供用户选择。通过Ajax技术与后端交互，可以根据用户的选择动态地更新下拉框中的选项。这在很多需要用户交互决策的Web应用中非常常见。 ...
动态填充select下拉框的选项值，意味着在表格加载或编辑时，根据服务器返回的数据或特定逻辑来生成并填充这些选项。这个过程通常包括以下步骤： 1. **设置列模型**：在初始化jQGrid时，我们需要为包含下拉框的列...
【JSP Ajax省市县Select级联菜单】是一个典型的前端与后端交互的示例，它在Web应用中常用于实现动态、无刷新的选择区域（省、市、县）功能。这个压缩包包含了一个完整的解决方案，使得用户在选择省份时，对应的市区...
本示例代码“jquery动态生成树”是关于如何利用jQuery和相关技术，如Struts2、treeview插件及JSON数据格式，来动态地在网页上构建一个可交互的目录树结构。 首先，让我们详细了解一下每个组件的作用： 1. **jQuery...
当用户在一级`<select>`中做出选择时，通过Ajax发送请求，后台根据选择的数据返回相应的下级选项。 **JSON（JavaScript Object Notation）**是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和...
本示例中的"根据JSON自动生成select联动"就是一种利用JSON数据实现多级关联的`select`元素的方法，主要涉及JQuery库和HTML页面的构建。 首先，我们要理解JSON（JavaScript Object Notation）的结构。JSON对象通常...
本文将深入探讨如何在ASP.NET中动态生成HTML标签，并结合`AJAX`与数据库进行交互。 首先，`.NET`框架提供了`System.Web.UI.HtmlControls`和`System.Web.UI.WebControls`命名空间，这两个命名空间包含了大量用于创建...
3. **动态生成select**：在JavaScript中，可以使用`document.createElement('select')`创建一个新的select元素，然后使用`appendChild()`方法将其添加到页面上的某个位置。接着，可以通过循环遍历JSON数据，为每个...
本文将深入探讨如何使用Ajax实现下拉列表（Select）改变时动态创建单选按钮（Radio Button）组，同时也会涉及列表框、分组以及动态创建等关键知识点。 首先，我们需要理解Ajax的基本原理。Ajax允许我们在不刷新整个...
### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时，我们经常需要动态地从服务器获取数据，并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...
本篇分享的关键词是“AJAX 动态加载后台数据 绑定select的方法”。这意味着我们将关注于如何使用AJAX技术来动态地从服务器获取数据，并用这些数据来更新网页中的SELECT元素。SELECT元素通常用于网页表单中的下拉选择...