您所在的位置:开发 > Web > 热点推荐 > HTML 5基础之HTML 5 API的威力(1)

HTML 5基础之HTML 5 API的威力(1)

2011-07-14 09:16 Elaine.Ye 译言网 字号:T | T
一键收藏,随时查看,分享好友!

HTML5反映了在网络上和在云端实施业务的方式的巨大变化。本篇文章分三部分介绍了HTML5的API,使用一个例子页面来说明它们的功能。

AD:

本篇文章是一个由四个部分构成的系列的第三部分,该文章系列旨在寻找并突出说明HTML5中的变化。其开始先介绍新的标签和页面的组织,接着提供一些网页设计方面的高层面信息,然后是表单的创建,以及API的使用及其价值所在,最后是Canvas提供的一些颇具创意的可能做法。这一第三部分介绍了HTML5的API,使用一个例子页面来说明它们的功能。

那么,什么是API呢?

应用编程接口(application program interface,API)是访问一个软件应用的编程指令和标准的集合。通过使用API,你就可以设计出由API提供的服务来驱动的产品。

HTML5拥有一些新的API,例如:

1. 一个与新的画布元素一起使用的2D绘图API,用于渲染图形或是其他的视觉图像

2. 一个支持离线web应用的缓存机制的API

3. 一个播放视频和音频的API,与新的视频和音频元素一起使用

4. 一个历史记录API,其把浏览历史变成可访问的,并允许把页面添加到这一历史中

5. 一个和draggable属性一起使用的拖放API

6. 一个和contenteditable属性一起使用的编辑API

7. 键-值对以及内嵌的SQL数据库的客户端存储,使用了JavaScript API

本篇文章重点关注两个API:Geolocation和Web Worker,首先对这些API本身进行分析,然后创建一个包含这两个API的页面。

无处不在的业务:Geolocation

Geolocation API被用来确定和分享地理位置,API返回经度和纬度坐标——这是企业可用来在这一坐标附近的区域提供服务的信息,这类服务通常被称作基于位置的服务(location-based service, LBS)。

LBS以地理数据源为参考,这些地理数据源被用来标识被监控仪器的物理位置,从而识别出与这一位置相关的人。这一功能赋予感兴趣的各方与这一个人进行交互的机会,这种交互是基于一些以地理位置为中心的兴趣点市场来进行的。

商业实际上是为客户创造品质、实用性和价值,并同时为利益相关者、债权人、股东、员工和供应商创造经济和金融利益。以地理位置为驱动力的LBS使得跟踪和监控一个包裹或是使用了非浏览器设备或是浏览器的个人变得相当容易起来。从商业化的角度来说,地理位置所涉及的就是使用地理资产来确定某人或是某物所处的位置,然后把这一特定的一组信息出售给想要把这些信息用于社会、商业或是其他目的的的任何人,只要信息的拥有者的这种做法是法律许可的就可以了。

地理定位(geolocation)的工作方式

Geolocation API基于navigator这一全局对象的一个新属性:navigator.geolocation,这一JavaScript的navigator对象提供了一些关于访问者的浏览器和系统的有用信息。Geolocation可以确定使用了IP地址、基于web的数据库、无线网络连接,以及三角定位或是GPS技术的访问者的经度和纬度。应该要注意的一点是,由Geolocation提供的信息的准确性会基于获取信息的手段而发生变化。偶然情况下,在一些位置上,你有可能不能获得明确的地理位置读数或是一点数据都接收不到。

脚本可使用navigator.geolocation对象来确定与用户的宿主设备相关的位置信息,在检索到位置信息之后,一个位置对象就会被创建出来,并使用这些数据做填充。

navigator.geolocation对象有三个方法:

1. getCurrentPosition()

2. watchPosition()

3. clearWatch()

getCurrentPosition()方法

getCurrentPosition()方法检索用户的当前位置,但只检索一次。当该方法被脚本调用时,方法以异步的方式来尝试获取宿主设备的当前位置。异步通信意味着发送者和接收者并未同时地加入到这一通信过程中,使用异步通信能让浏览器继续进行其他方面的活动,这样它就无需等待来自接收实体的响应。

getCurrentPosition()方法最多可以有三个参数:

1. geolocationSuccess:带回当前位置的回调(callback)(必需的)

2. geolocationError. 有错误发生时使用的回调(可选的)

3. geolocationOptions. 地理位置选项(可选的)

navigator.geolocation.getCurrentPositon()方法使用一个Position对象作为参数来把宿主设备的当前位置返回给geolocationSuccess这一回调,如果有错误发生的话,geolocationError回调会使用一个PositionError对象来做调用。你可以设置geolocationOptions的三个属性:

enableHighAccuracy、timeout和maximumAge,这些可选属性相应的作用分别是启用了高的精确性,如果设备支持这种高精确性的话;一个超时时段,这是位置应该被返回的最长等待时间;以及一个最大的时间数,缓存的位置在这一时间段内可被使用。

getCurrentPosition()方法的调用如下所示:

  1. void navigator.geolocation.getCurrentPosition(  
  2. geolocationSuccess, geolocationError, geolocationOptions); 

watchPosition()方法

watchPosition()方法定期轮询用户的位置,查看用户的位置是否发生改变。其最多可带三个参数。

当watchPosition被调用时,其异步地启动一个查看过程,这一过程涉及了一个新的Position对象的获取和一个watchID的创建。如果这一获取操作是成功的,则相关的使用一个Position对象作为参数的geolocationSuccess就会被调用。在失败时涉及的操作则是使用一个非空的geolocationError参数来调用该方法,watchPosition方法使用一个PositionError对象作为参数来生成geolocationError。当设备的位置发生改变时,一个合适的带有新的Position对象的回调就会被调用。

