网站首页 > 技术文章正文

「JavaScript 从入门到精通」18.WebApi介绍

hmc789 2024-11-11 12:49:09 技术文章 2 ℃

前置知识：

需要了解 JS 对象的相关知识。

1.WebAPI介绍

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

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

浏览器API：
内置于Web浏览器，可以从浏览器和电脑周围环境获取数据，并用于复杂的操作。例如Geolocation API提供了一些简单的JavaScript结构来获取位置数据，这种API通常抽象很多复杂逻辑，我们只要调用API即可。
第三方API：
缺省情况下不会内置于浏览器，而必须在Wen中某个地方获取代码和信息，例如Twitter API可以推送最新推文给我们，它提供一系列第三方API让我们获取Twitter的服务和信息。

1.1 API如何工作

那么，这些API是如何工作的？

不同的JavaScript的API工作内容不同，但具有以下几个相同点：

都是基于对象
API通过使用一个或多个JavaScript对象与我们的代码交互，这些对象作为API使用的数据（包含在对象属性中）的容器，和API提供的功能（包含在对象的方法中）。
如Geolocation API则是由以下几个对象组成：

Geolocation, 包含三种控制地理数据检索的方法。
Position, 表示在给定的时间的相关设备的位置。它包含一个当前位置的Coordinates 对象。还包含了一个时间戳,这个时间戳表示获取到位置的时间。
Coordinates,包含有关设备位置的大量有用数据，包括经纬度，高度，运动速度和运动方向等。

通常这么使用：

都有可识别的入口点即API的入口位置，如Geolocation API的入口在Navigator.geolocation 属性, 它返回浏览器的 Geolocation 对象，所有有用的地理定位方法都可用。
在**文档对象模型(DOM)**的API入口位置更简单，常常都挂载在Document对象上，或者HTML元素上：

详细的后面介绍。

都使用事件来处理状态的变化有些特定的API会包含一些事件，当事件触发，我们便可以运行函数的处理属性，做一些不同的操作。例如XMLHttpRequest对象的实例，有很多的事件可以调用。

都会在适当位置提供额外的安全机制主要还是处于安全考虑，提供额外的安全机制，比如常见同源策略，一些特定页面只能在https协议的网页工作等。

接下来看看这些API都能实现什么作用。

2.文档API

我们在开发web页面和应用时，就会经常操作页面文档的结构，这里就会大量用到document对象，控制HTML和样式信息的文档对象模型（DOM）。

下面贴一张web页面视图中的浏览器的主要部分（来源MDN）：

介绍：

window：是载入浏览器的标签，JavaScript中用Window对象表示，可以实现很多操作：获取窗口大小，操作载入窗口的文档，存储文档数据等。
navigator：浏览器存在web上的状态和表示（即用户代理），JavaScript中用Navigator对象表示，用于获取对象的一些信息，如：摄像头的地理信息，用户偏爱的语言等。
document：是实际载入窗口的页面，JavaScript中用Document对象表示，可以实现很多文档操作：获取DOM元素，修改文本内容，设置新样式等。

2.1 文档对象模型(DOM)

在浏览器标签中当前载入的文档用文档对象模型(Document Object Model，简称DOM)表示。

这是一个由浏览器生成的“树结构”，使得编程语言可以很容易访问HTML结构，操作等。

下面是基本的DOM操作：

这么一个简单的例子，实际可以看出DOM提供的方法很多，下面分类介绍下这些方法：

DOM HTML操作

改变HTML输出流：
通过document.write()直接修改HTML输出流写内容。

document.write("hello leo");

**注意：**千万不要在文档加载之后使用，否则覆盖文档。

改变HTML内容：
通过innerHTML属性来改变HTML元素的内容：

例子：

document.getElementById("id1").innerHTML = "hello leo!"

改变HTML属性：
通过attribute属性来改变元素的属性：

document.getElementById(id).attribute = new value

例子：

<img id = "id1" src ="a.jpg">
document.getElementById("id1").src = "leo.png";

详细的文档可以查看HTML DOM Document 对象

DOM CSS操作

改变HTML样式
通过style.styleName属性修改元素的样式：

document.getElementById(id).style.property = new style;

例子：

注意：style后面的样式的属性名只能使用命名小驼峰。

DOM 事件操作
如要对元素做点击事件的绑定，可以在HTML的onclick事件属性上绑定方法：

另外可以绑定的事件类型还有很多：

详细的文档可以查看HTML DOM Event 对象

DOM 节点操作

