当前位置: 首页 > 互联网 > 正文

《HTML5揭秘》笔记五

主要理解离线应用,Web服务器通信,地理位置信息,WebWorker及历史管理方面的三个高级javascript技术。离线应用要求的是即使在网络无法连接的情况下,我们的web应用还能通过缓存技术进行操作,这需要考虑那些缓存文件需要保存到本地,那些文件必需联网,那些文件可替换的cache文件配置,还包括Web服务器的MIME设置,从而保证离线应用的正常使用。Web服务器通信讲的是如何保持服务端与客户端的定时消息传递或推送,目前有两种通用的方法,消息轮询及WebSocket方法。地理位置信息允许浏览器通过javascript获取访客当前地理坐标,从而开发与地图等相关的web应用。Web Worker允许后台js处理那些费时的任务,而不影响前端的正常操作。历史管理,通过它来修改浏览器地址栏中的URL,而不会导致页面的刷新。这种技术,特别适合动态加载新内容,同时无阻滞地更新页面的应用。

离线应用

通过描述文件缓存资源:1)创建描述文件;2)修改网页;3)配置web服务器。

创建缓存描述文件,如app.appcache;

[code]
CACHE MANIFEST
#pages
index.html

#styles & scripts
default.css
index.js

#picture & fonts
Image/emotional_bear.jpg
Fonts/museo_slab_500-webfont.ttf
[/code]

修改要缓存的网页,如上述index.html网页:

[code lang=”html”]
<!DOCTYPE html>
<html manifest="app.appcache">
<head>
<title>缓存网页</title>
</head>
<body>
Hello World!
</body>
</html>
[/code]

配置web服务器,需添加添加相应的MIME类型,供服务器识别,浏览器识别与下载。在模拟的时候,要断开远程服务器的网络。

缓存文件其他区块:NETWORK表示必须联网;FALLBACK区块,第一个文件名表示在线时使用的文件名,第二个文件名是离线后备文件名。

检测链接:下列代码,表示在线时使用online.js而离线时使用offline.js,这两个js都有一个同名函数isSiteOnline一个返回true,一个返回false,然后在其它的js脚本中就可以用这个函数方法来判断是否在线。

[code]
CACHE MANIFEST
FALLBACK:
online.js offline.js
[/code]

Web服务器通信

XMLHttpRequst对象,异步请求方法,示例代码:

[code lang=”js”]
var req = new XMLHttpRequest();

function askServer() {

var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;

var dataToSend = "?number1=" + number1 + "&number2=" + number2;
req.open("GET", "WebCalculator.php" + dataToSend, true);
req.onreadystatechange = handleServerResponse;
req.send();

document.getElementById("result").innerHTML = "The request has been sent.";
}

function handleServerResponse() {
if ((req.readyState == 4) && (req.status == 200))
{
var result = req.responseText;
document.getElementById("result").innerHTML = "The answer is: " + result;
}
}
[/code]

轮询服务器端事件,通过服务端不停的向客户端发送数据完成。客户端代码:

[code lang=”js”]
var messageLog;
var timeDisplay;
var source;

window.onload = function() {
messageLog = document.getElementById("messageLog");
timeDisplay = document.getElementById("timeDisplay");
}

function startListening() {
source = new EventSource("TimeEvents.php");
source.onmessage = receiveMessage;
messageLog.innerHTML += "<br>" + "Started listening for messages."
}

function stopListening() {
source.close();
messageLog.innerHTML += "<br>" + "No longer listening for messages."
}

function receiveMessage(event) {
messageLog.innerHTML += "<br>" + "New web server time received: " + event.data;
timeDisplay.innerHTML = event.data;
}
[/code]

服务端代码:

[code lang=”php”]
<?php
header(‘Content-Type: text/event-stream’);
header(‘Cache-Control: no-cache’);

// 告诉浏览器在连接关闭后,等待2分钟再重新连接。
echo ‘retry: 120000’ . PHP_EOL;

// 清除缓冲区的内容,并将缓冲区关闭,但不会输出内容。
ob_end_clean();

// 保存开始时间
$startTime = time();

