客户端网页API（应用接口程序）

Web API 简介

什么是API

应用程序接口（API）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。

来看一个现实世界中的例子：想想您的房子、公寓或其他住宅的电力供应，如果您想在您的房子里使用一个设备，只要把电源插头插入插座即可，而不会直接把它连接到进户的电线上 - 这样做非常低效，而且如果您不是电工，这么做将是困难和危险的。

客户端JavaScript的API

客户端JavaScript中有很多可用的API — 他们本身并不是JavaScript语言的一部分，却建立在JavaScript语言核心的顶部，为使用JavaScript代码提供额外的超强能力。他们通常分为两类：

浏览器API内置于Web浏览器中，能从浏览器和电脑周边环境中提取数据，并用来做有用的复杂的事情。例如Geolocation API提供了一些简单的JavaScript结构以获得位置数据，因此您可以在Google地图上标示您的位置。在后台，浏览器确实使用一些复杂的低级代码（例如C++）与设备的GPS硬件（或可以决定位置数据的任何设施）通信来获取位置数据并把这些数据返回给您的代码中使用浏览器环境；但是，这种复杂性通过API抽象出来，因而与您无关。
第三方API缺省情况下不会内置于浏览器中，通常必须在Web中的某个地方获取代码和信息。例如Twitter API 使您能做一些显示最新推文这样的事情，它提供一系列特殊的结构，可以用来请求Twitter服务并返回特殊的信息。

JavaScript，API和其他JavaScript工具之间的关系

JavaScript — 一种内置于浏览器的高级脚本语言，您可以用来实现Web页面/应用中的功能。注意JavaScript也可用于其他象Node这样的的编程环境。但现在您不必考虑这些。
客户端API — 内置于浏览器的结构程序，位于JavaScript语言顶部，使您可以更容易的实现功能。
第三方API — 置于第三方普通的结构程序（例如Twitter，Facebook），使您可以在自己的Web页面中使用那些平台的某些功能（例如在您的Web页面显示最新的Tweets）。
JavaScript库 — 通常是包含具有特定功能的一个或多个JavaScript文件，把这些文件关联到您的Web页以快速或授权编写常见的功能。例如包含jQuery和Mootools
JavaScript框架 — 从库开始的下一步，JavaScript框架视图把HTML、CSS、JavaScript和其他安装的技术打包在一起，然后用来从头编写一个完整的Web应用。

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 元素中的像素数据以创建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

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发送短信息或多媒体信息等诸多功能。

Web浏览器的重要部分

web浏览器的软件中有很多活动的程序片段，而许多片段web开发人员无法使用JavaScript来控制或操作，因此Web浏览器是一个很复杂的软件组合。你可能认为这样的限制是不是好事，但是浏览器被锁定是有充分理由的，主要集中在安全方面。如果一个网站可以访问您存储的密码或其他敏感信息，犹如你一样登录到网站，试想会发生什么？

尽管有局限性，Web API仍然允许我们访问许多的功能，使我们用web页做很多事情。有几个在代码中经常引用的非常明显的部位 - 下面的图表表示了直接出现在web页面视图中的浏览器的主要部分：

window是载入浏览器的标签，在JavaScript中用Window对象来表示，使用这个对象的可用方法，你可以返回窗口的大小（参见Window.innerWidth和Window.innerHeight），操作载入窗口的文档，存储客户端上文档的特殊数据（例如使用本地数据库或其他存储设备），为当前窗口绑定event handler，等等。
navigator表示浏览器存在于web上的状态和标识（即用户代理）。在JavaScript中，用Navigator来表示。你可以用这个对象获取一些信息，比如来自用户摄像头的地理信息、用户偏爱的语言、多媒体流等等。
document（在浏览器中用DOM表示）是载入窗口的实际页面，在JavaScript中用Document 对象表示，你可以用这个对象来返回和操作文档中HTML和CSS上的信息。例如获取DOM中一个元素的引用，修改其文本内容，并应用新的样式，创建新的元素并添加为当前元素的子元素，甚至把他们一起删除。

