基于对象的编程语言。
Navigator.geolocation
属性, 它返回浏览器的 Geolocation
对象,所有有用的地理定位方法都可用
一些Web API不包含事件,但有些包含一些事件。当事件触发时,允许我们运行函数的处理程序属性通常在单独的 “Event handlers”(事件处理程序) 部分的参考资料中列出。作为一个简单的例子,XMLHttpRequest
对象的实例 (每一个实例都代表一个到服务器的HTTP请求,来取得某种新的资源)都有很多事件可用,例如 onload
事件在成功返回时就触发包含请求的资源,并且现在就可用。
下面的代码提供了一个简单的例子来说明如何使用它:
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function() { var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); }
注意:您可以在我们的ajax.html示例中看到此代码 (或者 在线运行版本 see it live also).
前五行指定了我们要获取的资源的位置,使用XMLHttpRequest()
构造函数创建请求对象的新实例 ,打开HTTP 的 GET
请求以取得指定资源,指定响应以JSON格式发送,然后发送请求。
然后 onload
处理函数指定我们如何处理响应。 我们知道请求会成功返回,并在需要加载事件(如onload
事件)之后可用(除非发生错误),所以我们将包含返回的JSON的响应保存在superHeroes
变量中,然后将其传递给两个不同的函数以供进一步处理。
在适当的地方有额外的安全机制
WebAPI功能受到与JavaScript和其他Web技术(例如同源政策)相同的安全考虑 但是他们有时会有额外的安全机制。例如,一些更现代的WebAPI将只能在通过HTTPS提供的页面上工作,因为它们正在传输潜在的敏感数据(例如 服务工作者 和 推送)。
另外,一旦调用WebAPI请求,用户就可以在您的代码中启用一些WebAPI请求权限。作为一个例子,在加载我们之前的Geolocation 示例时,您可能注意到了类似下面的对话框 :
该 通知API 请求以类似的方式许可:
这些许可提示会被提供给用户以确保安全 - 如果这些提示不在适当位置,那么网站可能会在您不知情的情况下开始秘密跟踪您的位置,或者通过大量恼人的通知向您发送垃圾邮件。
存储服务
浏览器API
- 操作文档的API内置于浏览器中。最明显的例子是DOM(文档对象模型)API,它允许您操作HTML和CSS — 创建、移除以及修改HTML,动态地将新样式应用到您的页面,等等。每当您看到一个弹出窗口出现在一个页面上,或者显示一些新的内容时,这都是DOM的行为。 您可以在在Manipulating documents中找到关于这些类型的API的更多信息。
- 从服务器获取数据的API 用于更新网页的一小部分是相当好用的。这个看似很小的细节能对网站的性能和行为产生巨大的影响 — 如果您只是更新一个股票列表或者一些可用的新故事而不需要从服务器重新加载整个页面将使网站或应用程序感觉更加敏感和“活泼”。使这成为可能的API包括
XMLHttpRequest
和Fetch API。您也可能会遇到描述这种技术的术语Ajax。您可以在Fetching data from the server找到关于类似的API的更多信息。 - 用于绘制和操作图形的API目前已被浏览器广泛支持 — 最流行的是允许您以编程方式更新包含在HTML
<canvas>
元素中的像素数据以创建2D和3D场景的Canvas和WebGL。例如,您可以绘制矩形或圆形等形状,将图像导入到画布上,然后使用Canvas API对其应用滤镜(如棕褐色滤镜或灰度滤镜),或使用WebGL创建具有光照和纹理的复杂3D场景。这些API经常与用于创建动画循环的API(例如window.requestAnimationFrame()
)和其他API一起不断更新诸如动画和游戏之类的场景。 - 音频和视频API例如
HTMLMediaElement
,Web Audio API和WebRTC允许您使用多媒体来做一些非常有趣的事情,比如创建用于播放音频和视频的自定义UI控件,显示字幕字幕和您的视频,从网络摄像机抓取视频,通过画布操纵(见上),或在网络会议中显示在别人的电脑上,或者添加效果到音轨(如增益,失真,平移等) 。 - 设备API基本上是以对网络应用程序有用的方式操作和检索现代设备硬件中的数据的API。我们已经讨论过访问设备位置数据的地理定位API,因此您可以在地图上标注您的位置。其他示例还包括通过系统通知(参见Notifications API)或振动硬件(参见Vibration API)告诉用户Web应用程序有用的更新可用。
- 客户端存储API在Web浏览器中的使用变得越来越普遍 - 如果您想创建一个应用程序来保存页面加载之间的状态,甚至让设备在处于脱机状态时可用,那么在客户端存储数据将会是非常有用的。例如使用Web Storage API的简单的键 - 值存储以及使用IndexedDB API的更复杂的表格数据存储。
第三方API节
第三方API种类繁多; 下列是一些比较流行的第三方API:
- The Twitter API, 允许您在您的网站上展示您最近的推文等。
- The Google Maps API 允许你在网页上对地图进行很多操作(这很有趣,它也是Google地图的驱动器)。现在它是一整套完整的,能够胜任广泛任务的API。其能力已经被Google Maps API Picker见证。
- The Facebook suite of API 允许你将很多Facebook生态系统中的功能应用到你的app,使之受益,比如说它提供了通过Facebook账户登录、接受应用内支付、推送有针对性的广告活动等功能。
- The YouTube API, 允许你将Youtube上的视频嵌入到网站中去,同时提供搜索Youtube,创建播放列表等众多功能。
- The Twilio API, 其为您的app提供了针对语音通话和视频聊天的框架,以及从您的app发送短信息或多媒体信息等诸多功能。