0

0

javascript中的Web API有哪些【教程】

幻影之瞳

幻影之瞳

发布时间:2026-01-31 14:45:26

|

759人浏览过

|

来源于php中文网

原创

Web API 是浏览器实现的一组非 ECMAScript 标准的全局接口,如 fetch、localStorage、document.querySelector、setTimeout、Geolocation 等,挂载于 window 或 navigator 上,开箱即用但受浏览器支持与权限策略约束。

javascript中的web api有哪些【教程】

JavaScript 中没有叫“Web API”的单一接口,它是一组浏览器提供的、通过 JavaScript 调用的内置功能集合,不是 ECMAScript 标准的一部分,而是由浏览器实现的。

哪些接口算 Web API?看是否挂载在 windownavigator 等全局对象上

真正属于 Web API 的,是那些你能在浏览器控制台里直接访问的对象和方法,比如:

  • fetch()XMLHttpRequest(网络请求)
  • localStoragesessionStorage(客户端存储)
  • documentElementNode 相关的 DOM 操作方法(如 querySelector()addEventListener()
  • setTimeout()setInterval()(虽然语义上像 JS 原生,但实际由宿主环境提供)
  • Geolocationnavigator.geolocation)、NotificationClipboardnavigator.clipboard)等设备/系统级能力

它们共同特点是:不依赖第三方库,开箱即用,但行为受浏览器支持程度和权限策略(如 CORS、HTTPS 限制)约束。

fetch()XMLHttpRequest 怎么选?别只看“新旧”

fetch() 更现代、基于 Promise,但默认不带 cookie,且 404500 不会 reject —— 它只在网络失败时才抛错。而 XMLHttpRequest 更底层、可监听上传进度,适合大文件或需要精细控制的场景。

立即学习Java免费学习笔记(深入)”;

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载
  • 要用 cookie:加 credentials: 'include'fetch),或设 withCredentials = trueXMLHttpRequest
  • 要判断 HTTP 状态码是否成功:if (!res.ok) throw new Error(res.status),不能只靠 catch
  • 上传进度监听:只有 XMLHttpRequest.upload.onprogress 可靠;fetch 需配合 ReadableStream + TransformStream 手动拆包,成本高

DOM 操作中哪些方法容易被当成“JS 原生”,其实是 Web API?

document.getElementById()element.classList.add()event.preventDefault() 这些都不是 JavaScript 引擎内置的,而是浏览器实现的 DOM 规范接口。这意味着:

  • Node.js 环境里完全不可用(没 document
  • 部分方法兼容性差:比如 element.replaceChildren() 在旧版 Safari 不支持,得用 innerHTML = '' + append() 替代
  • querySelectorAll() 返回的是 NodeList,不是数组 —— 不能直接用 map(),得先转:[...nodeList].map(...) 或用 Array.from(nodeList)

权限类 API(如 navigator.permissions)为什么常返回 prompt 而不是 granted

浏览器对摄像头、位置、通知等敏感 API 实施渐进式授权策略。首次调用 navigator.permissions.query({ name: 'geolocation' }) 通常返回 state: 'prompt',不代表拒绝,而是“还没问用户”。真正触发弹窗的是后续调用具体 API,比如 navigator.geolocation.getCurrentPosition()

  • 不要依赖 query() 结果做逻辑分支,它只是状态快照
  • 调用 getCurrentPosition() 时必须处理 error.code === 1PERMISSION_DENIED)和 error.code === 2POSITION_UNAVAILABLE)等不同错误类型
  • iOS Safari 对 Notification.requestPermission() 有额外限制:必须由用户手势(如 click)触发,否则静默失败

Web API 的边界其实很模糊 —— 同一个函数,在 Chrome 里是标准实现,在 Node.js 里可能压根不存在,或者被 globalThis 上的另一个同名函数覆盖。用之前,先查 MDN 页面右上角的支持表格,比猜“应该有”靠谱得多。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

843

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

747

2023.11.06

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

781

2023.08.22

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

6430

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

348

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

415

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

95

2025.08.19

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

228

2023.10.18

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

33

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号