watchPosition()方法的调用如下所示:

  1. long navigator.geolocation.watchPosition(  
  2. geolocationSuccess, geolocationError, geolocationOptions);  

clearWatch()方法

clearWatch()方法终止正在进行的watchPosition(),该方法只能带一个参数。在调用时,其找到之前已经开始了的watchID参数并立即停止它。

clearWatch()方法的调用如下所示:

  1. void navigator.geolocation.clearWatch(watchID)  

Geolocation数据:Position对象

Geolocation API返回一个地理上的Position对象,该对象有两个属性:timestamp和coords。timestamp属性表示地理位置数据的创建时间,coords属性又包含七个属性:

1. coords.latitude:估计纬度

2. coords.longitude:估计经度

3. coords.altitude:估计高度

4. coords.accuracy:所提供的以米为单位的经度和纬度估计的精确度

5. coords.altitudeAccuracy:所提供的以米为单位的高度估计的精确度

6. coords.heading: 宿主设备当前移动的角度方向,相对于正北方向顺时针计算

7. coords.speed:以米每秒为单位的设备的当前对地速度

这些属性中只有三项是保证有的:coords.latitude、coords.longitude和coords.accuracy,其余的返回null,这取决于设备的能力和其所采用的后端定位服务器。如果可能的话,heading和speed属性可以基于用户之前的位置计算出来。

发挥救援作用的web worker

web worker(web工作线程)补救了并发所引起的问题,web worker是HTML5家族对JavaScript的单线程问题的回答:它们在与主页面分开的线程中运行处理过程,保留页面以用于主要的功能,比如说维持一个稳定的UI等。

一个web worker是一个在后台加载并执行的JavaScript文件,这些worker允许你动态地加载一个JavaScript,然后使用后台的不会影响到UI的进程来执行脚本。web worker的访问是受限的,其只允许传递字符串。因为web worker不使用浏览器的UI线程,所以他们不允许访问DOM。worker可以使用这两个worker全局范围的self和this引用,worker和父页面的通信是通过使用事件模型和postMessage()方法来实现的。

因为web worker有多线程行为,因此它们只能访问JavaScript功能的一个子集,web worker可以:

1. 访问navigator对象

2. 使用只读的位置对象

3. 执行XMLHttpRequest以发送HTTP或是HTTPS请求

4. 使用setTimeout()/clearTimeout()和setInterval()/clearInterval()来设置时间或是时间间隔

5. 访问应用的缓存

6. 使用 importScripts()方法来导入外部的脚本

7. 产生其他的web worker(子worker(subworker)必需有着与主页面一样的来源,且必须放置于与父worker同样的地点。

web worker有两种类型:专用型的worker和共享型的worker。

专用型web worker

专用型worker与创建它的脚本链接在一起,它可以与其他的worker或是浏览器组件通信,但是他不能与DOM通信。

专用型worker的创建方法是把一个JavaScript文件名传递给一个新的worker实例,通过指定worker的执行脚本URI来使用Worker()构造函数创建一个新的worker。要创建一个专用型worker的话,输入下面给出的代码,这一代码创建了一个新的专用的Worker对象:

  1. var worker = new Worker('worker.js'); 

共享型web worker

共享型web worker和专用型worker一样,不能访问DOM,并且是受限地访问窗体的属性。共享型web worker只能与其他来自同一个域的共享型web worker通信,它的创建方法是把一个JavaScript名称传递给一个新的共享型worker的实例来创建。

页面脚本可以与共享型web worker通信,而然,与专用型web worker不同的是,通信是通过使用一个端口(port)对象并附加上一个消息事件处理程序来进行的。另外,在使用第一个postMessage()之前,你必须要调用端口的start()方法。

在收到web worker脚本的首个消息之后,共享型web worker把一个事件处理程序附加到激活的端口上。一般情况下,处理程序会运行自己的postMessage()方法来把一个消息返回给调用代码,接着端口的start()方法生成一个有效的消息进程。

为了创建一个共享型web worker,你必须要创建一个SharedWorker对象而不是一个Worker对象。下面的代码说明了如何创建一个新的SharedWorker对象:

  1. var worker = new SharedWorker('worker.js'); 

构造一个包含了这两个API的页面

你将设计一个包含了Geolocation和Web Worker API的基本工作模式的页面,此外,你还会用到Google Map API来渲染作为地图收集来的数据。

页面的组织如图1所示,其包含了一个使用< header>< /header>标签来创建的Header区,一个使用< section>< /section>标签来创建的Section区,以及一个使用< aside>< /aside>标签来创建的Aside区。

图1. API页面的布局

HTML 5


< section>和< aside>区包含了API,Section区包含了Geolocation API,Aside区包含了web worker,其用来计算素数。

在执行时,网页的显示如图2所示。如果要查看地理位置数据的话,你首先必须要同意共享你的信息。web worker在页面加载时启动,如果你想看一看找到的素数的话,点击Display Web Worker按钮。

图2. API网页

HTML 5 

内容导航
 第 1 页:那么,什么是API呢?  第 2 页:HTML文件
 第 3 页:JavaScript文件



分享到:

热点职位

更多>>

热点专题

更多>>

读书

SQL Server 2005中文版精粹
本书内容包括: ● 框架的总览:SQL Server 2005的功能是如何集成在一起的,以及这些功能对于用户的意义。 ● 安全性

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i