do {
// 发送消息
$currentTime = date(‘h:i:s’, time());
echo ‘data: ‘ . $currentTime . PHP_EOL;
echo PHP_EOL;

flush();

// 如果超过了1分钟,结束脚本。
if ((time() – $startTime) > 60) {
die();
}

// 等5秒钟,发送新消息。
sleep(5);
} while(true);
?>
[/code]

WebSocket通信。

地理位置信息

可通过浏览器的坐标位置信息,查找访客的位置:

[code lang=”js”]
var results;

window.onload = function() {
results = document.getElementById("results");

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
geolocationSuccess, geolocationFailure
);

results.innerHTML = "The search has begun.";
} else {
results.innerHTML = "This browser doesn’t support geolocation.";
}
}

function geolocationSuccess(position) {
results.innerHTML = "You were last spotted at (" +
position.coords.latitude + "," + position.coords.longitude + ")" +
" with an accuracy of " + position.coords.accuracy + " meters.";
}

function geolocationFailure(positionError) {
switch (positionError.code) {
case 1:
results.innerHTML = "You decided not to share, but that’s OK. We won’t ask again.";
break;
case 2:
results.innerHTML = "The network is down or the positioning service can’t be reached.";
break;
case 3:
results.innerHTML = "The attempt timed out before it could get the location data.";
break;
case 0:
results.innerHTML = "This the mystery error. Something else happened, but we don’t know what.";
break;
}
}
[/code]

Web Workers

Web Worker对象,能够在后台完成工作,声明一个Web Worker对象:var worker = new Worker(“Worker.js”);向workder传递消息及参数worker.postMessage(myData);处理worker返回的消息:worker.onmessage = receivedWorkerMessage;worker的错误处理方法:worker.onerror = workerError ;取消后台worker任务,调用worker.terminate()方法。上述receivedWorkerMessage与workerError都是需要单独定义的方法函数。

历史管理

history.pushState(null,null,”ChinaSites4.html”);第三个参数ChinaSites4.html是要在浏览器中出现的内容。示例代码:

[code lang=”js”]
var slideNumber;
var req = new XMLHttpRequest();

window.onload = function() {
slideNumber = 0;
}

window.onpopstate = function(e) {
if (e.state != null) {
slideNumber = e.state;
goToNewSlide();
}
}

function nextSlide() {
if (slideNumber == 5) {
slideNumber = 1;
} else {
slideNumber += 1;
}

history.pushState(slideNumber, null, "ChinaSites" + slideNumber + ".html");
goToNewSlide();
return false;
}

function goToNewSlide() {
if (req != null) {
req.open("GET", "ChinaSites" + slideNumber + "_slide" + ".html", true);
req.onreadystatechange = newSlideReceived;
req.send();
}
else {
// There was a problem. Ignore it.
}
}

function previousSlide() {
if (slideNumber == 1) {
slideNumber = 5;
} else {
slideNumber -= 1;
}

history.pushState(slideNumber, null, "ChinaSites" + slideNumber + ".html");
goToNewSlide();
return false;
}

function newSlideReceived() {
if ((req.readyState == 4) && (req.status == 200))
{

document.getElementById("slide").innerHTML = req.responseText;
}
}
[/code]

小结

这些HTML5技术感觉到人耳目一新,让人眼前一亮。并不是说这些技术有多牛,而是说这些技术让我感受到HTML5的强大与新颖。这是我这个未熟知Html世界的人的最大感触。我也相信在接下的技术学习中,这些新的知识一定会给我今后的web开发带来很多启示,一定会把应用做的比以前更好。我想,这也是我学习本书的目的吧。

本文固定链接: http://www.byhard.com/?p=1356 | 海纳百川

该日志由 byhard 于2015年04月17日发表在 互联网 分类下,
原创文章转载请注明: 《HTML5揭秘》笔记五 | 海纳百川
关键字: ,
【上一篇】
【下一篇】

《HTML5揭秘》笔记五:目前有2 条留言

  1. 正好这段时间自学这个呢

    2015-04-22 22:49
    • byhard:

      呵呵,网站搞的不错,谢谢来访。

      2015-04-23 08:33