使用 Google Gears 开发离线应用(3)检测网络状况
- UID
- 1066743
|
使用 Google Gears 开发离线应用(3)检测网络状况
检测网络状况要为传统的基于 Ajax 的 Web 应用添加离线应用的功能,首先要让它拥有实时检测网络状况的能力。
一,我们将编写 js 代码用于检测用户的网络状况。
在 common.js 原有代码的基础上添加如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| //-------------------------------------------------------------------------
/*
* 以下方法用于检测网络状况
*/
/**
* sendRequestForCheck
* 定期向服务器上的home.jsp发送请求,用来检测网络状况
* home.jsp是空代码文件,在应用中不做任何操作
*/
function sendRequestForCheck() {
createXMLHttpRequest();
var url = "home.jsp";
request.open("GET", url, true);
request.onreadystatechange = processCurrentResponse;
request.send(null);
}
/**
* processCurrentResponse
*
* 根据请求的状态参数来判断网络状况
*/
function processCurrentResponse() {
if(request.readyState == 4) {
try{
if(request.status == 200) {
setPageStatus("online");
} else{
setPageStatus("offline");
}
}catch(ex) {
setPageStatus("offline");
}
}
}
/**
* setPageStatus
* 页面上显示出网络状况(离线状态或者在线状态)
*/
function setPageStatus(sta){
if(sta=="online"){
addStatus("online");
document.getElementById('sync').disabled = false;
setTimeout("sendRequestForCheck()", 1000);
}else{
addStatus("offline");
document.getElementById('sync').disabled = true;
setTimeout("sendRequestForCheck()", 1000);
}
}
/**
* addStatus
* 显示出数据
*/
function addStatus(message){
var status = document.getElementById("status");
status.innerHTML = message;
}
|
二,修改 index.jsp 代码,在 <div id="buttom" class="frame"> </div> 内添加代码如下:
1
2
3
4
| <div id="buttom" class="frame">
status:<span id="status"></span>
<input type="button" value="sync" onclick="asyncExc()" id="sync"/>
</div>
|
在 <body> 标签里加上:
1
| <body onLoad="sendRequestForCheck();">
|
三,创建相应文件。
选中 gears 项目单击右键,New->Other 里选择 JSP,命名为“home.jsp”。在 home.jsp 里把所有的源代码都删除掉,即 home.jsp 是空代码文件。
图 10. 创建 JSP 文件四,测试。启动 Tomcat,打开 index.jsp。网页的底部将出现网络状态的显示。暂时先不理睬 sync 按钮的用途。
图 11. 网络状态显示如果是单机版的测试运行(服务器和客户端是同一台机器),我们可以关闭 Tomcat 服务器来模拟客户端断线的情景(服务器与客户端失去连接,即网线离线)。关闭 Tomcat 后,您将看到网页显示的状态变为 offline。
图 12. 关闭 Tomcat 后的网络状态在解释一下 JS 代码的用途:在服务器端有一个 home.jsp(空代码文件),是为了让客户端的 js 代码发送请求检测而用,如果客户端与服务器失去连接,则客户端无法访问到服务器的 home.jsp,根据请求的返回参数可以判断客户端是离线状态。而 home.jsp 在应用中没有任何用途。 |
|
|
|
|
|