创建新的HTML元素
需要先创建一个新元素节点，然后在使用appendChild方法，向一个已存在的元素上追加这个新元素：

删除已有的HTML元素
如果需要删除HTML元素，就必须先获得该元素的父元素，再使用removeChild方法删除：

2.2 Window对象

Window 对象表示浏览器中打开的窗口。

Window 对象涉及到的属性和方法非常多，具体可以查看 Window 对象比较详细。

这里一个简单的例子，实现获取视窗（显示文档的内部窗口）的宽高，并设置给指定的Div元素，并且当我们调整窗口时候，也会及时改变Div的宽高。

3.获取服务器数据API

这一部分主要复习Ajax（全称：Asynchronous JavaScript and XML）。

Ajax主要要解决的问题是：避免重复加载刷新整个页面，因为有时候我们只是小部分数据更新，这时候我们这要刷新这部分的数据，而不是整个页面。

Ajax不是新的编程语言，而是一种使用现有标准的新方法。

下面看一下Ajax模型图：

Ajax模型包括使用Web API作为代理来更智能地请求数据，而不仅仅是让浏览器重新加载整个页面。让我们来思考这个意义：

比如：我们逛淘宝，搜索或打开商品页面时，顶部导航来和页眉页脚等，都保持不变。

这样做的好处：

页面更新更快，减少等待刷新，体验更好，响应更快。
下载的数据更少，减少带宽的浪费。

另外为了提高加载速度，网站有时候也会将首次请求和数据存储在用户计算机中，下次再请求就直接先使用本地版本，如果内容有更新才会去服务器获取新数据，原理图：

3.1 Ajax基础使用

XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

创建 XMLHttpRequest 对象的语法：

为了兼容所有浏览器（包括IE5 IE6），我们就必须检查浏览器是否支持XMLHttpRequest对象，若支持则创建XMLHttpRequest对象，否则创建ActiveXObject对象。

3.2 Ajax发送请求

向服务器发送请求时，我们可以使用 XMLHttpRequest 对象的 open() 和 send() 方法：

my_http.open(method,url,async); 
my_http.send(string);

参数解释：

open(method,url,async)方法接收三个参数：

method：请求的类型；GET 或 POST。
url：文件在服务器上的位置。
async：true（异步）或 false（同步）。

send(string)方法接收一个参数：

string：仅用于 POST 请求。

例子：

如果POST请求的话需要设置HTTP头：

setRequestHeader(header,value)

参数解释：

setRequestHeader(header,value)方法接收两个参数：

header: 规定头的名称。
value: 规定头的值。

3.3 Ajax服务器响应

接收服务器响应，我们可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
responseText属性当服务端的响应不是XML，使用responseText属性。
若是字符串的响应就可以直接使用。

document.getElementById("id1").inndeHTML = my_http.responseText;

3.4 Ajax readyState

readyState保存着XMLHttpRequest对象的状态。

我们发送Ajax请求的整个过程中，XMLHttpRequest对象的readyState会改变，当readyState改变的时候会触发onreadystatechange事件。

XMLHttpRequest对象的三个重要属性：

属性描述onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0（请求未初始化），1（服务器连接已建立），2（请求已接收），3（请求处理中），4（请求已完成，且响应已就绪）status200（"OK"），404（未找到页面）

通常我们会在readyState等于4且status等于200时候表示响应已就绪，可以执行业务操作：

if (xmlhttp.readyState==4 && xmlhttp.status==200){
 // 网络请求成功后，执行的操作
}

4.图形绘制API

这里主要介绍的是HTML5新增的canvas元素，JavaScript为canvas添加了很多API，进一步增强canvas。

canvas 元素可以通过JavaScript脚本，在网页上绘制图形。

比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持canvas元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。

详细完整的课程推荐：

MDN Canvas教程
W3C HTML5 Canvas

下面复习一下canvas的一个使用流程：

4.1 简单绘制

创建画布，规定元素id、宽度和高度

要在网页中创建 2D 或者 3D 场景，必须在 HTML 文件中插入一个canvas元素，以界定网页中的绘图区域。

<canvas id="id1" width="200" height="100">
 卧槽你的浏览器竟然不支持 canvas！
</canvas>

在canvas标签内，写一些浏览器不支持画布功能时候的提示内容。

画布默认尺寸为 300 × 150 像素。

获取画布上下文，并完成设置

我们需要获得一个对绘画区域的特殊的引用（称为“上下文”）用来在画布上绘图。可通过 HTMLCanvasElement.getContext() 方法获得基础的绘画功能，需要提供一个字符串参数来表示所需上下文的类型。

