【重温基础】17.WebAPI介绍
栏目: JavaScript · 发布时间: 5年前
内容简介:本文是今日感受:挑战。系列目录:
本文是 重温基础 系列文章的第十七篇。
今日感受:挑战。
系列目录:
本章节复习的是JS中的关于WebAPI相关知识,介绍的API比较多。
前置知识:需要了解 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
,包含有关设备位置的大量有用数据,包括经纬度,高度,运动速度和运动方向等。
通常这么使用:
navigator.geolocation.getCurrentPosition(function(options){ // ... do something });
- 都有可识别的入口点
即API的入口位置,如 Geolocation API
的入口在 Navigator.geolocation
属性, 它返回浏览器的 Geolocation
对象,所有有用的地理定位方法都可用。
在 文档对象模型(DOM) 的API入口位置更简单,常常都挂载在 Document
对象上,或者 HTML
元素上:
let a = document.createElement('div');// 创建一个新的div元素 let b = document.querySelector('div');// 获取一个已经存在的div元素 a.textContent = "hi leo!"; // 给a元素设置文本 b.appendChild(a); // 将a元素添加到b元素下 // <div>hi leo!</div>
详细的后面介绍。
- 都使用事件来处理状态的变化
有些特定的API会包含一些事件,当事件触发,我们便可以运行函数的处理属性,做一些不同的操作。例如 XMLHttpRequest
对象的实例,有很多的事件可以调用。
// 简单写 const url = "https://www.baidu.com"; const req = new XMLHttpRequest(); req.open('GET', url); req.responseType = "json"; req.send(); req.onload = function(){ // ... do something }
- 都会在适当位置提供额外的安全机制
主要还是处于安全考虑,提供额外的安全机制,比如常见同源策略,一些特定页面只能在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操作:
let a = document.createElement('a');// 1. 创建一个新的a元素 let b = document.querySelector('a');// 2. 获取一个已经存在的a元素 a.textContent = "进入pingan8787博客"; // 3. 给a元素设置文本 a.href = "http://www.pingan8787.com"; // 4. 给a元素添加跳转地址 a.style.color = "red"; // 5. 给a元素添加样式 a.style.backgroundColor = "black"; a.setAttribute("my_class"); // 6. 给a元素添加class类名 b.appendChild(a); // 7. 将a元素添加到b元素下
这么一个简单的例子,实际可以看出DOM提供的方法很多,下面分类介绍下这些方法:
- DOM HTML操作
- 改变HTML输出流 :
通过 document.write()
直接修改HTML输出流写内容。
document.write("hello leo");
注意:千万不要在文档加载之后使用,否则覆盖文档。
- 改变HTML内容 :
通过 innerHTML
属性来改变HTML元素的内容:
document.getElementById(id).innerHTML = new HTML; // 通过ID获取 (getElementById) // 通过name属性(getElementsByName) // 通过标签名 (getElementsByTagName) // 通过类名 (getElementsByClassName) // 获取html的方法 (document.documentElement) // 获取body的方法 (document.body) // 通过选择器获取一个元素(querySelector) // 通过选择器获取一组元素(querySelectorAll)
例子:
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;
例子:
document.getElementById("id1").style.color = "red"; document.getElementById("id1").style.backgroundColor = "green";
注意: style
后面的样式的属性名只能使用 命名小驼峰 。
- DOM 事件操作
如要对元素做点击事件的绑定,可以在HTML的 onclick
事件属性上绑定方法:
<div onclick="fun()"></div> <div onclick="fun(prams)"></div>
另外可以绑定的事件类型还有很多:
<div onload="fun()"></div> <div onchange="fun()"></div> <div onmouseover="fun()"></div> <div onmousedown="fun()"></div>
详细的文档可以查看 HTML DOM Event 对象
- DOM 节点操作
- 创建新的HTML元素
需要先创建一个新元素节点,然后在使用 appendChild
方法,向一个已存在的元素上追加这个新元素:
<div id = "id1"></div>
// 创建新元素节点 let a = document.createElement('p'); let b = document.createTextNode('新的文本'); a.appendChild(b); // 获取已存在元素 let div = document.getElementById('id1'); // 追加新元素 div.appendChild(a);
- 删除已有的HTML元素
如果需要删除HTML元素,就必须先获得该元素的父元素,再使用 removeChild
方法删除:
<div id = "id1"> <p id = "id2">hello leo</p> </div>
let a = document.getElementById("id1"); let b = document.getElementById("id2"); a.removeChild(b);
2.2 Window对象
Window 对象表示浏览器中打开的窗口。
Window 对象涉及到的属性和方法非常多,具体可以查看 Window 对象 比较详细。
这里一个简单的例子,实现获取视窗(显示文档的内部窗口)的宽高,并设置给指定的Div元素,并且当我们调整窗口时候,也会及时改变Div的宽高。
let div = document.querySelector('div'); // 获取宽高 let w = window.innerWidth; let h = window.innerHeight; // 设置宽高 div.style.width = w + 'px'; div.style.heitgh = h + 'px'; // 设置及时调整div宽高 window.onresize = function(){ w = window.innerWidth; h = window.innerHeight; div.style.width = w + 'px'; div.style.heitgh = h + 'px'; }
3.获取服务器数据API
这一部分主要复习 Ajax
(全称:Asynchronous JavaScript and XML)。
Ajax
主要要解决的问题是:避免重复加载刷新整个页面,因为有时候我们只是小部分数据更新,这时候我们这要刷新这部分的数据,而不是整个页面。
Ajax
不是新的编程语言,而是一种使用现有标准的新方法。
下面看一下 Ajax 模型图:
Ajax模型包括使用Web API作为代理来更智能地请求数据,而不仅仅是让浏览器重新加载整个页面。让我们来思考这个意义:
比如:我们逛淘宝,搜索或打开商品页面时,顶部导航来和页眉页脚等,都保持不变。
这样做的好处:
- 页面更新更快,减少等待刷新,体验更好,响应更快。
- 下载的数据更少,减少带宽的浪费。
另外为了提高加载速度,网站有时候也会将首次请求和数据存储在用户计算机中,下次再请求就直接先使用本地版本,如果内容有更新才会去服务器获取新数据,原理图:
3.1 Ajax基础使用
XMLHttpRequest
是 AJAX
的基础。
所有现代浏览器均支持 XMLHttpRequest
对象(IE5 和 IE6 使用 ActiveXObject
)。
创建 XMLHttpRequest
对象的语法:
variable=new XMLHttpRequest(); // IE5 和 IE使用 ActiveX 对象: variable=new ActiveXObject("Microsoft.XMLHTTP");
为了兼容所有浏览器(包括IE5 IE6),我们就必须检查浏览器是否支持 XMLHttpRequest
对象,若支持则创建 XMLHttpRequest
对象,否则创建 ActiveXObject
对象。
let my_http; if (window.XMLHttpRequest){ // 非 ES5 ES6 my_http=new XMLHttpRequest(); if (xmlhttp.readyState==4 && xmlhttp.status==200){ // 网络请求成功后,执行的操作 } } }else{ // ES5 ES6 my_http=new ActiveXObject("Microsoft.XMLHTTP"); }
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
请求。
例子:
// GET my_http.open("GET","http://www.baidu.com",true); my_http.send(); // POST my_http.open("POST","http://www.baidu.com",true); my_http.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" ); // 添加 HTTP 头 my_http.send("name=leo");
如果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(请求已完成,且响应已就绪) |
status | 200("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的浏览器内渲染并展现。
详细完整的课程推荐:
下面复习一下 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)轴向下延伸。
- 绘制实线
ctx.lineTo(100,50); // 绘制目标坐标 ctx.lineWidth = 5; // 线条宽度 ctx.stroke(); // 绘制实线
- 绘制矩形
fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域,让清除部分完全透明。
x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。
width和height设置矩形的尺寸。
// 实心矩形 ctx.fillStyle = 'rgb(255, 0, 0)'; // 矩形颜色 ctx.fillRect(50, 50, 100, 150); // 矩形起止坐标 // 空心矩形 ctx.strokeStyle = 'rgb(255, 255, 255)';// 矩形边框颜色 ctx.strokeRect(25, 25, 175, 200);// 矩形起止坐标
- 绘制路径
可以通过路径来实现复杂的图形,下面整理了一些常用到的方法:
-
beginPath()
:在画笔当前所在位置开始绘制一条路径。在新的画布中,画笔起始位置为 (0, 0)。 -
moveTo()
:将画笔移动至另一个坐标点,不记录、不留痕迹,只将画笔“跳”至新位置。 -
fill()
:通过为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。 -
stroke()
:通过为当前绘制路径的区域描边,来绘制一个只有边框的形状。 - 路径也可和矩形一样使用
lineWidth
和fillStyle
/strokeStyle
等功能。
ctx.fillStyle = 'rgb(255, 0, 0)'; // 设置填充颜色 ctx.beginPath(); // 开始 ctx.moveTo(50, 50); // 移动到结束点的坐标 // .. 可以在到处移动 ctx.fill(); // 绘制
- 绘制圆形
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)*角度。
cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill();
- 绘制文本
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.
ctx.strokeStyle = 'white'; ctx.lineWidth = 1; ctx.font = '36px arial'; ctx.strokeText('hello leo !', 50, 50); ctx.fillStyle = 'red'; ctx.font = '48px georgia'; ctx.fillText('hello leo !', 50, 150);
另外还有一些有样式的文本,可以使用这些属性:
-
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
。
ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello leo ", 0, 100);
- 绘制图片
-
drawImage(image, x, y)
其中 image
是 image
或者 canvas
对象, x
和 y
是其在目标 canvas
里的起始坐标。
let img = new Image(); img.src = "leo.png"; img.onload = function(){ ctx.drawImage(img, 50, 50); };
drawImage
方法还有更多参数:
ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
- 第一个参数不变,为图片引用。
- 参数 2、3 表示裁切部分左上顶点的坐标,参考原点为原图片本身左上角的坐标。原图片在该坐标左、上的部分均不会绘制出来。
- 参数 4、5 表示裁切部分的长、宽。
- 参数 6、7 表示裁切部分左上顶点在画布中的位置坐标,参考原点为画布左上顶点。
- 参数 8、9 表示裁切部分在画布中绘制的长、宽。本例中绘制时与裁切时面积相同,你也可以定制绘制的尺寸。
详细完整的课程推荐:
5.视频音频API
HTML5提供了用于文档中嵌入富媒体的元素 <video>
和 <audio>
标签,通过元素自带的API来控制视频和音频的播放搜索等。
<video> <source src="1.mp4" type="video/mp4"> <source src="2.webm" type="video/webm"> <a href="3.mp4">打开mp4</a> </video>
5.1 视频
当前,video 元素支持三种视频格式: Ogg
/ MPEG4
和 WebM
。
简单使用:
<video src="1.ogg" controls="controls"> </video> <video src="1.ogg" controls="controls" width="320" height="240"> </video>
连接不同视频:
<video width="320" height="240" controls="controls"> <source src="1.ogg" type="video/ogg"> <source src="2.mp4" type="video/mp4"> 您的浏览器不支持! </video>
<video> 与 </video>
之间插入的内容是供不支持 video
元素的浏览器显示的。
<video>
标签的属性:
属性 | 描述 |
---|---|
autoplay |
视频在就绪后马上播放 |
controls |
向用户显示控件,比如播放按钮 |
height |
设置视频播放器的高度 |
width |
设置视频播放器的宽度 |
src |
要播放的视频的 URL |
preload |
视频在页面加载时进行加载,并预备播放,如果使用 "autoplay",则忽略该属性 |
loop |
当媒介文件完成播放后再次开始播放 |
另外我们可以为视频创建简单的播放/暂停和调整尺寸的控件,这里需要使用 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 controls="controls"> <source src="1.ogg" type="audio/ogg"> <source src="2.mp3" type="audio/mpeg"> 您的浏览器不支持! </audio>
<audio>
标签的属性:
属性 | 描述 |
---|---|
autoplay |
视频在就绪后马上播放 |
controls |
向用户显示控件,比如播放按钮 |
src |
要播放的视频的 URL |
preload |
视频在页面加载时进行加载,并预备播放,如果使用 "autoplay",则忽略该属性 |
loop |
当媒介文件完成播放后再次开始播放 |
6.客户端存储API
现代web浏览器会提供一些在客户端存储用户数据的方法,只要用户允许,可以随时取出使用。
使用客户端存储API可以存储的数据量是优先的,具体取决于浏览器或者用户设置 。
存储的方式可以这样分类:
- 传统方法:cookies
cookie使用比较久了,过时,存在各种安全问题,而且无法存储复杂数据,可能唯一的优势就是对非常老旧浏览器支持,如果业务需要,也可以使用cookie
- 新流派:Web Storage 和 IndexedDB
现代浏览器所提供的更加简单有效的客户端储存API。
- 未来:Cache API
一些现代浏览器支持新的 Cache
API。这个API是为存储特定HTTP请求的响应文件而设计的,它对于像存储离线网站文件这样的事情非常有用,这样网站就可以在没有网络连接的情况下使用。缓存通常与 Service Worker
API 组合使用,尽管不一定非要这么做。
6.1 WebStorage
web storage
API只需存储简单的 键/值 对的数据(限制为字符串、数字等类型),并在需要的时候检索其值。
web storage
API提供了两种在客户端存储数据的新方法:
localStorage sessionStorage
localStorage方法:
localStorage.setItem(key, value) localStorage.getItem(key) localStorage.removeItem(key)
localStorage.setItem('name','leo'); let leo = localStorage.getItem('name'); leo ; // "leo" localStorage.removeItem('name');
关闭浏览器以后数据还在。
sessionStorage方法:
sessionStorage.setItem(key, value) sessionStorage.getItem(key) sessionStorage.removeItem(key)
sessionStorage.setItem('name','leo'); let leo = sessionStorage.getItem('name'); leo ; // "leo" sessionStorage.removeItem('name');
关闭浏览器以后数据不在。
7.第三方API
并不是所有的API都是内置在浏览器中,有一些可能是其他网站(如谷歌,Facebook等)提供的API,让开发者调用,从而使用他们的服务和数据等。
API通过使用一个或多个JavaScript对象与我们的代码交互,这些对象作为API使用的数据(包含在对象属性中)的容器,和API提供的功能(包含在对象的方法中)。
例如我们调用谷歌地图的Google Maps APIs ,需要先引入他们开放的JavaScript库。
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
然后就可以这么使用:
navigator.geolocation.getCurrentPosition(function(options){ // ... do something });
如 Geolocation API
则是由以下几个对象组成:
-
Geolocation
, 包含三种控制地理数据检索的方法。 -
Position
, 表示在给定的时间的相关设备的位置。它包含一个当前位置的Coordinates
对象。还包含了一个时间戳,这个时间戳表示获取到位置的时间。 -
Coordinates
,包含有关设备位置的大量有用数据,包括经纬度,高度,运动速度和运动方向等。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。