文档对象模型

在浏览器标签中当前载入的文档用文档对象模型来表示。这是一个由浏览器生成的“树结构”，使编程语言可以很容易的访问HTML结构 — 例如浏览器自己在呈现页面时，使用它将样式和其他信息应用于正确的元素，而页面呈现完成以后，开发人员可以用JavaScript操作DOM。
这里你可以看到，文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点。你将用不同的术语来描述节点的类型和它们相对于其他节点的位置：

元素节点: 一个元素，存在于DOM中。
根节点: 树中顶层节点，在HTML的情况下，总是一个HTML节点（其他标记词汇，如SVG和定制XML将有不同的根元素）。
子节点: 直接位于另一个节点内的节点。例如上面例子中，IMG是SECTION的子节点。
后代节点: 位于另一个节点内任意位置的节点。例如上面例子中，IMG是SECTION的子节点，也是一个后代节点。IMG不是BODY的子节点，因为它在树中低了BODY两级，但它是BODY的后代之一。
父节点: 里面有另一个节点的节点。例如上面的例子中BODY是SECTION的父节点。
兄弟节点: DOM树中位于同一等级的节点。例如上面例子中，IMG和P是兄弟。
文本节点: 包含文字串的节点

基本的DOM操作

1.要操作DOM内的元素，首先要选择它，并将它的引用存储在一个变量中,你可以使用它的可用属性与方法来操作它，，首先更新Node.textContent属性的值来修改链接中的文字，在上面的代码后面加入一行代码

var link = document.querySelector(‘a’);
link.textContent = ‘Mozilla Developer Network’
link.href = ‘http://developer.mozilla.org’;

注意，和JavaScript中的许多事情一样，有很多方法选择一个元素，并在一个变量中存储一个引用。Document.querySelector()是比较推荐的方法，
对于多个元素，使用Document.querySelectorAll()。这个方法匹配文档中每个匹配选择器的元素。
对于获取元素引用，还有一些更老的方法，看情况选择使用。如：

Document.getElementById()，选择一个ID
Document.getElementByTagName（）返回页面中包含的所有已知类型元素的数组

创建并放置新的节点

首先获取selection元素的引用，

var sect = document.querySelector(‘selection’);

现在用Document.creatElement(‘p’)创建一个新的段落，用鱼之前相同的方法赋予相同的文本

var para = document.creatElement(‘p’);
para.textContent = ‘We hope you enjoyed thw ride’;

现在用 Node.appendChild()方法在后面追加新的段落：

sect.appendChild(para);

在内部链接的段落中添加文本节点

var text = document.createTextNode(’ — the premier source for web development knowledge.’);

移动和删除元素

如果你想把具有内部连接的段落移到section的底部，简单的做法是：

sect.appendChild(linkPara);

这样可以把段落下移到section的底部。你可能想过要做第二个副本，但是情况并非如此 — linkPara是指向该段落唯一副本的引用。如果你想做一个副本并也把它添加进去，只能用Node.cloneNode() 方法来替代。

删除节点也非常的简单，至少，你拥有要删除的节点和其父节点的引用。在当前情况下，我们只要使用Node.removeChild()即可，如下：

sect.removeChild(linkPara);

操作样式

直接在想要动态设置样式的元素内部添加内联样式，用HTMLElement.style属性来实现，这个属性包含了文档中

para.style.color = ‘white’;
para.style.backgroundColor = ‘black’;
para.style.padding = ‘10px’;
para.style.width = ‘250px’;
para.style.textAlign = ‘center’;

再次打开网页，此时样式已经改变了。

从服务器获取数据

Ajax模型包括使用webAPI作为代理来更加智能的请求数据，而不需要重新加载数据，没有意义：