下面创建一个2d画布：

let ctx = canvas.getContext("2d");

ctx 变量包含一个 CanvasRenderingContext2D 对象，画布上所有绘画操作都会涉及到这个对象。

下面将画布背景涂黑：

ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, 200, 100);

4.2 绘制基础

首先需要知道一些2D画布的知识，画布左上角的坐标是(0, 0)，横坐标（x）轴向右延伸，纵坐标（y）轴向下延伸。

绘制实线

绘制矩形
fillRect(x, y, width, height) 绘制一个填充的矩形
strokeRect(x, y, width, height) 绘制一个矩形的边框
clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明。
x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
width和height设置矩形的尺寸。

绘制路径可以通过路径来实现复杂的图形，下面整理了一些常用到的方法：

beginPath()：在画笔当前所在位置开始绘制一条路径。在新的画布中，画笔起始位置为 (0, 0)。
moveTo()：将画笔移动至另一个坐标点，不记录、不留痕迹，只将画笔“跳”至新位置。
fill()：通过为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。
stroke()：通过为当前绘制路径的区域描边，来绘制一个只有边框的形状。
路径也可和矩形一样使用 lineWidth 和 fillStyle / strokeStyle 等功能。

绘制圆形
arc(x, y, radius, startAngle, endAngle, anticlockwise) 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
arcTo(x1, y1, x2, y2, radius) 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

arc方法，该方法有六个参数：

x,y为绘制圆弧所在圆上的圆心坐标。
radius为半径。
startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。
anticlockwise是布尔值，为true时，是逆时针方向，否则顺时针方向。
这些都是以x轴为基准。

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:

弧度=(Math.PI/180)*角度。

绘制文本
fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

另外还有一些有样式的文本，可以使用这些属性：

font = value 当前绘制的文本字体.默认是 10px sans-serif。
textAlign = value 文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
textBaseline = value 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

绘制图片

drawImage(image, x, y) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

drawImage方法还有更多参数：

ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);

第一个参数不变，为图片引用。
参数 2、3 表示裁切部分左上顶点的坐标，参考原点为原图片本身左上角的坐标。原图片在该坐标左、上的部分均不会绘制出来。
参数 4、5 表示裁切部分的长、宽。
参数 6、7 表示裁切部分左上顶点在画布中的位置坐标，参考原点为画布左上顶点。
参数 8、9 表示裁切部分在画布中绘制的长、宽。本例中绘制时与裁切时面积相同，你也可以定制绘制的尺寸。

详细完整的课程推荐：

MDN Canvas教程
W3C HTML5 Canvas

5.视频音频API

HTML5提供了用于文档中嵌入富媒体的元素<video>和<audio>标签，通过元素自带的API来控制视频和音频的播放搜索等。

5.1 视频

当前，video 元素支持三种视频格式：Ogg/MPEG4和WebM。

简单使用：

连接不同视频：

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。

<video> 标签的属性：

另外我们可以为视频创建简单的播放/暂停和调整尺寸的控件，这里需要使用play()和 pause() 还有两个属性：paused 和 width。

更多方法可以查看 HTML5 video - 方法、属性以及事件

5.2 音频

audio 元素能够播放声音文件或者音频流。

当前，audio 元素支持三种视频格式：Ogg Vorbis/MP3和Wav。

简单使用：

<audio src="1.ogg" controls="controls"></audio>

control 属性供添加播放、暂停和音量控件。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。

连接不同音频：

<audio> 标签的属性：

6.客户端存储API

现代web浏览器会提供一些在客户端存储用户数据的方法，只要用户允许，可以随时取出使用。

使用客户端存储API可以存储的数据量是优先的，具体取决于浏览器或者用户设置。

存储的方式可以这样分类：

传统方法：cookies
cookie使用比较久了，过时，存在各种安全问题，而且无法存储复杂数据，可能唯一的优势就是对非常老旧浏览器支持，如果业务需要，也可以使用cookie
新流派：Web Storage 和 IndexedDB
现代浏览器所提供的更加简单有效的客户端储存API。
未来：Cache API
一些现代浏览器支持新的 Cache API。这个API是为存储特定HTTP请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用，这样网站就可以在没有网络连接的情况下使用。缓存通常与 Service Worker API 组合使用，尽管不一定非要这么做。

6.1 WebStorage

web storageAPI只需存储简单的键/值对的数据（限制为字符串、数字等类型），并在需要的时候检索其值。

web storageAPI提供了两种在客户端存储数据的新方法：