跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx
- 文档编号：9661752
- 上传时间：2023-02-05
- 格式：DOCX
- 页数：18
- 大小：247KB
跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx
《跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx》由会员分享，可在线阅读，更多相关《跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx（18页珍藏版）》请在冰豆网上搜索。
跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分
1.1跟我学AJAX技术——应用AJAX技术实现Web网站的实时在线用户计数的应用示例（第一部分）
1.1.1统计“在线用户计数”项目开发思路
1、系统需求----“做什么”
准确统计“在线用户计数”，但要注意需求示经常会变化的！
2、系统分析----“分析和理解需求”
（1）在线？
（2）计数----数值并显示输出
3、系统设计----“如何做”、考虑技术的实现细节
（1）Web方式的技术实现
（2）采用监听器组件技术
（3）监听器应该监听什么？
HttpSession
（4）如何及时（准确）计数？
AJAX----DWR框架
（5）如何识别用户是否离开？
4、编程实现
测试驱动开发（TDD）
5、测试
（1）单元测试
如果出现错误的状态
（2）集成测试
6、部署（在用户的环境中安装系统）
1.1.2常规的显示在线用户数的功能实现
1、添加一个在线用户计数的组件
（1）类名称为OnLineCounter，包名称为com.px1987.webcrm.util
（2）编程该计数器类
packagecom.px1987.webcrm.util;
publicclassOnLineCounter{
privatestaticintonlineUserCounter=0;//体现共享
publicstaticsynchronizedvoidincrementCounter（）{
OnLineCounter.onlineUserCounter++;
}
publicstaticsynchronizedvoidreduceCounter（）{
if（OnLineCounter.onlineUserCounter==0）{
return;
}
OnLineCounter.onlineUserCounter--;
}
publicstaticsynchronizedintgetOnLineUserCounter（）{
returnOnLineCounter.onlineUserCounter;
}
}
（3）改进的实现方法
上面实现的方法是应用static！
？
它是面向过程技术中的，应该采用面向对象!
有没有其他的方法能够满足上面的要求？
采用“单例对象”创建技术---某个类只能创建出该类的一个对象实例
packagecom.px1987.webcrm.util;
publicclassOnLineCounter{
privateintonlineUserCounter=0;//不再需要设置为static类型的变量
privatestaticOnLineCounteroneOnLineCounter=null;//
（1）
privateOnLineCounter（）{//
（2）
}
publicstaticOnLineCounternewInstance（）{//（3）
if（oneOnLineCounter==null）{
oneOnLineCounter=newOnLineCounter（）;
}
returnoneOnLineCounter;
}
/*下面的所有方法也不再需要设置为static方法
*/
publicsynchronizedvoidincrementCounter（）{
oneOnLineCounter.onlineUserCounter++;
}
publicsynchronizedvoidreduceCounter（）{
if（oneOnLineCounter.onlineUserCounter==0）{
return;
}
oneOnLineCounter.onlineUserCounter--;
}
publicsynchronizedintgetOnLineUserCounter（）{
returnoneOnLineCounter.onlineUserCounter;
}
}
2、编程实现对HttpSessionListener事件监听器程序
（1）在项目中添加一个HttpSessionListener事件监听器程序类
程序类名称为OnLineCounterListener，程序包名称为com.px1987.webcrm.listener，实现javax.servlet.http.HttpSessionListener、javax.servlet.http.HttpSessionAttributeListener接口。
（2）将产生出下面的程序结果
（3）编程OnLineCounterListener程序类中的功能实现代码
packagecom.px1987.webcrm.listener;
importjavax.servlet.http.HttpSessionAttributeListener;
importjavax.servlet.http.HttpSessionBindingEvent;
importjavax.servlet.http.HttpSessionEvent;
importjavax.servlet.http.HttpSessionListener;
importcom.px1987.webcrm.model.vo.UserInfoVO;
importcom.px1987.webcrm.util.OnLineCounter;
publicclassOnLineCounterListenerimplementsHttpSessionListener,HttpSessionAttributeListener{
publicOnLineCounterListener（）{
}
@Override
publicvoidsessionCreated（HttpSessionEventarg0）{//创建会话
OnLineCounter.incrementCounter（）;
}
@Override
publicvoidsessionDestroyed（HttpSessionEventarg0）{//结束会话
OnLineCounter.reduceCounter（）;
}
@Override
publicvoidattributeAdded（HttpSessionBindingEventevent）{
}
@Override
publicvoidattributeRemoved（HttpSessionBindingEventevent）{
}
@Override
publicvoidattributeReplaced（HttpSessionBindingEventarg0）{
}
}
由于session监听的是HTTP连接，只要有用户与后台服务器连接，就算连接的是一个空白的JSP页面，也会触发session事件，所以此处的session实际上指的是连接数（Connection）。
（4）部署该监听器
3、在页面中定位显示计数的标签authorInfo.jsp
<%@pagepageEncoding="GB18030"%>
<%@taglibprefix="c"uri="
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
版权所有：
蓝梦集团网络信息资源中心，中国最优秀的J2EE平台开源社区，提供丰富的B2B和B2C平台下的各种技术资料和在线服务
目前在线人数是：
<%=com.px1987.webcrm.util.OnLineCounter.getOnLineUserCounter（）%>
人，
#FF9900;display: none">
4、测试目前的功能的效果
（1）部署该Web应用
（2）启动服务器
（3）输入http:
//127.0.0.1:
8080/webcrm/index.jsp
并打开多个不同的浏览器来模拟多个不同的用户，系统将能够及时并准确地计数。
（4）目前的在线记数功能所存在的问题——不能达到“实时”的效果
1）不能实时显示新的在线人数
2）如果某个用户离线（关闭浏览器、会话超时），不能实时显示变化后的新的在线人数
因为用户关闭了浏览器窗口就表明用户已经不在线了，所有的对话都应该要结束。
但由于服务器端并不能够及时地知道这个状态的变化。
此时只要依赖于Session会话过期超时，但导致在线记数将不准确。
1.1.3利用AJAX技术实现“实时动态”显示在线用户数
1、JavaScript语言中的定时器
在项目中应用JavaScript语言中的定时器达到定时向服务器查询（异步）在线用户数，每隔一定的时间去获得新的用户记数值。
2、最后的页面内容如下
<%@pagepageEncoding="GB18030"%>
<%@taglibprefix="c"uri="
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
rel="stylesheet"type="text/css"/> src="${pageContext.request.contextPath}/javascript/ajaxonLineCounter.js varxmlHttpRequest; varshowErrorInfoDivTag; varshowOnLineUserCounterDivTag; varrequestServerURL= "${pageContext.request.contextPath}/onLineUserInfoServlet.action" showErrorInfoDivTag="showErrorInfoDivTag"; showOnLineUserCounterDivTag="onLineUserCounterDiv"; //每隔1秒钟轮询一次 window.setInterval（"showOnLineUserCounter（）",1000）; functionshowOnLineUserCounter（）{ xmlHttpRequest=createXMLHTTPRequestObject（）; xmlHttpRequest.onreadystatechange=processXMLHttpResponse; //Post请求方式的代码 xmlHttpRequest.open（"POST",requestServerURL,true）; //设置该请求的响应不需要缓存 xmlHttpRequest.setRequestHeader（"If-Modified-Since","0"）; xmlHttpRequest.setRequestHeader（"Content-Type", "application/x-www-form-urlencoded"）;//模拟表单请求 xmlHttpRequest.send（"action=showOnLineUserCounter"）; }
版权所有：
蓝梦集团网络信息资源中心，中国最优秀的J2EE平台开源社区，提供丰富的B2B和B2C平台下的各种技术资料和在线服务
1212中级汽车维修工考试试题三.docx
