跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分Word格式文档下载.docx
- 文档编号:22839411
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:18
- 大小:247KB
跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分Word格式文档下载.docx
《跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分Word格式文档下载.docx(18页珍藏版)》请在冰豆网上搜索。
privatestaticintonlineUserCounter=0;
//体现共享
publicstaticsynchronizedvoidincrementCounter(){
OnLineCounter.onlineUserCounter++;
}
publicstaticsynchronizedvoidreduceCounter(){
if(OnLineCounter.onlineUserCounter==0){
return;
}
OnLineCounter.onlineUserCounter--;
publicstaticsynchronizedintgetOnLineUserCounter(){
returnOnLineCounter.onlineUserCounter;
}
(3)改进的实现方法
上面实现的方法是应用static!
?
它是面向过程技术中的,应该采用面向对象!
有没有其他的方法能够满足上面的要求?
采用“单例对象”创建技术---某个类只能创建出该类的一个对象实例
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){
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();
publicvoidsessionDestroyed(HttpSessionEventarg0){//结束会话
OnLineCounter.reduceCounter();
publicvoidattributeAdded(HttpSessionBindingEventevent){
publicvoidattributeRemoved(HttpSessionBindingEventevent){
publicvoidattributeReplaced(HttpSessionBindingEventarg0){
由于session监听的是HTTP连接,只要有用户与后台服务器连接,就算连接的是一个空白的JSP页面,也会触发session事件,所以此处的session实际上指的是连接数(Connection)。
(4)部署该监听器
<
listener>
<
listener-class>
com.px1987.webcrm.listener.OnLineCounterListener<
/listener-class>
/listener>
3、在页面中定位显示计数的标签authorInfo.jsp
%@pagepageEncoding="
GB18030"
%>
%@taglibprefix="
c"
uri="
!
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
>
html>
head>
title>
版权信息页<
/title>
linkhref="
${pageContext.request.contextPath}/css/commonStyle.css"
rel="
stylesheet"
type="
text/css"
/>
/head>
body>
hr/>
divid="
pageFooter"
版权所有:
蓝梦集团网络信息资源中心,中国最优秀的J2EE平台开源社区,提供丰富的B2B和B2C平台下的各种技术资料和在线服务
footerCopyright"
Ahref="
#"
>
北京ICP备0123456789号<
/A>
网站统计<
站长统计<
/div>
<
onLineUserInfos"
目前在线人数是:
spanid="
onLineUserCounterDiv"
%=com.px1987.webcrm.util.OnLineCounter.getOnLineUserCounter()%>
/span>
人,
showErrorInfoDivTag"
style="
background-color:
#FF9900;
display:
none"
/body>
/html>
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、最后的页面内容如下
rel="
scriptlanguage="
javascript"
src="
${pageContext.request.contextPath}/javascript/ajaxonLineCounter.js
/script>
type="
text/javascript"
varxmlHttpRequest;
varshowErrorInfoDivTag;
varshowOnLineUserCounterDivTag;
varrequestServerURL=
"
${pageContext.request.contextPath}/onLineUserInfoServlet.action"
showErrorInfoDivTag="
;
showOnLineUserCounterDivTag="
//每隔1秒钟轮询一次
window.setInterval("
showOnLineUserCounter()"
1000);
functionshowOnLineUserCounter(){
xmlHttpRequest=createXMLHTTPRequestObject();
xmlHttpRequest.onreadystatechange=processXMLHttpResponse;
//Post请求方式的代码
xmlHttpRequest.open("
POST"
requestServerURL,true);
//设置该请求的响应不需要缓存
xmlHttpRequest.setRequestHeader("
If-Modified-Since"
"
0"
);
Content-Type"
"
application/x-www-form-urlencoded"
//模拟表单请求
xmlHttpRequest.send("
action=showOnLineUserCounter"
ahref="
/a>
目前在线人数是:
人,
由于在本示例中需要定时向服务器发送请求,因此在并发请求比较高时,将会造成服务器的负载。
需要注意用Ajax实现代替普通的基于表单的UI,会大大提高对服务器发出的请求数量。
例如,一个普通的GoogleWeb搜索对服务器只有一个请求,是在用户提交搜索表单时出现的。
而GoogleSuggest试图自动完成搜索术语,它要在用户输入时向服务器发送多个请求。
在开发Ajax应用程序时,要注意将要发送给服务器的请求数量以及由此造成的服务器负荷。
降低服务器负载的办法是,在客户机上对请求进行缓冲并且缓存服务器响应(如果可能的话)。
还应该尝试将AjaxWeb应用程序设计为在客户机上执行尽可能多的逻辑,而不必联络服务器。
3、添加外部的ajaxonLineCounter.js文件
(1)在项目中添加外部的ajaxonLineCounter.js文件
(2)编程该*.js文件中的代码
functioncreateXMLHTTPRequestObject(){
varhttpRequestObject;
if(window.XMLHttpRequest){//Mozilla,Safari,...
httpRequestObject=newXMLHttpRequest();
elseif(window.ActiveXObject){//IE
try{
httpRequestObject=newActiveXObject("
Microsoft.XMLHTTP"
catch(e){
try{
httpRequestObject=newActiveXObject("
Msxml2.XMLHTTP"
}
catch(e2){
window.alert("
您所使用的浏览器不支持AJAX技术!
returnhttpRequestObject;
functionprocessXMLHttpResponse(){
if(xmlHttpRequest.readyState==4){
document.getElementById(showErrorInfoDivTag).style.display="
if(xmlHttpRequest.status==200){
//检查是否成功接收了服务器响应
parseServerResponseTextToBrowse();
elseif(xmlHttpRequest.status==404){
所请求的服务器端的URL不存在!
else{
你所请求的页面发生异常,错误代码为:
+
xmlHttpRequest.status);
else{
document.getElementById(showErrorInfoDivTag).style.display="
inline"
document.getElementById(showErrorInfoDivTag).innerHTML=
正在向服务器发送请求,请稍等..."
functionparseServerResponseTextToBrowse(){//动态显示出在线人数
document.getElementById(showOnLineUserCounterDivTag).innerHTML=
xmlHttpRequest.responseText;
4、添加会话管理的Servlet组件OnLineUserInfoServlet
(1)添加OnLineUserInfoServlet程序类,程序包名称为com.px1987.webcrm.servlet
(2)URL-Pattern设置为:
/onLineUserInfoServlet.action
(3)最后产生出下面的结果
(4)编程实现OnLineUserInfoServlet程序类中的功能实现方法
packagecom.px1987.webcrm.servlet;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassOnLineUserInfoServletextendsHttpServlet{
publicOnLineUserInfoServlet(){
super();
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
StringrequestAction=request.getParameter("
action"
if(requestAction.equals("
showOnLineUserCounter"
)){
doShowOnLineUserCounter(request,response);
publicvoiddoShowOnLineUserCounter(HttpServletRequestrequest,HttpServletResponseresponse)
response.setContentType("
text/html;
charset=gb2312"
PrintWriterout=response.getWriter();
intonlineUserCounter=OnLineCounter.getOnLineUserCounter();
out.print(onlineUserCounter);
out.flush();
out.close();
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AJAX 技术 应用 实现 Web 网站 实时 在线 用户 计数 示例 第一 部分
链接地址:https://www.bdocx.com/doc/22839411.html