原生 JavaScript 中所有可能触发 HTTP 请求的函数/属性
1. 直接发送请求的 API
fetch(url, options)
new XMLHttpRequest()
+ .open()
+ .send()
navigator.sendBeacon(url, data)
new WebSocket(url)
new EventSource(url)
2. HTML/SVG 属性赋值触发请求
// 资源加载类
element.src = "url"; // <img>, <script>, <iframe>, <video>, <audio>
element.href = "url"; // <link>, <a> (某些行为)
element.action = "url"; // <form> (提交时)
// CSS/预加载类
document.styleSheets[0].href = "url"; // CSSStyleSheet.href
link.relList.supports("preload") && link.href = "url";
// SVG 相关
svgElement.setAttribute("href", "url"); // SVG <use>, <image>
svgElement.setAttribute("xlink:href", "url");
// IFrame/嵌入内容
iframe.contentWindow.location.href = "url"; // 跨域受限,但会触发导航
3. DOM Methods / Events 间接触发请求
element.setAttribute("src", "url"); // 等效于 .src=""
element.setAttribute("href", "url"); // 等效于 .href=""
// Form 表单提交(GET/POST)
form.submit(); // 触发表单 action URL
formElement.click(); // type="submit" 的按钮
// Window/Location API
window.location.assign("url"); // 导航跳转(同 .href)
window.location.replace("url"); // 替换当前页面
history.pushState() / history.replaceState(); // SPA路由(可能伴随异步请求)
// Worker/SharedWorker
new Worker("worker.js"); // Worker脚本加载
new SharedWorker("shared.js");
<meta http-equiv="refresh" content="0; url=..."> <!-- 自动刷新跳转 -->
<link rel="prefetch" href="resource.url"> <!-- DNS预解析或预加载 -->
完整覆盖原则
- 显式调用:如
fetch
, XHR
。
- 隐式触发:修改资源型属性(
src
, href
, action
)。
- DOM方法间接影响:如
setAttribute
、表单操作。
内容由零声教学AI助手提供,问题来源于学员提问
本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:http://sdn.0voice.com/?id=8045