【重溫基礎】17.WebAPI介紹

時間 2019-11-08

標籤重溫基礎 17.webapi webapi 介紹简体版

原文原文鏈接

本文是 重溫基礎 系列文章的第十七篇。今日感覺：挑戰。javascript

系列目錄：html

本章節複習的是JS中的關於WebAPI相關知識，介紹的API比較多。前端

前置知識：
須要瞭解 JS 對象的相關知識。html5

1.WebAPI介紹

API：應用程序接口，是基於編程語言構建的結構，使開發人員更容易地建立複雜的功能。它們抽象了複雜的代碼，並提供一些簡單的接口規則直接使用。java

客戶端JavaScript提供不少可用的API，他們自己不是JavaScript語言的一部分，卻創建在JavaScript語言核心的頂部，爲使用JavaScript代碼提供額外的超強能力。他們一般分爲兩類：git

瀏覽器API：
內置於Web瀏覽器，能夠從瀏覽器和電腦周圍環境獲取數據，並用於複雜的操做。例如Geolocation API提供了一些簡單的JavaScript結構來獲取位置數據，這種API一般抽象不少複雜邏輯，咱們只要調用API便可。github
第三方API：
缺省狀況下不會內置於瀏覽器，而必須在Wen中某個地方獲取代碼和信息，例如Twitter API能夠推送最新推文給咱們，它提供一系列第三方API讓咱們獲取Twitter的服務和信息。web

1.1 API如何工做

那麼，這些API是如何工做的？
不一樣的JavaScript的API工做內容不一樣，但具備如下幾個相同點：編程

都是基於對象
API經過使用一個或多個JavaScript對象與咱們的代碼交互，這些對象做爲API使用的數據（包含在對象屬性中）的容器，和API提供的功能（包含在對象的方法中）。
如Geolocation API則是由如下幾個對象組成：

Geolocation, 包含三種控制地理數據檢索的方法。
Position, 表示在給定的時間的相關設備的位置。它包含一個當前位置的Coordinates 對象。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。
Coordinates,包含有關設備位置的大量有用數據，包括經緯度，高度，運動速度和運動方向等。

一般這麼使用：json

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);
複製代碼

第一個參數不變，爲圖片引用。
參數二、3 表示裁切部分左上頂點的座標，參考原點爲原圖片自己左上角的座標。原圖片在該座標左、上的部分均不會繪製出來。
參數四、5 表示裁切部分的長、寬。
參數六、7 表示裁切部分左上頂點在畫布中的位置座標，參考原點爲畫布左上頂點。
參數八、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 storageAPI只需存儲簡單的 鍵/值對的數據（限制爲字符串、數字等類型），並在須要的時候檢索其值。
web storageAPI提供了兩種在客戶端存儲數據的新方法：

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,包含有關設備位置的大量有用數據，包括經緯度，高度，運動速度和運動方向等。