页面更新速度加快
每次更新都会下载更少的数据，这意味着浪费更少的带宽

为了进一步提高速度，有些网站还会将后续的额数据将资产和数据存储在用户的计算机上，

基本的Ajax请求

第三方API

客户端存储

大多数现代的web站点是动态的— 它们在服务端使用各种类型的数据库来存储数据(服务端存储), 之后通过运行服务端（ server-side）代码来重新获取需要的数据，把其数据插入到静态页面的模板中，并且生成出HTML渲染到用户浏览上。
客户端存储以相同的原理工作，但是在使用上有一些不同。它是由 JavaScript APIs 组成的因此允许你在客户端存储数据 (比如在用户的机器上)，而且可以在需要的时候重新取得需要的数据。这有很多明显的用处，比如：

个性化网站偏好（比如显示一个用户选择的窗口小部件，颜色主题，或者字体）。
保存之前的站点行为 (比如从先前的session中获取购物车中的内容，记住用户是否之前已经登陆过)。
本地化保存数据和静态资源可以使一个站点更快（至少让资源变少）的下载，甚至可以在网络失去链接的时候变得暂时可用。
保存web已经生产的文档可以在离线状态下访问。

经常客户端和服务端存储是结合在一起使用的。例如，你可以从数据库中下载一个由网络游戏或音乐播放器应用程序使用的音乐文件，将它们存储在客户端数据库中，并按需要播放它们。用户只需下载音乐文件一次——在随后的访问中，它们将从数据库中检索。

传统方法：cookies

客户端存储的概念已经存在很长一段时间了。从早期的网络时代开始，网站就使用 cookies 来存储信息，以在网站上提供个性化的用户体验。它们是网络上最早最常用的客户端存储形式。
因为在那个年代，有许多问题——无论是从技术上的还是用户体验的角度——都是困扰着 cookies 的问题。这些问题非常重要，以至于当第一次访问一个网站时，欧洲居民会收到消息，告诉他们是否会使用 cookies 来存储关于他们的数据，而这是由一项被称为欧盟 Cookie 条例的欧盟法律导致的

新流派：web storage和 IndexedDB和未来：Cache API

Web Storage API 提供了一种非常简单的语法，用于存储和检索较小的、由名称和相应值组成的数据项。当您只需要存储一些简单的数据时，比如用户的名字，用户是否登录，屏幕背景使用了什么颜色等等，这是非常有用的
IndexedDB API 为浏览器提供了一个完整的数据库系统来存储复杂的数据。这可以用于存储从完整的用户记录到甚至是复杂的数据类型，如音频或视频文件。

存储简单数据 -web storage

Web Storage API 非常容易使用 — 你只需存储简单的键名/键值对数据 (限制为字符串、数字等类型) 并在需要的时候检索其值

基本语法

打开浏览器开发者工具的JavaScript控制台
你所有的 web storage 数据都包含在浏览器内两个类似于对象的结构中： sessionStorage 和 localStorage。第一种方法，只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失) ，而第二种会一直保存数据，甚至到浏览器关闭又开启后也是这样。我们将在本文中使用第二种方法，因为它通常更有用
Storage.setItem() 方法允许您在存储中保存一个数据项——它接受两个参数：数据项的名字及其值。试着把它输入到你的JavaScript控制台（如果你愿意的话，可以把它的值改为你自己的名字！

localStorage.setItem(‘name’,‘Chris’);

Storage.getItem() 方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。现在将这些代码输入到你的JavaScript控制台：

var myName = localStorage.getItem(‘name’);
myName

Storage.removeItem() 方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中删除该数据项。在您的JavaScript控制台中输入以下几行：

localStorage.removeItem(‘name’);
var myName = localStorage.getItem(‘name’);
myName

在输入第二行时，您应该会看到 myName变量现在包含name数据项的值。

Storage.removeItem() 方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中删除该数据项。在您的JavaScript控制台中输入以下几行：