Web API

石山岭
159 阅读5分钟

什么是 Web API？

API 指的是应用程序编程接口（Application Programming Interface）。

Web API 是 Web 的应用程序编程接口。

浏览器 API 可以扩展 Web 浏览器的功能。

服务器 API 可以扩展 Web 服务器的功能。

JavaScript 验证 API

约束验证 DOM 方法

属性描述
checkValidity()如果 input 元素包含有效数据，则返回 true。
setCustomValidity()设置 input 元素的 validationMessage 属性。

使用

<body>
<input id="input" type="number" min="100" max="300" required>
<button onclick="testFunc()">快点我</button>
<p id="test_p"></p>
<script>
  function testFunc(){
    const input = document.getElementById("input")
    if (!input.checkValidity()){
      document.getElementById("test_p").innerHTML = input.validationMessage;
    }else{
      document.getElementById("test_p").innerHTML = input.value;
    }
  }

</script>

</body>

约束验证 DOM 属性

属性描述
validity包含与输入元素有效性相关的布尔属性。
validationMessage包含当有效性为 false 时浏览器将显示的消息。
willValidate指示是否将验证 input 元素。

有效性属性

input 元素的有效性属性包含许多与数据有效性相关的属性：

属性描述
customError如果设置了自定义有效性消息，则设置为 true。
patternMismatch如果元素的值与其 pattern 属性不匹配，则设置为 true。
rangeOverflow如果元素的值大于其 max 属性，则设置为 true。
rangeUnderflow如果元素的值小于其 min 属性，则设置为 true。
stepMismatch如果元素的值对其 step 属性无效，则设置为 true。
tooLong如果元素的值超过其 maxLength 属性，则设置为 true。
typeMismatch如果元素的值对其 type 属性无效，则设置为 true。
valueMissing如果元素（具有 required 属性）没有值，则设置为 true。
valid如果元素的值有效，则设置为 true

如果输入字段中的数字大于 100（input 元素的 max 属性），则显示一条消息：

例子-rangeOverflow 属性

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  }
}
</script>

Web History API

History 对象属性

属性描述
length返回历史列表中的 URL 数量。

History 对象方法

方法描述
back()加载历史列表中的上一个 URL。
forward()加载历史列表中的下一个 URL。
go()从历史列表中加载特定的 URL。

Web Storage API

localStorage 对象

localStorage 对象提供对特定网站的本地存储的访问。它允许您存储、读取、添加、修改和删除该域的数据项。

存储的数据没有到期日期，并且在浏览器关闭时不会被删除。

这些数据将在几天、几周和几年内均可用。

localStorage.setItem("name", "Bill Gates");
localStorage.getItem("name");

sessionStorage 对象

sessionStorage 对象与 localStorage 对象相同。

不同之处在于 sessionStorage 对象存储会话的数据。

当浏览器关闭时，数据会被删除。

sessionStorage.setItem("name", "Bill Gates");
sessionStorage.getItem("name");

Storage 对象属性和方法

属性/方法描述
key(n)返回存储中第 n 个键的名称。
length返回存储在 Storage 对象中的数据项数。
getItem(keyname)返回指定的键名的值。
setItem(keyname, value)将键添加到存储中，或者如果键已经存在，则更新该键的值。
removeItem(keyname)从存储中删除该键。
clear()清空所有键。

Web Worker API

什么是 Web Worker？

在 HTML 页面中执行脚本时，页面在脚本完成之前是无响应的。

Web Worker 是在后台运行的 JavaScript，独立于其他脚本，不会影响页面的性能。你可以继续做任何你想做的事情：点击、选取内容等，同时 web worker 在后台运行。

浏览器支持

表中的数字注明了完全支持 Web Workers 的首个浏览器版本：

ChromeIEFirefoxSafariOpera
Chrome 4IE 10Firefox 3.5Safari 4Opera 11.5
2010 年 1 月2012 年 9 月2009 年 6 月2009 年 6 月2011 年 6 月

检查 Web Worker 浏览器

在创建 web worker 之前，请检查用户的浏览器是否支持它：

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

创建 Web Worker 文件

现在，让我们在外部 JavaScript 中创建我们的 Web Worker。

在这里，我们创建了一个重要的脚本。该脚本存储在 "demo_workers.js" 文件中：

let i = 0;

function timedCount() {
  i ++;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

上面代码的重要部分是 postMessage() 方法 - 用于将消息发送回 HTML 页面。

创建 Web Worker 对象

现在我们有了 web worker 文件，我们需要从 HTML 页面调用它。

以下代码行检查 worker 是否已存在，如果不存在，它会创建一个新的 web worker 对象并运行 "demo_workers.js" 中的代码：

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

然后我们可以发送和接收来自 web worker 的消息。

向 web worker 添加一个 "onmessage" 事件侦听器。

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

当 Web Worker 发布消息时，将执行事件侦听器中的代码。来自 Web Worker 的数据存储在 event.data 中。

终止 Web Worker

当 web worker 对象被创建时，它会继续监听消息（即使在外部脚本完成之后）直到它被终止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

重用 Web Worker

如果将 worker 变量设置为 undefined，则在它终止后，您可以重用以下代码：

w = undefined;

全部代码

<body>
<p id="test_p"></p>
<button onclick="stopW()">结束脚本</button>
<script>

  // w.terminate();
//检查 Web Worker 浏览器 是否支持
if (typeof(Worker) !== "undefined") {
  w = new Worker("demo_workers.js");
  w.onmessage = function (event) {
    document.getElementById("test_p").innerText = event.data
  }
} else {

}
function stopW(){
  w.terminate();
  w = undefined;
}
</script>
</body>

JavaScript Fetch API

Fetch API 接口允许 Web 浏览器向 Web 服务器发出 HTTP 请求。

不再需要 XMLHttpRequest。

浏览器支持

表中的数字注明了完全支持 Fetch API 的首个浏览器版本：

ChromeIEFirefoxSafariOpera
Chrome 42Edge 14Firefox 40Safari 10.1Opera 29
2011 年 6 月2016 年 8 月2015 年 8 月2017 年 3 月2015 年 4 月

使用方式

可以创建一个txt文件读取。

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  myDisplay(y);
}

Web Geolocation API

定位用户的位置

HTML Geolocation API 用于获取用户的地理位置。

由于这可能会损害隐私，除非用户批准，否则位置不可用。

使用 Geolocation API

<script>
const x = document.getElementById("demo");
function getLocation() {
  //1.  检查是否支持 Geolocation
  if (navigator.geolocation) {
    //如果支持，请运行 getCurrentPosition() 方法 showError是用来处理错误
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
      //如果没有，则向用户显示一条消息
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
//输出纬度和经度
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
//处理错误信息
function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

getCurrentPosition() 方法 - 返回数据

getCurrentPosition() 方法在成功时返回一个对象。会始终返回纬度、经度和精度属性。如果可用，则返回其他属性：

属性返回
coords.latitude以十进制数表示的纬度（始终返回）。
coords.longitude以十进制数表示的经度（始终返回）。
coords.accuracy位置精度（始终返回）。
coords.altitude平均海平面以上的高度（以米计）（如果可用则返回）。
coords.altitudeAccuracy位置的高度精度（如果可用则返回）。
coords.heading从北顺时针方向的航向（如果可用则返回）。
coords.speed以米/秒计的速度（如果可用则返回）。
timestamp响应的日期/时间（如果可用则返回）。

实时定位

  • watchPosition() - 返回用户的当前位置，并随着用户移动（如汽车中的 GPS）继续返回更新的位置。
  • clearWatch() - 停止 watchPosition () 方法。
avatar
文章
阅读
粉丝