跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx

上传人:b****7 文档编号:9661752 上传时间:2023-02-05 格式:DOCX 页数:18 大小:247KB
下载 相关 举报
跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx_第1页
第1页 / 共18页
跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx_第2页
第2页 / 共18页
跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx_第3页
第3页 / 共18页
跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx_第4页
第4页 / 共18页
跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx_第5页
第5页 / 共18页
点击查看更多>>
下载资源
资源描述

跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx

《跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx》由会员分享,可在线阅读,更多相关《跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx(18页珍藏版)》请在冰豆网上搜索。

跟我学AJAX技术应用AJAX技术实现Web网站的实时在线用户计数的应用示例第一部分.docx

跟我学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)部署该监听器

com.px1987.webcrm.listener.OnLineCounterListener

3、在页面中定位显示计数的标签authorInfo.jsp

<%@pagepageEncoding="GB18030"%>

<%@taglibprefix="c"uri="

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

版权信息页


版权所有:

蓝梦集团网络信息资源中心,中国最优秀的J2EE平台开源社区,提供丰富的B2B和B2C平台下的各种技术资料和在线服务

北京ICP备0123456789号

网站统计

站长统计

目前在线人数是:

<%=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平台下的各种技术资料和在线服务

北京ICP备0123456789号

网站统计

站长统计

目前在线人数是:

<%=com.px1987.webcrm.util.OnLineCounter.getOnLineUserCounter()%>

人,

#FF9900;display:

none">

由于在本示例中需要定时向服务器发送请求,因此在并发请求比较高时,将会造成服务器的负载。

需要注意用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="none";

if(xmlHttpRequest.status==200){

//检查是否成功接收了服务器响应

parseServerResponseTextToBrowse();

}

elseif(xmlHttpRequest.status==404){

window.alert("所请求的服务器端的URL不存在!

");

}

else{

window.alert("你所请求的页面发生异常,错误代码为:

"+

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;

importcom.px1987.webcrm.util.OnLineCounter;

publicclassOnLineUserInfoServletextendsHttpServlet{

publicOnLineUserInfoServlet(){

super();

}

publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{

StringrequestAction=request.getParameter("action");

if(requestAction.equals("showOnLineUserCounter")){

doShowOnLineUserCounter(request,response);

}

}

publicvoiddoShowOnLineUserCounter(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{

response.setContentType("text/html;charset=gb2312");

PrintWriterout=response.getWriter();

intonlineUserCounter=OnLineCounter.getOnLineUserCounter();

out.print(onlineUserCounter);

out.flush();

out.close();

}

}

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 党团工作 > 入党转正申请

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1